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.

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.