fix link language interpolation

immutable · Mar 11, 2024 · ed790e3 · ed790e3
1 parent 29e51f6
commit ed790e3
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 11 deletions.
diff --git a/packages/checkout/widgets-lib/src/locales/en.json b/packages/checkout/widgets-lib/src/locales/en.json
@@ -285,8 +285,8 @@
         }
       },
       "insufficientCoinsBanner": {
-        "caption": "Insufficient coin balance. Pay with card to proceed, or <link>add coins</link> and try again.",
-        "gasCaption": "Insufficient IMX for gas fees. Pay with card to proceed, or <link>add coins</link> and try again."
+        "caption": "Insufficient coin balance. Pay with card to proceed, or <cta>add coins</cta> and try again.",
+        "gasCaption": "Insufficient IMX for gas fees. Pay with card to proceed, or <cta>add coins</cta> and try again."
       },
       "loading": {
         "ready1": "Collecting your order",

diff --git a/packages/checkout/widgets-lib/src/locales/ja.json b/packages/checkout/widgets-lib/src/locales/ja.json
@@ -288,8 +288,8 @@
         }
       },
       "insufficientCoinsBanner": {
-        "caption": "コインの残高が不足しています。カードで支払うか、<link>コインを追加</link>して再試行してください。",
-        "gasCaption": "ガス料金に足りない IMX コイン。カードで支払うか、<link>コインを追加</link>して再試行してください。",
+        "caption": "コインの残高が不足しています。カードで支払うか、<cta>コインを追加</cta>して再試行してください。",
+        "gasCaption": "ガス料金に足りない IMX コイン。カードで支払うか、<cta>コインを追加</cta>して再試行してください。"
       },
       "loading": {
         "ready1": "注文を受け取り中",

diff --git a/packages/checkout/widgets-lib/src/locales/ko.json b/packages/checkout/widgets-lib/src/locales/ko.json
@@ -285,8 +285,8 @@
         }
       },
       "insufficientCoinsBanner": {
-        "caption": "코인 잔액이 부족합니다. 카드로 결제하거나 <link>코인 추가</link>하고 다시 시도해 보세요.",
-        "gasCaption": "가스를 위한 IMX가 부족합니다. 카드로 결제하거나 <link>코인 추가</link>하고 다시 시도해 보세요."
+        "caption": "코인 잔액이 부족합니다. 카드로 결제하거나 <cta>코인 추가</cta>하고 다시 시도해 보세요.",
+        "gasCaption": "가스를 위한 IMX가 부족합니다. 카드로 결제하거나 <cta>코인 추가</cta>하고 다시 시도해 보세요."
       },
       "loading": {
         "ready1": "주문 수집 중",

diff --git a/packages/checkout/widgets-lib/src/locales/zh.json b/packages/checkout/widgets-lib/src/locales/zh.json
@@ -285,8 +285,8 @@
         }
       },
       "insufficientCoinsBanner": {
-        "caption": "硬币余额不足。请使用卡支付，或 <link>添加硬币</link> 再试一次。",
-        "gasCaption": "IMX 币不足以支付汽油费。请使用卡支付，或 <link>添加硬币</link> 再试一次。"
+        "caption": "硬币余额不足。请使用卡支付，或 <cta>添加硬币</cta> 再试一次。",
+        "gasCaption": "IMX 币不足以支付汽油费。请使用卡支付，或 <cta>添加硬币</cta> 再试一次。"
       },
       "loading": {
         "ready1": "正在收集您的订单",

diff --git a/packages/checkout/widgets-lib/src/widgets/sale/components/InsufficientCoinsBanner.tsx b/packages/checkout/widgets-lib/src/widgets/sale/components/InsufficientCoinsBanner.tsx
@@ -54,7 +54,7 @@ export function InsufficientCoinsBanner() {
           <Trans
             i18nKey={labelKey}
             components={{
-              link: (<Link sx={{ mx: 'base.spacing.x1' }} onClick={() => onClick()} />),
+              cta: <Link sx={{ mx: 'base.spacing.x1' }} onClick={() => onClick()} />,
             }}
           />
         </Banner.Caption>

diff --git a/packages/checkout/widgets-sample-app/src/components/ui/sale/sale.tsx b/packages/checkout/widgets-sample-app/src/components/ui/sale/sale.tsx
@@ -197,8 +197,14 @@ export function SaleUI() {
     <button onClick={() => saleWidget.unmount()}>Unmount</button>
     <button onClick={() => saleWidget.update({config: {theme: WidgetTheme.LIGHT}})}>Update Config Light</button>
     <button onClick={() => saleWidget.update({config: {theme: WidgetTheme.DARK}})}>Update Config Dark</button>
-    <button onClick={() => saleWidget?.update({ config: { language: 'en'}})}>EN</button>
-    <button onClick={() => saleWidget?.update({ config: { language: 'ja'}})}>JA</button>
+    <select
+      onChange={(e) => saleWidget.update({ config: { language: e.target.value}})}
+    >
+      <option value="en">EN</option>
+      <option value="ja">JA</option>
+      <option value="ko">KO</option>
+      <option value="zh">ZH</option>
+    </select>
       <br />
       <br />
       <br />