# ShopinZen WordPress Plugin Frontend

This directory contains the React-based frontend for the ShopinZen WordPress Integrator plugin. It is built using **React**, **TypeScript**, **Vite**, and **Tailwind CSS**.

## 🚀 Development Workflow

To start developing the frontend:

1.  **Install Dependencies**:
    ```bash
    cd frontend
    npm install # or yarn install
    ```

2.  **Setup Environment Variables**:
    Before starting the dev server, you must create `.env` files from the provided examples in **both** the frontend and the root directory:
    - **Plugin Root**: `cp .env.example .env` (contains API URLs and integrator script settings).
    - **Frontend**: `cp frontend/.env.example frontend/.env`. 
        -   **Note**: `WP_SITE_BASE_PATH` is only necessary if your WordPress site is hosted in a **subpath** (e.g., `https://example.com/shop/`). If the site is at the root (`/`), you can leave it as `/` or empty.

3.  **Run Dev Server**:
    ```bash
    npm run dev # or yarn dev
    ```
    This script will pre-build i18n messages and start the Vite development server.

4.  **Accessing Applications**:
    Since we do not have a base `index.html` file, you must navigate directly to the folder name in `src/apps` that you wish to work on. For example:
    -   `http://localhost:5173/home`
    -   `http://localhost:5173/register`

## 📁 Project Structure

The project is organized into multiple independent applications within the `src/apps` directory:

-   `src/apps/`: Each subdirectory in this folder (e.g., `home`, `register`) represents a standalone React application.
-   **WordPress Integration**: Each application in `src/apps` corresponds to a specific **WordPress Admin Page**.

## 🔒 Security & API Requests

All HTTP requests to the **WordPress REST API** must include a valid nonce for authentication.

-   **Header**: `X-WP-Nonce`
-   **Value**: The nonce is available via the `dev-env.ts` utility:
    ```typescript
    import { window_SHOPINZEN_INTEGRATOR_object } from "@src/dev-env";
    const nonce = window_SHOPINZEN_INTEGRATOR_object.getKey("nonce");
    ```

## 🏗️ Build Process

When you are ready to ship the plugin:

1.  **Build the Frontend**:
    ```bash
    npm run build # or yarn build
    ```
2.  **Plugin Inclusion**:
    > [!IMPORTANT]  
    > In compliance with WordPress guidelines, both the optimized assets in `dist/` and the original `src/` files are included in the final plugin package. Development dependencies and environment files are automatically excluded.

The build process generates optimized assets and HTML templates that are enqueued by the WordPress backend.

> [!NOTE]
> The build also generates an `assets/vendor.js` file. This is a shared bundle containing common libraries (React, React-Intl, etc.) used across all applications to optimize loading times and reduce overall package size.

## 🌍 Internationalization (i18n)

We use `react-intl` and `formatjs` for handling translations.

### Translation Scripts
- `npm run i18n:build`: Extracts all messages from the source code and compiles them.

> [!NOTE]
> After the build process, the default language for the application is set to **English (en)**.

### Handling i18n Errors via VS Code

Our ESLint configuration enforces i18n best practices. If you see linting errors related to missing IDs or literal strings in JSX:

1.  **Hover over the error** or place your cursor on it.
2.  **Press `Ctrl + .`** (or click the lightbulb icon).
3.  **Choose the Quick Fix** to automatically generate a unique ID based on the content hash.

This ensures all strings are properly wrapped in `<FormattedMessage />` or `intl.formatMessage()` with unique, stable identifiers.

---

*Note: For overall plugin management, refer to the README in the root directory.*