@shoppexio/storefront-react 0.0.0 → 0.1.0

package/eject/account/overview.tsx

@@ -0,0 +1,147 @@
+/**
+ * The account overview: who is signed in, what the shop is holding for them,
+ * and the last few orders.
+ *
+ * One request carries all of it. `dashboard()` is the overview payload and the
+ * collection route for five other panels, so everything on this screen comes out
+ * of a single response — nothing is counted in the browser and nothing is filled
+ * in where the server sent nothing. A buyer never reads a figure this storefront
+ * made up.
+ */
+
+import { Link } from 'react-router-dom';
+import { accountTabHref } from '@shoppexio/storefront-react';
+import { t } from './i18n';
+import { ArrowRightIcon } from './icons';
+import { OrderRow, orderRowTitle } from './orders';
+import { useAccountDashboard } from './dashboard';
+import {
+  AccountCard,
+  AccountEmpty,
+  AccountError,
+  AccountRowsSkeleton,
+  AccountSectionTitle,
+  formatAccountAmount,
+  formatInvoiceAmount,
+} from './shared';
+
+/** As many as the panel can show without becoming the orders page. */
+const RECENT_ORDER_COUNT = 5;
+
+export function AccountOverview() {
+  const { state, reload } = useAccountDashboard();
+
+  if (state.status === 'loading') {
+    return <AccountRowsSkeleton rows={4} label={t('overview.loading')} />;
+  }
+
+  if (state.status === 'error') {
+    return <AccountError message={state.message} onRetry={reload} />;
+  }
+
+  const account = state.data;
+  const recentOrders = account.invoices.slice(0, RECENT_ORDER_COUNT);
+
+  return (
+    <div className="sxa:space-y-6">
+      <AccountCard className="sxa:px-6 sxa:py-6">
+        <p className="sxa:text-small sxa:text-muted">{t('overview.signedInAs')}</p>
+        <p className="sxa:font-heading sxa:mt-1 sxa:truncate sxa:text-h3 sxa:font-semibold">{account.customer.name}</p>
+        <p className="sxa:mt-0.5 sxa:truncate sxa:text-small sxa:text-muted">{account.customer.email}</p>
+      </AccountCard>
+
+      {/* Four counters the server keeps. Each is printed as it arrived — none of
+          them is the length of a list this page happens to be holding. */}
+      <div className="sxa:grid sxa:grid-cols-2 sxa:gap-3 sxa:sm:grid-cols-4">
+        <StatTile label={t('overview.statOrders')} value={account.stats.invoices_count} />
+        <StatTile label={t('overview.statLicenses')} value={account.stats.licenses_count} />
+        <StatTile label={t('overview.statDownloads')} value={account.stats.deliverables_count} />
+        <StatTile label={t('overview.statTickets')} value={account.stats.tickets_count} />
+      </div>
+
+      {/*
+        Store credit is a section, not a tab, and it exists only for shops that
+        run one: `wallet` is null otherwise, and that null IS the gate. Printing
+        a zero balance for a shop with no wallet would advertise a feature the
+        merchant never switched on.
+
+        The balance is read from this payload and never adjusted here.
+      */}
+      {account.wallet && account.wallet.enabled ? (
+        <AccountCard className="sxa:px-6 sxa:py-6">
+          <div className="sxa:flex sxa:flex-wrap sxa:items-baseline sxa:justify-between sxa:gap-3">
+            <div>
+              <p className="sxa:text-small sxa:text-muted">{t('overview.walletLabel')}</p>
+              <p className="sxa:mt-1 sxa:text-h2 sxa:font-bold sxa:tabular-nums">
+                {formatAccountAmount(account.wallet.available, account.wallet.currency)}
+              </p>
+            </div>
+            <p className="sxa:text-small sxa:text-muted">{t('overview.walletNote')}</p>
+          </div>
+        </AccountCard>
+      ) : null}
+
+      <section>
+        <div className="sxa:flex sxa:flex-wrap sxa:items-center sxa:justify-between sxa:gap-4">
+          <AccountSectionTitle>{t('overview.recentOrders')}</AccountSectionTitle>
+          {recentOrders.length ? (
+            <Link
+              to={accountTabHref('orders')}
+              className="sxa:inline-flex sxa:items-center sxa:gap-1.5 sxa:text-small sxa:transition-opacity sxa:hover:opacity-80"
+            >
+              {t('overview.allOrders')}
+              <ArrowRightIcon className="sxa:h-4 sxa:w-4 sxa:shrink-0" />
+            </Link>
+          ) : null}
+        </div>
+
+        <div className="sxa:mt-4">
+          {recentOrders.length === 0 ? (
+            <AccountEmpty
+              title={t('orders.emptyTitle')}
+              body={t('orders.emptyBody')}
+              action={(
+                <Link to="/all-products" className="sx-account-button sxa:card-button sxa:card-button--add">
+                  {t('common.browseStore')}
+                </Link>
+              )}
+            />
+          ) : (
+            <ul className="sxa:space-y-3">
+              {recentOrders.map((order) => (
+                <li key={order.uniqid}>
+                  {/*
+                    The dashboard spells its order rows in snake_case while the
+                    orders list spells the same fields in camelCase. Both are the
+                    producer's own naming, so neither is renamed on the way in —
+                    the mapping happens here, at the row.
+                  */}
+                  <OrderRow
+                    uniqid={order.uniqid}
+                    title={orderRowTitle(
+                      order.line_items[0]?.product_title,
+                      order.line_items.length,
+                      order.uniqid,
+                    )}
+                    createdAt={order.created_at}
+                    amount={formatInvoiceAmount(order.total_display, order.total, order.currency)}
+                    status={order.status}
+                  />
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </section>
+    </div>
+  );
+}
+
+function StatTile({ label, value }: { label: string; value: number }) {
+  return (
+    <div className="sxa:rounded-input sxa:border sxa:bg-bg sxa:px-4 sxa:py-4">
+      <p className="sxa:text-h2 sxa:font-bold sxa:tabular-nums">{value}</p>
+      <p className="sxa:mt-1 sxa:text-micro sxa:text-muted">{label}</p>
+    </div>
+  );
+}

package/eject/account/referrals.tsx

@@ -0,0 +1,327 @@
+/**
+ * What the buyer has earned by sending other buyers to this shop.
+ *
+ * Read-only, and deliberately so. The hosted portal let an affiliate turn a
+ * balance into store credit and request a crypto payout; both move money toward
+ * the buyer, and ADR-0064 keeps money paths off the account API — theme code
+ * runs on the same origin as the session cookie, so an allowlisted payout would
+ * be a transaction primitive standing next to untrusted markup. This panel
+ * shows the standing and says where the payout is arranged. Issuing a link is
+ * the same story: `POST /affiliate/links` is not allowlisted either, so the
+ * links below are the ones the shop issued.
+ */
+
+import {
+  claimTypeKey,
+  isAwaitingApproval,
+  isEnrolledInReferrals,
+  isForeignBalanceCurrency,
+  referralShareUrl,
+} from './account-referrals';
+import { safeExternalHref } from './customer-account';
+import type { SdkCustomerAffiliateLink } from '@shoppexio/storefront-react';
+import { t } from './i18n';
+import { ExternalLinkIcon } from './icons';
+import { useAccountDashboard } from './dashboard';
+import {
+  AccountCard,
+  AccountEmpty,
+  AccountError,
+  AccountRowsSkeleton,
+  AccountSectionTitle,
+  CopyButton,
+  StatusChip,
+  formatAccountAmount,
+  formatAccountDate,
+  statusLabel,
+} from './shared';
+
+export function AccountReferrals() {
+  const { state, reload } = useAccountDashboard();
+
+  if (state.status === 'loading') {
+    return <AccountRowsSkeleton rows={3} label={t('referrals.loading')} />;
+  }
+
+  if (state.status === 'error') {
+    return <AccountError message={state.message} onRetry={reload} />;
+  }
+
+  const summary = state.data.affiliate;
+
+  /*
+   * `not_enrolled` is the shop's answer, not an empty list. The hosted portal
+   * hid the whole tab on it; this template keeps the tab reachable — the link
+   * may already be sitting in a sent email — and says what the state is instead
+   * of showing a balance sheet full of zeroes.
+   */
+  if (!isEnrolledInReferrals(summary)) {
+    return (
+      <AccountEmpty title={t('referrals.notEnrolledTitle')} body={t('referrals.notEnrolledBody')} />
+    );
+  }
+
+  const { balances, balance_currency: currency } = summary;
+
+  return (
+    <div className="sxa:space-y-8">
+      <div>
+        <AccountCard className="sxa:p-6 sxa:md:p-7">
+          <p className="sxa:text-small sxa:text-muted">{t('referrals.availableLabel')}</p>
+          <p className="sxa:mt-1 sxa:text-h1 sxa:font-bold sxa:tabular-nums">
+            {formatAccountAmount(balances.available, currency)}
+          </p>
+          <p className="sxa:mt-3 sxa:text-small sxa:text-muted">{t('referrals.payoutsElsewhere')}</p>
+        </AccountCard>
+
+        {/*
+          Four separate figures, exactly as the server sends them. Folding
+          "converted" and "paid" into one friendlier "withdrawn" total would put
+          a number on screen that no other Shoppex surface reports.
+        */}
+        <div className="sxa:mt-4 sxa:grid sxa:grid-cols-2 sxa:gap-4 sxa:sm:grid-cols-4">
+          <BalanceTile
+            label={t('referrals.pendingLabel')}
+            amount={balances.pending}
+            currency={currency}
+          />
+          <BalanceTile
+            label={t('referrals.requestedLabel')}
+            amount={balances.requested}
+            currency={currency}
+          />
+          <BalanceTile
+            label={t('referrals.convertedLabel')}
+            amount={balances.converted}
+            currency={currency}
+          />
+          <BalanceTile
+            label={t('referrals.paidLabel')}
+            amount={balances.paid}
+            currency={currency}
+          />
+        </div>
+
+        {isForeignBalanceCurrency(summary, state.data.shop.currency) ? (
+          <p className="sxa:mt-3 sxa:text-small sxa:text-muted">
+            {t('referrals.differentCurrency', { currency })}
+          </p>
+        ) : null}
+      </div>
+
+      <section>
+        <AccountSectionTitle>{t('referrals.linksTitle')}</AccountSectionTitle>
+        <p className="sxa:mt-1 sxa:text-small sxa:text-muted">
+          {summary.affiliate_codes_accepted_at_checkout
+            ? t('referrals.codesAccepted')
+            : t('referrals.codesNotAccepted')}
+        </p>
+        <div className="sxa:mt-4">
+          {summary.links.length === 0 ? (
+            <AccountEmpty
+              title={t('referrals.linksEmptyTitle')}
+              body={t('referrals.linksEmptyBody')}
+            />
+          ) : (
+            <ul className="sxa:space-y-4">
+              {summary.links.map((link) => (
+                <li key={link.id}>
+                  <ReferralLinkCard link={link} currency={currency} />
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </section>
+
+      <section>
+        <AccountSectionTitle>{t('referrals.commissionsTitle')}</AccountSectionTitle>
+        <div className="sxa:mt-4">
+          {summary.commissions.length === 0 ? (
+            <AccountEmpty
+              title={t('referrals.commissionsEmptyTitle')}
+              body={t('referrals.commissionsEmptyBody')}
+            />
+          ) : (
+            <ul className="sxa:space-y-4">
+              {summary.commissions.map((commission) => (
+                <li
+                  key={commission.id}
+                  className="sxa:flex sxa:items-center sxa:gap-4 sxa:rounded-input sxa:border sxa:bg-surface sxa:p-5 sxa:shadow-card"
+                >
+                  <div className="sxa:min-w-0 sxa:flex-1">
+                    <p className="sxa:truncate sxa:text-small sxa:font-semibold">
+                      {t('referrals.commissionFor', { id: commission.invoice_id })}
+                    </p>
+                    {/* `created_at` is nullable on this row. No date is printed
+                        when the producer sent none. */}
+                    {commission.created_at ? (
+                      <p className="sxa:mt-1 sxa:text-micro sxa:text-muted">
+                        {formatAccountDate(commission.created_at)}
+                      </p>
+                    ) : null}
+                  </div>
+                  <span className="sxa:shrink-0 sxa:text-small sxa:font-semibold sxa:tabular-nums">
+                    {formatAccountAmount(commission.commission_amount, currency)}
+                  </span>
+                  <StatusChip status={commission.status} />
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </section>
+
+      <section>
+        <AccountSectionTitle>{t('referrals.balanceTitle')}</AccountSectionTitle>
+        <div className="sxa:mt-4">
+          {summary.claims.length === 0 ? (
+            <AccountEmpty
+              title={t('referrals.balanceEmptyTitle')}
+              body={t('referrals.balanceEmptyBody')}
+            />
+          ) : (
+            <ul className="sxa:space-y-4">
+              {summary.claims.map((claim) => {
+                const typeKey = claimTypeKey(claim.type);
+                return (
+                  <li
+                    key={claim.id}
+                    className="sxa:flex sxa:items-center sxa:gap-4 sxa:rounded-input sxa:border sxa:bg-surface sxa:p-5 sxa:shadow-card"
+                  >
+                    <div className="sxa:min-w-0 sxa:flex-1">
+                      {/* An unlisted claim type keeps the producer's own word
+                          rather than being renamed into one we recognise. */}
+                      <p className="sxa:truncate sxa:text-small sxa:font-semibold">
+                        {typeKey ? t(typeKey) : statusLabel(claim.type)}
+                      </p>
+                      {claim.created_at ? (
+                        <p className="sxa:mt-1 sxa:text-micro sxa:text-muted">
+                          {formatAccountDate(claim.created_at)}
+                        </p>
+                      ) : null}
+                    </div>
+                    <span className="sxa:shrink-0 sxa:text-small sxa:font-semibold sxa:tabular-nums">
+                      {/* The claim carries its own currency; the balance
+                          currency above is not necessarily the same one. */}
+                      {formatAccountAmount(claim.amount, claim.currency)}
+                    </span>
+                    <StatusChip status={claim.status} />
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+        </div>
+      </section>
+    </div>
+  );
+}
+
+function BalanceTile({
+  label,
+  amount,
+  currency,
+}: {
+  label: string;
+  amount: string;
+  currency: string;
+}) {
+  return (
+    <AccountCard className="sxa:p-5">
+      <p className="sxa:text-h3 sxa:font-semibold sxa:tabular-nums">{formatAccountAmount(amount, currency)}</p>
+      <p className="sxa:mt-1 sxa:text-micro sxa:text-muted">{label}</p>
+    </AccountCard>
+  );
+}
+
+function ReferralLinkCard({
+  link,
+  currency,
+}: {
+  link: SdkCustomerAffiliateLink;
+  currency: string;
+}) {
+  /*
+   * The shareable URL is the SERVER's — it knows the shop's own storefront
+   * host. Assembling one from whatever origin this bundle happens to be loaded
+   * from would hand out a link that works from a preview domain and nowhere
+   * else. It is also nullable: a shop with no storefront URL to build one from
+   * gets `null`, and then there is no link row to draw — but the code beside it
+   * is still the buyer's, so that is what the row carries.
+   *
+   * `safeExternalHref` runs before anything is rendered as an anchor. The URL
+   * ultimately comes from merchant-controlled data, and `javascript:` is a URL:
+   * an anchor carrying one executes on the buyer's own origin, with their
+   * session. A scheme that does not survive the check is dropped rather than
+   * shown, so nothing invites the buyer to copy it either.
+   */
+  const shareUrl = safeExternalHref(referralShareUrl(link));
+  const shareValue = shareUrl ?? link.code;
+
+  return (
+    <AccountCard className="sxa:p-5">
+      <div className="sxa:flex sxa:flex-wrap sxa:items-start sxa:justify-between sxa:gap-3">
+        <div className="sxa:min-w-0">
+          <p className="sxa:truncate sxa:text-small sxa:font-semibold">{link.label ?? link.code}</p>
+          <p className="sxa:mt-1 sxa:text-micro sxa:text-muted">
+            {t('referrals.commission', { percent: link.effective_commission_percent })}
+            {' · '}
+            {t('referrals.buyerDiscount', { percent: link.effective_customer_discount_percent })}
+          </p>
+        </div>
+        <div className="sxa:flex sxa:shrink-0 sxa:items-center sxa:gap-2">
+          {link.is_primary ? (
+            <span className="sx-account-chip sxa:meta-chip sxa:meta-chip--neutral sxa:shrink-0">{t('referrals.primary')}</span>
+          ) : null}
+          <StatusChip status={link.status} />
+        </div>
+      </div>
+
+      {isAwaitingApproval(link) ? (
+        <p className="sxa:mt-3 sxa:text-small sxa:text-muted">{t('referrals.awaitingApproval')}</p>
+      ) : null}
+
+      <div className="sxa:mt-3 sxa:flex sxa:flex-wrap sxa:items-center sxa:gap-2">
+        <code className="sxa:min-w-0 sxa:flex-1 sxa:truncate sxa:rounded-input sxa:border sxa:bg-bg sxa:px-3 sxa:py-2 sxa:font-mono sxa:text-micro">
+          {shareValue}
+        </code>
+        <div className="sxa:flex sxa:shrink-0 sxa:items-center sxa:gap-2">
+          {shareUrl ? (
+            <a
+              href={shareUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="sx-account-button sxa:card-button sxa:card-button--add"
+            >
+              <ExternalLinkIcon className="sxa:h-3.5 sxa:w-3.5" />
+              {/* `downloads.openLink` is the catalog's one label for "this
+                  anchor leaves the storefront", and it is written generically
+                  enough to be it here too. */}
+              <span className="sxa:ml-1.5">{t('downloads.openLink')}</span>
+            </a>
+          ) : null}
+          <CopyButton value={shareValue} />
+        </div>
+      </div>
+
+      <dl className="sxa:mt-4 sxa:grid sxa:grid-cols-3 sxa:gap-4 sxa:border-t sxa:pt-4">
+        <StatCell label={t('referrals.clicks')} value={String(link.total_clicks)} />
+        <StatCell label={t('referrals.sales')} value={String(link.total_sales)} />
+        <StatCell
+          label={t('referrals.revenue')}
+          value={formatAccountAmount(link.total_revenue, currency)}
+        />
+      </dl>
+    </AccountCard>
+  );
+}
+
+function StatCell({ label, value }: { label: string; value: string }) {
+  return (
+    <div>
+      <dt className="sxa:text-micro sxa:text-muted">{label}</dt>
+      <dd className="sxa:mt-1 sxa:text-small sxa:font-semibold sxa:tabular-nums">{value}</dd>
+    </div>
+  );
+}