feat: Sales Widget i18n support (#1311)

packages/checkout/widgets-lib/src/locales/en.json

@@ -258,12 +258,12 @@
         "heading": "How would you like to pay?"
       },
       "options": {
-        "CRYPTO": {
+        "crypto": {
           "heading": "Coins",
           "caption": "Using the coins balance in your wallet",
           "disabledCaption": "We can't see enough coins in your balance"
         },
-        "FIAT": {
+        "fiat": {
           "heading": "Card",
           "caption": "GooglePay also available with Transak",
           "disabledCaption": null
@@ -332,7 +332,7 @@
           "primaryAction": "Try again",
           "secondaryAction": "Cancel"
         },
-        "DEFAULT": {
+        "DEFAULT_ERROR": {
           "description": "Sorry, something went wrong. Please try again.",
           "primaryAction": "Try again",
           "secondaryAction": "Dismiss"

packages/checkout/widgets-lib/src/locales/ja.json

@@ -261,12 +261,12 @@
         "heading": "どのようにして支払いますか？"
       },
       "options": {
-        "CRYPTO": {
+        "crypto": {
           "heading": "コイン",
           "caption": "ウォレットのコイン残高を使用して",
           "disabledCaption": "残高に十分なコインが見当たりません"
         },
-        "FIAT": {
+        "fiat": {
           "heading": "カード",
           "caption": "GooglePayもTransakで利用可能",
           "disabledCaption": ""
@@ -335,7 +335,7 @@
           "primaryAction": "もう一度試す",
           "secondaryAction": "キャンセル"
         },
-        "DEFAULT": {
+        "DEFAULT_ERROR": {
           "description": "申し訳ありませんが、何かがうまくいかなかったようです。もう一度お試しください。",
           "primaryAction": "もう一度試す",
           "secondaryAction": "閉じる"

packages/checkout/widgets-lib/src/locales/ko.json

@@ -258,12 +258,12 @@
         "heading": "어떤 방법으로 결제하시겠습니까?"
       },
       "options": {
-        "CRYPTO": {
+        "crypto": {
           "heading": "코인",
           "caption": "지갑에 있는 코인 잔액을 이용하여",
           "disabledCaption": "지갑의 충분한 코인을 볼 수 없습니다"
         },
-        "FIAT": {
+        "fiat": {
           "heading": "카드",
           "caption": "Transak에서 GooglePay도 이용 가능합니다",
           "disabledCaption": ""
@@ -332,7 +332,7 @@
           "primaryAction": "다시 시도",
           "secondaryAction": "취소"
         },
-        "DEFAULT": {
+        "DEFAULT_ERROR": {
           "description": "죄송합니다, 문제가 발생했습니다. 다시 시도하세요.",
           "primaryAction": "다시 시도",
           "secondaryAction": "닫기"

packages/checkout/widgets-lib/src/locales/zh.json

@@ -258,12 +258,12 @@
         "heading": "您希望如何支付？"
       },
       "options": {
-        "CRYPTO": {
+        "crypto": {
           "heading": "硬币",
           "caption": "使用您钱包中的硬币余额",
           "disabledCaption": "我们看不到您余额中有足够多的硬币"
         },
-        "FIAT": {
+        "fiat": {
           "heading": "卡",
           "caption": "Transak也支持使用GooglePay",
           "disabledCaption": null
@@ -332,7 +332,7 @@
           "primaryAction": "再试一次",
           "secondaryAction": "取消"
         },
-        "DEFAULT": {
+        "DEFAULT_ERROR": {
           "description": "抱歉，出了点问题。请再试一次。",
           "primaryAction": "再试一次",
           "secondaryAction": "关闭"

packages/checkout/widgets-lib/src/widgets/sale/SaleWidget.tsx

@@ -4,6 +4,7 @@ import {
 
 import { SaleItem } from '@imtbl/checkout-sdk';
 import { Environment } from '@imtbl/config';
+import { useTranslation } from 'react-i18next';
 import { ConnectLoaderContext } from '../../context/connect-loader-context/ConnectLoaderContext';
 import {
   SharedViews,
@@ -13,7 +14,6 @@ import {
   viewReducer,
 } from '../../context/view-context/ViewContext';
 import { StrongCheckoutWidgetsConfig } from '../../lib/withDefaultWidgetConfig';
-import { text } from '../../resources/text/textConfig';
 import { LoadingView } from '../../views/loading/LoadingView';
 import { SaleWidgetViews } from '../../context/view-context/SaleViewContextTypes';
 import { widgetTheme } from '../../lib/theme';
@@ -35,6 +35,7 @@ export interface SaleWidgetProps {
 }
 
 export function SaleWidget(props: SaleWidgetProps) {
+  const { t } = useTranslation();
   const {
     config,
     amount,
@@ -53,7 +54,7 @@ export function SaleWidget(props: SaleWidgetProps) {
   const viewReducerValues = useMemo(() => ({ viewState, viewDispatch }), [viewState, viewDispatch]);
 
   const loadingText = viewState.view.data?.loadingText
-    || text.views[SharedViews.LOADING_VIEW].text;
+    || t('views.LOADING_VIEW.text');
 
   const mounted = useRef(false);
   const onMount = useCallback(() => {

packages/checkout/widgets-lib/src/widgets/sale/components/FundingRouteExecute/FundingRouteExecute.tsx

@@ -20,6 +20,7 @@ import {
   useEffect, useMemo, useReducer, useRef, useState,
 } from 'react';
 import { BridgeWidget } from 'widgets/bridge/BridgeWidget';
+import { useTranslation } from 'react-i18next';
 import {
   ConnectLoaderActions,
   ConnectLoaderContext,
@@ -31,7 +32,6 @@ import { ConnectWidgetViews } from '../../../../context/view-context/ConnectView
 import { SaleWidgetViews } from '../../../../context/view-context/SaleViewContextTypes';
 import { ViewActions, ViewContext } from '../../../../context/view-context/ViewContext';
 import { getL1ChainId, getL2ChainId } from '../../../../lib/networkUtils';
-import { text as textConfig } from '../../../../resources/text/textConfig';
 import { LoadingView } from '../../../../views/loading/LoadingView';
 import { ConnectWidget } from '../../../connect/ConnectWidget';
 import { SwapWidget } from '../../../swap/SwapWidget';
@@ -52,13 +52,13 @@ enum FundingRouteExecuteViews {
 }
 
 export function FundingRouteExecute({ fundingRouteStep, onFundingRouteExecuted }: FundingRouteExecuteProps) {
+  const { t } = useTranslation();
   const {
     config, provider, checkout, fromTokenAddress: requiredTokenAddress,
   } = useSaleContext();
   const { viewDispatch } = useContext(ViewContext);
 
   const { connectLoaderDispatch } = useContext(ConnectLoaderContext);
-  const text = textConfig.views[SaleWidgetViews.FUND_WITH_SMART_CHECKOUT];
 
   const [swapParams, setSwapParams] = useState<SwapWidgetParams | undefined>(undefined);
   const [bridgeParams, setBridgeParams] = useState<BridgeWidgetParams | undefined>(undefined);
@@ -229,7 +229,7 @@ export function FundingRouteExecute({ fundingRouteStep, onFundingRouteExecuted }
   return (
     <EventTargetContext.Provider value={eventTargetReducerValues}>
       {view === FundingRouteExecuteViews.LOADING && (
-        <LoadingView loadingText={text.loading.checkingBalances} />
+        <LoadingView loadingText={t('views.FUND_WITH_SMART_CHECKOUT.loading.checkingBalances')} />
       )}
       {view === FundingRouteExecuteViews.EXECUTE_BRIDGE && (
         <BridgeWidget

packages/checkout/widgets-lib/src/widgets/sale/components/FundingRouteMenuItem/FundingRouteMenuItem.tsx

@@ -4,10 +4,9 @@ import {
 import { ChainId, FundingRoute } from '@imtbl/checkout-sdk';
 import { useContext, useEffect, useState } from 'react';
 import { getChainNameById } from 'lib/chains';
+import { useTranslation } from 'react-i18next';
 import { CryptoFiatContext } from '../../../../context/crypto-fiat-context/CryptoFiatContext';
-import { SaleWidgetViews } from '../../../../context/view-context/SaleViewContextTypes';
 import { calculateCryptoToFiat, tokenValueFormat } from '../../../../lib/utils';
-import { text } from '../../../../resources/text/textConfig';
 import { useSaleContext } from '../../context/SaleContextProvider';
 import { fundingRouteFees } from '../../functions/smartCheckoutUtils';
 
@@ -38,7 +37,7 @@ export interface FundingRouteMenuItemProps {
 export function FundingRouteMenuItem({
   onClick, fundingRoute, toggleVisible, selected, size = 'small',
 }: FundingRouteMenuItemProps) {
-  const textConfig = text.views[SaleWidgetViews.FUND_WITH_SMART_CHECKOUT];
+  const { t } = useTranslation();
   const firstFundingStep = fundingRoute.steps[0];
 
   const { cryptoFiatState } = useContext(CryptoFiatContext);
@@ -106,7 +105,7 @@ export function FundingRouteMenuItem({
       <MenuItem.FramedIcon icon="Coins" circularFrame />
       <MenuItem.PriceDisplay
         use={<Heading size="xSmall" />}
-        fiatAmount={`${textConfig.currency.usdEstimate}${usdBalance}`}
+        fiatAmount={`${t('views.FUND_WITH_SMART_CHECKOUT.currency.usdEstimate')}${usdBalance}`}
         price={tokenValueFormat(firstFundingStep.fundingItem.userBalance.formattedBalance)}
       />
       <MenuItem.Label sx={{ display: 'flex', wordBreak: 'default' }}>

packages/checkout/widgets-lib/src/widgets/sale/components/FundingRouteSelect/FundingRouteSelect.tsx

@@ -5,6 +5,7 @@ import {
 } from '@biom3/react';
 import { FundingRoute } from '@imtbl/checkout-sdk';
 import { useContext, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { FooterLogo } from '../../../../components/Footer/FooterLogo';
 import { HeaderNavigation } from '../../../../components/Header/HeaderNavigation';
 import { SimpleLayout } from '../../../../components/SimpleLayout/SimpleLayout';
@@ -16,7 +17,6 @@ import { ViewActions, ViewContext } from '../../../../context/view-context/ViewC
 import { FundingRouteMenuItem } from '../FundingRouteMenuItem/FundingRouteMenuItem';
 import { FundingRouteDrawer } from '../FundingRouteSelectDrawer/FundingRouteDrawer';
 import { PurchaseMenuItem } from '../PurchaseMenuItem/PurchaseMenuItem';
-import { text } from '../../../../resources/text/textConfig';
 import { sendSaleWidgetCloseEvent } from '../../SaleWidgetEvents';
 import { EventTargetContext } from '../../../../context/event-target-context/EventTargetContext';
 import { useSaleContext } from '../../context/SaleContextProvider';
@@ -27,7 +27,7 @@ type FundingRouteSelectProps = {
 };
 
 export function FundingRouteSelect({ fundingRoutes, onFundingRouteSelected }: FundingRouteSelectProps) {
-  const textConfig = text.views[SaleWidgetViews.FUND_WITH_SMART_CHECKOUT];
+  const { t } = useTranslation();
   const [smartCheckoutDrawerVisible, setSmartCheckoutDrawerVisible] = useState(false);
   const [activeFundingRouteIndex, setActiveFundingRouteIndex] = useState(0);
   const { viewDispatch } = useContext(ViewContext);
@@ -75,16 +75,16 @@ export function FundingRouteSelect({ fundingRoutes, onFundingRouteSelected }: Fu
       >
 
         <Heading size="small">
-          {textConfig.fundingRouteSelect.heading}
+          {t('views.FUND_WITH_SMART_CHECKOUT.fundingRouteSelect.heading')}
         </Heading>
 
         {fundingRoutes.length === 0
           ? [
             <Body key="noRoutesAvailableText" size="small">
-              {textConfig.fundingRouteSelect.noRoutesAvailable}
+              {t('views.FUND_WITH_SMART_CHECKOUT.fundingRouteSelect.noRoutesAvailable')}
             </Body>,
             <Button key="payWithCardButton" variant="tertiary">
-              {textConfig.fundingRouteSelect.payWithCard}
+              {t('views.FUND_WITH_SMART_CHECKOUT.fundingRouteSelect.payWithCard')}
             </Button>,
           ]
           : [
@@ -98,10 +98,10 @@ export function FundingRouteSelect({ fundingRoutes, onFundingRouteSelected }: Fu
             />,
             <PurchaseMenuItem key="purchaseMenuItem" fundingRoute={fundingRoutes[activeFundingRouteIndex]} />,
             <Button key="continueButton" sx={{ mt: 'auto' }} variant="primary" onClick={onClickContinue}>
-              {textConfig.fundingRouteSelect.continue}
+              {t('views.FUND_WITH_SMART_CHECKOUT.fundingRouteSelect.continue')}
             </Button>,
             <Button key="payWithCardButton" variant="tertiary" onClick={() => goBackToPaymentMethods()}>
-              {textConfig.fundingRouteSelect.payWithCardInstead}
+              {t('views.FUND_WITH_SMART_CHECKOUT.fundingRouteSelect.payWithCardInstead')}
             </Button>,
           ] }
 

packages/checkout/widgets-lib/src/widgets/sale/components/FundingRouteSelectDrawer/FundingRouteDrawer.tsx

@@ -2,9 +2,8 @@ import {
   Drawer,
 } from '@biom3/react';
 import { FundingRoute } from '@imtbl/checkout-sdk';
+import { useTranslation } from 'react-i18next';
 import { FundingRouteMenuItem } from '../FundingRouteMenuItem/FundingRouteMenuItem';
-import { text } from '../../../../resources/text/textConfig';
-import { SaleWidgetViews } from '../../../../context/view-context/SaleViewContextTypes';
 
 type FundingRouteDrawerProps = {
   visible: boolean;
@@ -17,7 +16,7 @@ export function FundingRouteDrawer({
   visible, onCloseDrawer, fundingRoutes, activeFundingRouteIndex,
 }:
 FundingRouteDrawerProps) {
-  const textConfig = text.views[SaleWidgetViews.FUND_WITH_SMART_CHECKOUT];
+  const { t } = useTranslation();
   const onClickMenuItem = (selectedFundingRouteIndex: number) => {
     onCloseDrawer(selectedFundingRouteIndex);
   };
@@ -28,7 +27,7 @@ FundingRouteDrawerProps) {
       onCloseDrawer={() => onCloseDrawer(activeFundingRouteIndex)}
       visible={visible}
       showHeaderBar
-      headerBarTitle={textConfig.fundingRouteDrawer.header}
+      headerBarTitle={t('views.FUND_WITH_SMART_CHECKOUT.fundingRouteDrawer.header')}
     >
       <Drawer.Content>
         {fundingRoutes.map((fundingRoute: FundingRoute, i: number) => (

packages/checkout/widgets-lib/src/widgets/sale/components/PaymentOption.tsx

@@ -1,7 +1,5 @@
 import { IconProps, MenuItem } from '@biom3/react';
-
-import { text } from '../../../resources/text/textConfig';
-import { SaleWidgetViews } from '../../../context/view-context/SaleViewContextTypes';
+import { useTranslation } from 'react-i18next';
 import { PaymentTypes } from '../types';
 
 export interface PaymentOptionProps {
@@ -11,17 +9,15 @@ export interface PaymentOptionProps {
 }
 
 export function PaymentOption(props: PaymentOptionProps) {
+  const { t } = useTranslation();
   const { type, onClick, disabled } = props;
-  const { options } = text.views[SaleWidgetViews.PAYMENT_METHODS];
-  const optionText = options[type];
+  // const optionText = options[type];
 
   const icon: Record<string, IconProps['icon']> = {
     [PaymentTypes.CRYPTO]: 'Coins',
     [PaymentTypes.FIAT]: 'BankCard',
   };
 
-  if (!optionText) return null;
-
   const handleClick = () => onClick(type);
 
   return (
@@ -36,10 +32,10 @@ export function PaymentOption(props: PaymentOptionProps) {
       disabled={disabled}
     >
       <MenuItem.FramedIcon icon={icon[type]} />
-      <MenuItem.Label size="medium">{optionText.heading}</MenuItem.Label>
+      <MenuItem.Label size="medium">{t(`views.PAYMENT_METHODS.options.${type}.heading`)}</MenuItem.Label>
       {!disabled && <MenuItem.IntentIcon />}
       <MenuItem.Caption>
-        {disabled ? optionText.disabledCaption : optionText.caption}
+        {t(`views.PAYMENT_METHODS.options.${type}.${disabled ? 'disabledCaption' : 'caption'}`)}
       </MenuItem.Caption>
     </MenuItem>
   );

packages/checkout/widgets-lib/src/widgets/sale/components/PurchaseMenuItem/PurchaseMenuItem.tsx

@@ -1,18 +1,17 @@
 import { Heading, MenuItem } from '@biom3/react';
 import { FundingRoute } from '@imtbl/checkout-sdk';
 import { useContext, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useSaleContext } from '../../context/SaleContextProvider';
 import { calculateCryptoToFiat, tokenValueFormat } from '../../../../lib/utils';
-import { text } from '../../../../resources/text/textConfig';
-import { SaleWidgetViews } from '../../../../context/view-context/SaleViewContextTypes';
 import { CryptoFiatContext } from '../../../../context/crypto-fiat-context/CryptoFiatContext';
 
 type PurchaseMenuItemProps = {
   fundingRoute: FundingRoute;
 };
 
 export function PurchaseMenuItem({ fundingRoute }: PurchaseMenuItemProps) {
-  const textConfig = text.views[SaleWidgetViews.FUND_WITH_SMART_CHECKOUT];
+  const { t } = useTranslation();
   const { items } = useSaleContext();
   const firstItem = items[0];
   const firstFundingStep = fundingRoute.steps[0];
@@ -53,7 +52,7 @@ export function PurchaseMenuItem({ fundingRoute }: PurchaseMenuItemProps) {
         use={<Heading size="xSmall" />}
         price={`${firstFundingStep?.fundingItem.token.symbol} 
           ${tokenValueFormat(firstFundingStep.fundingItem.fundsRequired.formattedAmount)}`}
-        fiatAmount={`${textConfig.currency.usdEstimate}${usdPurchaseAmount}`}
+        fiatAmount={`${t('views.FUND_WITH_SMART_CHECKOUT.currency.usdEstimate')}${usdPurchaseAmount}`}
       />
       <MenuItem.Label>
         {firstItem?.name}

packages/checkout/widgets-lib/src/widgets/sale/components/WithCard.tsx

@@ -1,10 +1,8 @@
 import { useMemo } from 'react';
-
+import { useTranslation } from 'react-i18next';
 import { useSaleContext } from '../context/SaleContextProvider';
 import { TransakIframe } from '../../../components/Transak/TransakIframe';
 import { TransakNFTData } from '../../../components/Transak/TransakTypes';
-import { text as textConfig } from '../../../resources/text/textConfig';
-import { SaleWidgetViews } from '../../../context/view-context/SaleViewContextTypes';
 import { SaleErrorTypes } from '../types';
 
 export interface WithCardProps {
@@ -17,6 +15,7 @@ export interface WithCardProps {
 }
 
 export function WithCard(props: WithCardProps) {
+  const { t } = useTranslation();
   const {
     onInit,
     onOpen,
@@ -25,7 +24,6 @@ export function WithCard(props: WithCardProps) {
     onOrderCompleted,
     onOrderFailed,
   } = props;
-  const { screenTitle, loading } = textConfig.views[SaleWidgetViews.PAY_WITH_CARD];
   const {
     recipientEmail, recipientAddress, isPassportWallet, signResponse, goToErrorView,
   } = useSaleContext();
@@ -59,8 +57,8 @@ export function WithCard(props: WithCardProps) {
       email={recipientEmail}
       walletAddress={recipientAddress}
       isPassportWallet={isPassportWallet}
-      exchangeScreenTitle={screenTitle}
-      loadingText={loading}
+      exchangeScreenTitle={t('views.PAY_WITH_CARD.screenTitle')}
+      loadingText={t('views.PAY_WITH_CARD.loading')}
       nftData={nftData}
       calldata={executeTxn.rawData}
       cryptoCurrencyCode={signResponse.order.currency.name}