@shoppexio/storefront-react 0.3.0 → 0.4.0

package/eject/account/orders.tsx

@@ -445,6 +445,9 @@ export function AccountOrderDetail({ orderId }: { orderId: string }) {
         order AFTER it was paid for.
       */}
       <OrderWarranties orderUniqid={order.uniqid} />
+
+      {/* Keyed: a review posted on one order must not follow the buyer to the next. */}
+      <OrderReview key={order.uniqid} orderUniqid={order.uniqid} />
     </div>
   );
 }
@@ -686,6 +689,91 @@ function WarrantyRow({
   );
 }
 
+/** The three scores the server keeps, as the buyer reads them. */
+const REVIEW_SCORE_KEYS: Readonly<Record<number, string>> = {
+  5: 'orders.reviewPositive',
+  3: 'orders.reviewNeutral',
+  1: 'orders.reviewNegative',
+};
+
+/**
+ * The buyer's review of this order.
+ *
+ * The server decides whether the order can be reviewed (`can_review`: paid,
+ * reviews on, inside the edit window) and names the hosted review page for it
+ * (`review_url`, null otherwise); this only reads that state and never guesses
+ * it. The review is written on that page, never posted from here: this page
+ * runs beside merchant theme code that holds the buyer's session, and a review
+ * it could post would not be the buyer's own (#1152). Nothing is drawn while
+ * the read is in flight, or when there is neither a review page to open nor a
+ * review of the buyer's own to show. A failed read is shown with a retry,
+ * because it cannot be told apart from an order waiting for its review.
+ */
+export function OrderReview({ orderUniqid }: { orderUniqid: string }) {
+  const { state, reload } = useAccountResource(`review:${orderUniqid}`, () =>
+    callCustomerApi((sdk) => sdk.orderReview(orderUniqid)));
+
+  if (state.status === 'loading') return null;
+
+  if (state.status === 'error') {
+    return (
+      <ReviewSection>
+        <AccountError message={state.message} onRetry={reload} />
+      </ReviewSection>
+    );
+  }
+
+  const review = state.data;
+  const ownReview = review.already_submitted && !review.is_automated;
+  // Absent on a backend that predates the link; a URL that fails the scheme check gets no anchor.
+  const href = safeExternalHref(review.review_url);
+  if (href === null && !ownReview) return null;
+
+  return (
+    <ReviewSection
+      description={review.product_title
+        ? t('orders.reviewPrompt', { product: review.product_title })
+        : t('orders.reviewPromptGeneric')}
+    >
+      <AccountCard className="sxa:flex sxa:flex-col sxa:items-start sxa:gap-3 sxa:px-5 sxa:py-4">
+        {ownReview ? (
+          <div>
+            <p className="sxa:text-small sxa:font-semibold">
+              {t((review.score === null ? undefined : REVIEW_SCORE_KEYS[review.score]) ?? 'orders.reviewFallbackLabel')}
+              {review.submitted_at ? (
+                <span className="sxa:font-normal sxa:text-muted"> · {formatAccountDate(review.submitted_at)}</span>
+              ) : null}
+            </p>
+            {review.message ? (
+              <p className="sxa:mt-1.5 sxa:text-small sxa:whitespace-pre-line sxa:text-muted">{review.message}</p>
+            ) : null}
+          </div>
+        ) : review.is_automated ? (
+          <p className="sxa:text-small sxa:text-muted">{t('orders.reviewAutomated')}</p>
+        ) : null}
+        {href === null ? null : (
+          <a
+            href={href}
+            className="sx-account-cta sxa:cta-button sxa:inline-flex sxa:h-9 sxa:shrink-0 sxa:items-center sxa:px-4 sxa:text-small sxa:font-semibold"
+          >
+            {t(ownReview ? 'orders.reviewEdit' : 'orders.reviewWrite')}
+          </a>
+        )}
+      </AccountCard>
+    </ReviewSection>
+  );
+}
+
+function ReviewSection({ description, children }: { description?: string; children: ReactNode }) {
+  return (
+    <section className="sxa:mt-8">
+      <AccountSectionTitle>{t('orders.reviewTitle')}</AccountSectionTitle>
+      {description ? <p className="sxa:mt-1.5 sxa:text-small sxa:text-muted">{description}</p> : null}
+      <div className="sxa:mt-4">{children}</div>
+    </section>
+  );
+}
+
 /** Cover as a sentence. Cancelled cover names no date, because it has none. */
 function coverageLabel(coverage: WarrantyCoverage): string {
   switch (coverage.kind) {

package/eject/account/overview.tsx

@@ -21,6 +21,7 @@ import {
   AccountError,
   AccountRowsSkeleton,
   AccountSectionTitle,
+  HostedPageLink,
   formatAccountAmount,
   formatInvoiceAmount,
 } from './shared';
@@ -78,6 +79,11 @@ export function AccountOverview() {
             </div>
             <p className="sxa:text-small sxa:text-muted">{t('overview.walletNote')}</p>
           </div>
+          {/* Adding funds is a payment, so it happens on the hosted top-up page,
+              and only when the shop takes top-ups (decision T4). */}
+          {account.wallet.topups_allowed ? (
+            <HostedPageLink page="topup" hints={{}} label={t('overview.topUp')} className="sxa:mt-4 sxa:border-t sxa:pt-4" />
+          ) : null}
         </AccountCard>
       ) : null}
 

package/eject/account/referrals.tsx

@@ -24,13 +24,15 @@ import {
   isEnrolledInReferrals,
   isForeignBalanceCurrency,
   isShareableLink,
+  linkCommissionDiffers,
   offersReferralLinks,
   referralLinkInput,
+  referralRateRows,
   referralShareUrl,
 } from './account-referrals';
 import { callCustomerApi, safeExternalHref } from './customer-account';
-import type { SdkCustomerAffiliateLink, SdkCustomerAffiliateSummary } from '@shoppexio/storefront-react';
-import { t } from './i18n';
+import type { SdkCustomerAffiliateLink, SdkCustomerAffiliateRates, SdkCustomerAffiliateSummary } from '@shoppexio/storefront-react';
+import { getActiveLocale, t } from './i18n';
 import { ExternalLinkIcon } from './icons';
 import { useAccountDashboard } from './dashboard';
 import {
@@ -136,6 +138,8 @@ export function AccountReferrals() {
         </div>
       ) : null}
 
+      {summary.rates ? <YourRates rates={summary.rates} /> : null}
+
       <section>
         <div className="sxa:flex sxa:flex-wrap sxa:items-center sxa:justify-between sxa:gap-3">
           <AccountSectionTitle>{t('referrals.linksTitle')}</AccountSectionTitle>
@@ -192,7 +196,7 @@ export function AccountReferrals() {
             <ul className="sxa:space-y-4">
               {summary.links.map((link) => (
                 <li key={link.id}>
-                  <ReferralLinkCard link={link} currency={currency} />
+                  <ReferralLinkCard link={link} currency={currency} rates={summary.rates} />
                 </li>
               ))}
             </ul>
@@ -460,12 +464,45 @@ function BalanceTile({
   );
 }
 
+/** "Your rates": what a referral earns, in the rows the Easy-lane account block shows. */
+function YourRates({ rates }: { rates: SdkCustomerAffiliateRates }) {
+  const id = useId();
+  const locale = getActiveLocale();
+  const rows = referralRateRows(rates, {
+    // The cap and the minimum are kept in US dollars, like the affiliate ledger.
+    money: (usd) => formatAccountAmount(usd, 'USD'),
+    list: (names) => new Intl.ListFormat(locale, { type: 'conjunction' }).format(names),
+    more: (count) => t('referrals.ratesMoreProducts', { count: String(count) }),
+  });
+  return (
+    <section aria-labelledby={id}>
+      <h2 id={id} className="sx-account-section-title sxa:font-heading sxa:text-body sxa:font-semibold">
+        {t('referrals.yourRates')}
+      </h2>
+      <AccountCard className="sxa:mt-4 sxa:p-5">
+        <ul className="sxa:space-y-3">
+          {rows.map((row) => (
+            <li key={row.id}>
+              <p className="sxa:text-small sxa:font-semibold">{t(row.title.key, row.title.params)}</p>
+              {row.detail ? (
+                <p className="sxa:mt-0.5 sxa:text-micro sxa:text-muted">{t(row.detail.key, row.detail.params)}</p>
+              ) : null}
+            </li>
+          ))}
+        </ul>
+      </AccountCard>
+    </section>
+  );
+}
+
 function ReferralLinkCard({
   link,
   currency,
+  rates,
 }: {
   link: SdkCustomerAffiliateLink;
   currency: string;
+  rates: SdkCustomerAffiliateRates | null;
 }) {
   /*
    * The shareable URL is the SERVER's — it knows the shop's own storefront
@@ -490,8 +527,13 @@ function ReferralLinkCard({
         <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 })}
-            {' · '}
+            {/* "Your rates" names the rate; a link says it only when it earns another one. */}
+            {linkCommissionDiffers(link, rates) ? (
+              <>
+                {t('referrals.commission', { percent: link.effective_commission_percent })}
+                {' · '}
+              </>
+            ) : null}
             {t('referrals.buyerDiscount', { percent: link.effective_customer_discount_percent })}
           </p>
         </div>