@shoppexio/storefront-react 0.5.0 → 0.6.1

package/eject/account/messages/uk.json

@@ -263,6 +263,21 @@
     "billingOther": "Оплата кожні {count} × {interval}",
     "gateway": "Платіжний провайдер",
     "paymentMethod": "Спосіб оплати",
+    "discount": "Знижка",
+    "discountPercent": "{percent}%",
+    "discountCap": ", не більше {amount} за платіж",
+    "discountEvery": "{code} · знижка {off} на кожен платіж{cap}",
+    "discountLeft": "{code} · знижка {off}{cap} · залишилося платежів: {count}, потім {price} {period}",
+    "discountLeftOne": "{code} · знижка {off}{cap} · залишився 1 платіж, потім {price} {period}",
+    "periodDayOne": "на день",
+    "periodDayOther": "раз на {count} дн.",
+    "periodWeekOne": "на тиждень",
+    "periodWeekOther": "раз на {count} тиж.",
+    "periodMonthOne": "на місяць",
+    "periodMonthOther": "раз на {count} міс.",
+    "periodYearOne": "на рік",
+    "periodYearOther": "раз на {count} р.",
+    "periodOther": "раз на {count} {interval}",
     "cardOnFile": "{brand}, що закінчується на {last4}",
     "noPaymentMethod": "Не збережено",
     "pause": "Призупинити",
@@ -350,7 +365,8 @@
     "historyFirstOrder": "Перше замовлення",
     "historyRenewal": "Продовження",
     "historyPlanChange": "Зміна тарифу: {from} на {to}",
-    "historyDays": "за {days} з {total} дн."
+    "historyDays": "за {days} з {total} дн.",
+    "historyCouponPayment": "{code} · {payment} з {total}"
   },
   "favorites": {
     "loading": "Завантажуємо ваше обране",

package/eject/account/messages/zh.json

@@ -263,6 +263,21 @@
     "billingOther": "每 {count} × {interval} 计费",
     "gateway": "支付服务商",
     "paymentMethod": "支付方式",
+    "discount": "折扣",
+    "discountPercent": "{percent}%",
+    "discountCap": "，每次最多 {amount}",
+    "discountEvery": "{code} · 每次付款优惠 {off}{cap}",
+    "discountLeft": "{code} · 优惠 {off}{cap} · 还剩 {count} 次付款，之后 {period} {price}",
+    "discountLeftOne": "{code} · 优惠 {off}{cap} · 还剩 1 次付款，之后 {period} {price}",
+    "periodDayOne": "每天",
+    "periodDayOther": "每 {count} 天",
+    "periodWeekOne": "每周",
+    "periodWeekOther": "每 {count} 周",
+    "periodMonthOne": "每月",
+    "periodMonthOther": "每 {count} 个月",
+    "periodYearOne": "每年",
+    "periodYearOther": "每 {count} 年",
+    "periodOther": "每 {count} {interval}",
     "cardOnFile": "{brand} 尾号 {last4}",
     "noPaymentMethod": "未保存支付方式",
     "pause": "暂停",
@@ -350,7 +365,8 @@
     "historyFirstOrder": "首次订单",
     "historyRenewal": "续订",
     "historyPlanChange": "套餐变更：{from} 改为 {to}",
-    "historyDays": "{total} 天中的 {days} 天"
+    "historyDays": "{total} 天中的 {days} 天",
+    "historyCouponPayment": "{code} · 第 {payment}/{total} 次"
   },
   "favorites": {
     "loading": "正在加载你的收藏",

package/eject/account/subscriptions.tsx

@@ -47,6 +47,7 @@ import {
   subscriptionTiming,
   subscriptionTimingKey,
 } from './account-subscriptions';
+import { gatewayLabel } from './account-payment-method';
 import { callCustomerApi, safeExternalHref } from './customer-account';
 import { hostedPageHref } from './hosted-page';
 import type {
@@ -148,7 +149,7 @@ export function AccountSubscriptions() {
                 dash in its place would read as "free". */}
             {subscription.plan ? (
               <span className="sxa:shrink-0 sxa:text-small sxa:font-semibold sxa:tabular-nums">
-                {formatAccountAmount(subscription.plan.price, subscription.plan.currency)}
+                {nextPaymentAmount(subscription)}
               </span>
             ) : null}
             <SubscriptionStatus subscription={subscription} />
@@ -215,6 +216,7 @@ function SubscriptionDetail({
   };
 
   const billing = subscription.plan ? billingMessage(subscription.plan) : null;
+  const discount = discountLine(subscription);
 
   return (
     <div>
@@ -246,7 +248,7 @@ function SubscriptionDetail({
         {subscription.plan ? (
           <>
             <p className="sxa:text-h2 sxa:font-bold sxa:tabular-nums">
-              {formatAccountAmount(subscription.plan.price, subscription.plan.currency)}
+              {nextPaymentAmount(subscription)}
             </p>
             {billing ? (
               <p className="sxa:mt-1 sxa:text-small sxa:text-muted">{t(billing.key, billing.params)}</p>
@@ -257,7 +259,7 @@ function SubscriptionDetail({
         <p className="sxa:mt-2 sxa:text-small sxa:text-muted">{timingLabel(subscription)}</p>
 
         <dl className="sxa:mt-5 sxa:space-y-2.5 sxa:border-t sxa:pt-4 sxa:text-small">
-          <DetailRow label={t('subscriptions.gateway')}>{subscription.gateway}</DetailRow>
+          <DetailRow label={t('subscriptions.gateway')}>{gatewayLabel(subscription.gateway)}</DetailRow>
           <DetailRow label={t('subscriptions.paymentMethod')}>
             {/* Brand AND last four, or the producer's own word for the method.
                 Half a card ("Visa ending —") is not a payment method. */}
@@ -268,6 +270,13 @@ function SubscriptionDetail({
               })
               : subscription.payment_method?.type ?? t('subscriptions.noPaymentMethod')}
           </DetailRow>
+          {discount ? (
+            // Wraps instead of truncating: the line ends with the price after the term.
+            <div className="sxa:flex sxa:items-start sxa:justify-between sxa:gap-4">
+              <dt className="sxa:shrink-0 sxa:text-muted">{t('subscriptions.discount')}</dt>
+              <dd className="sxa:min-w-0 sxa:text-right sxa:font-medium">{discount}</dd>
+            </div>
+          ) : null}
         </dl>
       </AccountCard>
 
@@ -672,6 +681,41 @@ function renewalCopy(subscription: SdkCustomerSubscription, state: OpenRenewalSt
   return { note, payLabel: t('subscriptions.payAmount', { amount }) };
 }
 
+/**
+ * The plan's coupon term as the buyer reads it (Design Batch 4, feature 1), the portal's line:
+ * "LAUNCH20 · 20 % off · 2 more payments, then $9.99 a month", or "TENOFF · 10 % off every
+ * payment", with ", up to $3.00 each" when the coupon's cap bounds each payment. Every amount is
+ * the producer's `discount`. Null without a running term.
+ */
+export function discountLine(subscription: SdkCustomerSubscription): string | null {
+  const { discount, plan } = subscription;
+  // The producer reads a term only for the plan it serves.
+  if (!discount || !plan) return null;
+  const off = discount.discount_type === 'PERCENTAGE'
+    ? t('subscriptions.discountPercent', { percent: Number(discount.discount_value) })
+    : formatAccountAmount(discount.discount_amount, discount.currency);
+  const cap = discount.max_discount === null
+    ? ''
+    : t('subscriptions.discountCap', { amount: formatAccountAmount(discount.max_discount, discount.currency) });
+  if (discount.payments_total === null) return t('subscriptions.discountEvery', { code: discount.code, off, cap });
+  const left = discount.payments_total - discount.payments_used;
+  const period = billingMessage(plan, 'period');
+  return t(left === 1 ? 'subscriptions.discountLeftOne' : 'subscriptions.discountLeft', {
+    code: discount.code,
+    off,
+    cap,
+    count: left,
+    price: formatAccountAmount(discount.full_amount, discount.currency),
+    period: t(period.key, period.params),
+  });
+}
+
+/** What the next payment bills: the term's `next_amount` while it runs, else the plan price. */
+export function nextPaymentAmount(subscription: SdkCustomerSubscription): string | null {
+  if (subscription.discount) return formatAccountAmount(subscription.discount.next_amount, subscription.discount.currency);
+  return subscription.plan ? formatAccountAmount(subscription.plan.price, subscription.plan.currency) : null;
+}
+
 function DetailRow({ label, children }: { label: string; children: ReactNode }) {
   return (
     <div className="sxa:flex sxa:items-center sxa:justify-between sxa:gap-4">
@@ -732,6 +776,7 @@ export function BillingHistoryList({ payload, reload }: { payload: unknown; relo
       {history.invoices.map((invoice) => {
         const title = billingEntryTitle(invoice);
         const days = billingEntryDays(invoice);
+        const coupon = invoice.coupon_payment;
         return (
           <li key={invoice.uniqid}>
             <Link
@@ -744,6 +789,14 @@ export function BillingHistoryList({ payload, reload }: { payload: unknown; relo
                   {formatAccountDate(invoice.created_at)}
                   {days ? ` · ${t(days.key, days.params)}` : null}
                 </p>
+                {/* A discounted payment names its code and which term payment it was, as the dashboard does: "LAUNCH20 · 2 of 3", the code alone when every payment is discounted. Its own line, so it does not wrap after the date at 375 px. */}
+                {coupon ? (
+                  <p className="sxa:mt-0.5 sxa:text-micro sxa:tabular-nums sxa:text-muted">
+                    {coupon.payments_total === null
+                      ? coupon.code
+                      : t('subscriptions.historyCouponPayment', { code: coupon.code, payment: coupon.payment, total: coupon.payments_total })}
+                  </p>
+                ) : null}
               </div>
               <div className="sxa:flex sxa:shrink-0 sxa:flex-col sxa:items-end sxa:gap-1.5 sxa:sm:flex-row sxa:sm:items-center sxa:sm:gap-3">
                 <span className="sxa:text-small sxa:font-semibold sxa:tabular-nums">{formatAccountAmount(invoice.total, invoice.currency)}</span>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoppexio/storefront-react",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "description": "React hooks, models and a customer account for Shoppex code storefronts",
   "type": "module",
   "homepage": "https://docs.shoppex.io/storefront/code-storefront-development",