# Commerce Hub # 1. Commerce Hub: Overview The **Commerce Hub** section is your central hub for managing the ecommerce components of your platform. It includes Offerings, Orders, Configurations (order statuses), Categories, and Payment Methods—each tailored to support project-scoped setups and rapid cloning. **Overview** 1. **Scope:** Everything under **Commerce Hub** in the left nav—Offerings, Orders, Configurations, Categories, Payment Methods. 2. **Project-Scoping:** Many pages let you choose a project context (via pills or dropdowns) so each project can have its own settings. 3. **Clone Support (Configurations):** Quickly copy order-status setups from one project into another. 4. **Unified UI Patterns:** List views with Total, Filter pane, Search bar, and a +Add button; side-panel forms for create/edit; inline actions for edit/delete. # 2. Commerce Hub: Use Cases

**Use Case #1: Publishing New Products** Your e-commerce team wants to onboard a new line of items to the Marketplace. They click **Commerce Hub** **→ Offerings**, then **+ Add** to open the “Add product” form. They select the target Project, enter Name, SKU, Price, choose a Category, upload a Main Image, and toggle **Active**. Upon saving, the new product appears in the table (with Total count updated) and is immediately searchable and filterable by Name, SKU, Category, and Status—ready for customers to browse and purchase. **Use Case #2: Reusing Marketplace Settings via Project-Scoped Configurations** A second business unit needs the same Order Statuses, Category hierarchy, and Payment Methods you built for Project A. From **Commerce Hub → Configurations**, they select their Project in the “Settings by project” bar, click **Clone from project**, choose Project A in the modal, and hit **Clone**. Instantly, all statuses, labels, and configuration entries appear for the new Project. They can then tweak colors or labels in-place without rebuilding from scratch. **Use Case #3: Building & Managing Categories for Discovery** Your merchandising team wants to group products by “Electronics,” “Accessories,” and “Clearance.” They go to **Commerce Hub → Categories**, click **+ Add**, pick the Project, enter the Label and URL slug, and optionally nest it under an existing parent. In the table view they can expand each row to see how many products already use that category, edit or delete categories, and drag-and-drop to reorder. Search and filtering on the Category name let them locate and manage any node in a large tree. **Use Case #4: Enabling Multiple Payment Methods & Integrations** Your finance team needs to offer PayPal, Stripe, and an in-house “Manual” option. Under **Commerce Hub** **→ Payment methods**, they click **+ Add**, choose the Project, pick Type (e.g. “Stripe”), select Integration, set the Merchant ID, and define Currencies, Rules, and Credentials via the JSON editor. Toggling the Status switch immediately enables or disables that payment option on the storefront. The table shows Name, Type, Integration, and Project columns—so teams can audit and adjust live methods in seconds. **Use Case #5: Reviewing & Fulfilling Customer Orders** Customer support needs to monitor incoming orders. They open **Commerce Hub** **→ Orders**, where the table lists Order ID, Date, Project, Customer, Cost, and Status—together with Total count, Search box, and a **Filter** drawer for date ranges, customer name, price slider, and status selectors. Clicking the expand-row arrow on any order reveals full order details on the right. From there, they can update the Status dropdown (e.g. “Shipped”), add internal notes, or trigger notifications—ensuring every order is tracked, processed, and closed in one unified interface.

# 3. Commerce Hub: Offerings The **Offerings** page in Commerce Hub is your central catalog for defining and managing the items available for customers to purchase. Each product can be scoped to a specific Project, assigned to one or more Categories, priced, and localized with rich content and SEO metadata.

##### Finding “Offerings” in Commerce Hub Open the left-hand navigation menu. Scroll down to **Commerce Hub** and click its chevron to expand. Click **Offerings** under the **Commerce Hub** section. That will take you to the Products page where you can view, add, filter, and manage your catalog.

##### Table View **Total (top-left):** Shows the number of products in your current view. **Filter (funnel icon):** Opens a side-panel with advanced filters (see **Filtering & Searching** below). **Search:** Instant, real-time search across product names and subtitles. **Columns:**

Column	Description
Products	Thumbnail, Name link (e.g. “teast”), and subtitle below (e.g. “Teast”).
Reference	Custom SKU or reference code (or “–” if none).
Project	The Project the product belongs to (or “–” for global).
Category	Primary Category label (e.g. “Test”).
Price ⇅	Numeric price in your currency. Click header to sort ascending/descending.
Status ⇅	Active (green) or Inactive (gray) badge. Click header to sort.
Actions	✏️ Edit opens the Edit form; 🗑️ Delete permanently removes the product (with confirm).

**+ Add (top-right):** Opens the “Add product” form (see below). ##### Filtering & Searching Click **Filter** to open these options: 1. **Name** – Free-text search on the product name. 2. **SKU** – Free-text search on SKU/reference. 3. **Reference** – Dropdown of existing reference codes. 4. **Categories** – Multi-select categories. 5. **Price** **range** – Enter a **From** and **To** value to set a minimum/maximum price range (e.g. 10 – 300). 6. **Show only** – Checkboxes for Active or Inactive. After choosing criteria, click **Save** to apply filters (the Total count updates accordingly). ##### Adding a Product **Open the Form:** Click **+ Add** in the Products table header. **General Section** 1. **Project** – (Required) Select the Project context. 2. **Name** – (Required) Enter the product name. 3. **Categories** – Pick one or more categories for discovery. 4. **Reference** – (Optional) Select or type a reference/SKU. 5. **SKU** – (Optional) Enter your own SKU. 6. **Price** – (Required) Numeric price. 7. **Active** – Toggle on to make the product live. **Images** 1. **Main image** – Drag-drop or browse to upload a primary photo (jpg/png). 2. **Main external image** – Paste a URL to load an off-site image. 3. **Additional images** – Upload multiple supporting photos. 4. **Additional external images** – Paste URLs for extra photos. **Properties:** JSON editor for custom key/value attributes (e.g., color, weight). **Save:** Click **Save** to create the product. It immediately appears in the table. ##### Editing a Product Click ✏️ in the Actions column to open the Edit panel, which has two tabs: **A. General Tab** Identical to the Add form, but pre-populated. You can: 1. Change Name, Categories, Reference, SKU, Price, Active state. 2. Update or replace images. 3. Modify JSON **Properties**. **B. Contents Tab** This tab manages translations, page content, and SEO metadata: **Languages** – Select the target language badge (Ar, En, Es, Zh, etc.). **Title** – Localized product title for the storefront. **Subtitle** – Short tagline or description. **Page meta title** – SEO title tag. **Page meta description** – SEO meta description tag. **Properties** – JSON editor for any locale-specific attributes. **Text** – Rich-text editor for detailed product description, features, specs. **Clone translation from:** Opens a modal to select a source language; copies its fields into the current language. **Translate:** Invokes an integrated translation service (e.g., OpenAI) to auto-translate all fields into the current language. **Save:** Click **Save** (bottom-left) to apply edits in both tabs. ##### Deleting a Product Click 🗑️ in the Actions column. A confirmation tooltip appears: > **Are you sure?** \[Cancel\] \[Delete\] 1. **Delete** – Permanently removes the product. 2. **Cancel** – Closes the tooltip without action.

**Audit Logging:** Every deletion registers the product name, user, and timestamp in the system audit log.

With these tools, the Marketplace **Products** module becomes a powerful, project-scoped catalog manager—fully searchable, sortable, localized, and audit-ready. # 4. Commerce Hub: Orders

The **Orders** page gives you a read-only ledger of all customer purchases. You can sort, search, and filter your orders—and expand any row to see the individual products (line items) in that order—but you cannot create, edit, or delete orders from this interface. ##### Navigating to Orders

1. Open the left-side menu. 2. Scroll to **Commerce Hub** and expand it. 3. Click **Orders**.

**Table View**

Element	Description
Total	Displays the total number of orders matching your current filters.
Filter (funnel)	Opens the Filters drawer (see below).
Search…	Free-text search by Order ID or Customer name.
+ Add	Not shown—orders cannot be created here.

**Columns**

• ▾ Expand icon	Click to expand/collapse the row and reveal that order’s line items.
Order ID	Unique identifier for the order.
Date ⇅	Date/time when the order was placed. Click header to sort ascending/descending.
Project	(Optional) Project tied to the order, if any.
Customer	Clickable link to the Client profile who placed the order.
Cost	Total sum of all line-item costs.
Status	Colored badge showing the order’s current status. (View-only.)

##### Expanding an Order When you click the ▾ icon on the left of a row, a nested section opens showing each product in that order:

Field	Notes
Quantity × Product	e.g. “2 × Test”
SKU	The SKU of the product ordered.
Line-item Cost	Subtotal cost for that quantity of the product.

**View Order Details (Drawer):** If you click the **Order ID** link (instead of the ▾ expand icon), a full‑height drawer slides in from the right to show low‑level metadata: **Additional:** A read‑only JSON editor displaying the order’s `meta` object. **JSON View:** You can expand/collapse properties to inspect all nested fields. This drawer is strictly view‑only—useful for debugging or audit purposes when you need to see every piece of metadata attached to the order.

##### Filtering & Searching Click **Filter** to open these options:

1. **Created date** (Start Date → End Date) 2. **Customer(s)** – multi-select your clients 3. **Price** – slider or min/max to narrow by total cost 4. **Status(es)** – multi-select one or more order statuses

Enter values and click **Save** to apply. The table and total count will update accordingly. ##### Permissions & Actions

1. **View-only**: There is no **Add**, **Edit**, or **Delete** on this page. 2. **Audit**: All orders are sourced from your e-commerce or billing system—changes must be made there. 3. **Expand**: The only action available is to expand a row and inspect its products. 4. **Sorting & Searching**: Use the column sort buttons and search bar to narrow down orders quickly. By centralizing your sales data here, the Orders page gives you a clear, filterable history of every purchase—perfect for reporting, auditing, or simply checking what goods a client has received.

# 5. Commerce Hub: Configurations

The **Marketplace** **→ Configurations** page lets you set up all your Marketplace lookup‐lists—like order statuses, payment methods, and product categories—on a per-project basis. Each project has its own entries, but you can save time by clicking **Clone from project** to import another project’s configuration in one step.

##### Navigating to Configurations Open the side menu → **Marketplace** → **Configurations**. At the very top of the Configurations page you’ll find the **Settings by project** bar. This is your single-click switcher for viewing or editing any project’s lookup lists: 1. **Search** – Filter the pill list by typing part of a project’s name. 2. **Project pills** – Click a pill to load that project’s configuration panels below. 3. **Horizontal scroll** – If you have many projects, scroll left/right to reveal hidden pills. Below the project selector, you’ll see **Order statuses.** For example: > **Order statuses** > (If none exist yet) “No data to display” ##### Adding a New Order Click **+ Add** on the **Order statuses** card. Fill in the **Add order** panel fields:

1. **Project**: (pre-selected) the target project. 2. **Name: Business**-facing status name (e.g. Pending). 3. **Color picker**: Choose the badge color for quick recognition. 4. **Make as default**: Sets this status as the default when new orders are created. 5. **Final**: Marks this status as a terminal (can’t transition onward). 6. **Change reason required:** Requires users to enter a reason when changing the order status.

Click **Save** to create the new status. ##### Editing & Deleting Items Once a status exists, use the **Edit** icon to modify Name, Color, or flags, and the **🗑️ Delete** icon to remove it. Label is displayed in the Edit panel as a read-only field and cannot be modified. **Cloning from Another Project:** 1. Click **Clone from project**. 2. In the modal, pick the **source project** whose items you want to copy. 3. Click **Clone**. 4. All statuses from that project instantly appear in your current project’s list.

# 6. Commerce Hub: Categories

The **Categories** section lets you organize your Products into hierarchical groups for easy discovery and management. You can view, add, edit, nest, and translate categories—all scoped per Project. ##### Accessing Categories

1. In the left sidebar, expand **Commerce Hub**. 2. Click **Categories**.

##### Categories List At the top of the **Categories** page you’ll see: **Total:** Total number of categories (updates as you filter/paginate) **Search…**: Live-search by category label or URL **+ Add**: Opens the “Add category” drawer Below is a table of all categories visible to you:

Column	Description
▾	Expand to reveal child categories (if any). Nested items indent under their parent.
Name	The category’s Label, with its URL slug shown beneath (e.g. `/test`).
Products	Number of Products currently assigned to this category (click to list them).
Actions	✏️ Edit: Modify this category’s settings ➕ Add: Quickly attach Products here 🗑️ Delete

##### Searching & Filtering **Search**: Type any part of a category’s name or URL to filter the table in real time. **Expand**: Click a parent row’s arrow ▾ to see its children. ##### Adding a New Category Click **+ Add** (top-right). In the **Add category** drawer, fill in: **General: Project** – Select the Project to which this category belongs. **Label** – Human-readable category name (e.g. “Electronics”). **URL** – The slug used in your storefront (e.g. `/electronics`). **Properties:** A JSON tree picker for any custom metadata. Click the tree icon and **Append** to add key/value pairs. Read more on **«How to Manage Texts»** [here](https://wiki.wi.services/books/wifox-business-core-solution-wbcs/page/6-how-to-manage-texts). ##### Translation Select one or more **Languages**. For each language, enter: **Name** – Localized category name. **Text** – Optional description or tooltip. Click **Save**. The new category appears in the list (and can be nested under its parent if you edit its URL to include a parent slug). ##### Editing an Existing Category

1. Click the ✏️ **Edit** icon in the Actions column. 2. Update any of the **General**, **Properties**, or **Translation** fields exactly as in “Add category.” 3. Click **Save** to apply your changes.

##### Deleting a Category Click the 🗑️ **Delete** icon in the Actions column. Confirm to remove the category. (Products assigned to it remain, but lose that category tag.) With these tools, you can quickly structure your Marketplace catalog, localize for global audiences, and ensure that Products are always grouped logically.

# 7. Commerce Hub: Payment Methods

The **Payment Methods** section lets you configure which payment options appear in your storefront, per Project. You can enable/disable methods, connect integrations, set currencies, and manage rules and credentials—all without writing code. ##### Accessing Payment Methods In the left sidebar, expand **Commerce Hub**. Click **Payment methods**. ##### Payment Methods List At the top you’ll find: **Total:** Number of methods (updates as you search/paginate) **Search…**: Live-search by Name, Merchant ID, or Project **+ Add**: Opens the “Add payment method” drawer Below is a table of all methods visible to you:

Column	Description
Status	Toggle on (blue) to publish this method in the client-facing list; off (gray) to hide it.
Name	The internal name or label for this method. In some cases it’s a translated label or icon title.
Project	The Project this method belongs to. If “–”, it’s available globally.
Type	Auto – Backend–driven (e.g. Stripe, Adyen) Manual – Offline or custom (e.g. cash, bank transfer)
Integration	External – Uses a third–party connector (Stripe, PayPal) Internal – Built-in or in-house processor
Merchant ID	Your account or merchant identifier in the payment provider’s system (e.g. Stripe account ID, PSP merchant code).
Actions	✏️ Edit – Modify configuration (credentials, rules, currencies) 🗑️ Delete – Remove this method (will prompt “Are you sure?”).

##### Searching & Filtering **Search:** Type any part of a method’s Name, Merchant ID, or Project to instantly filter the list. **Toggle Status:** Switch off test or deprecated methods to focus on live options without deleting them. ##### Adding a New Payment Method Click **+ Add**. In the **Add payment method** drawer, complete each section: **General:**

1. **Project** – Choose a Project or leave blank for global availability. 2. **Type** – Select **Auto** (API-driven) or **Manual** (offline). 3. **Integration** – Pick **External** (third-party) or **Internal**. 4. **Show on main page** – Check to list this method prominently.

**Label & Credentials:**

1. **Label** – Choose from your predefined set (e.g. “Credit Card,” “Bank Transfer”), or enter your own custom label. 2. **Name** – The display name clients will see at checkout. 3. **Merchant ID** – Your identifier with that processor.

**Currencies:** A JSON array of supported currency codes (e.g. `["USD","EUR"]`). Click the `{}` tree icon to append each currency node. **Rules:** A JSON object defining conditional logic (e.g. minimum order amount, country restrictions). Use the tree picker to define key/value pairs. **Credentials:** A JSON object for API keys, secrets, or other connection parameters. **Language:** (If available) Translation badges to localize the Label and checkout text. Click **Save**. The new method appears in your list, set to **Inactive** by default. ##### Editing an Existing Method Click the ✏️ **Edit** icon in the Actions column. Update any of the **General**, **Label**, **Credentials**, **Rules**, or **Currencies** fields. Click **Save** to apply changes.

**Note**: You cannot change the Type or Integration after creation to avoid mismatched credentials.

##### Deleting a Payment Method Click the 🗑️ **Delete** icon. Confirm “Are you sure?” to permanently remove it. With Payment Methods properly configured, you can control exactly which options your customers see—tailored by project, region, currency, or any custom business rule—while keeping your checkout flow secure and reliable.