Fix: [GPR-468/468/470][Sale widget] speed up payment flow by removing…

… unnecessary views (#1569)
immutable · Mar 6, 2024 · ad8c959 · ad8c959
1 parent 91f8726
commit ad8c959
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 43 deletions.
diff --git a/packages/checkout/widgets-lib/src/locales/en.json b/packages/checkout/widgets-lib/src/locales/en.json
@@ -56,11 +56,7 @@
     },
     "ERROR_VIEW": {
       "heading": "Something's gone wrong",
-      "body": [
-        "You can try again or contact",
-        "support",
-        "for help."
-      ],
+      "body": ["You can try again or contact", "support", "for help."],
       "actionText": "Try again"
     },
     "SERVICE_UNAVAILABLE_ERROR_VIEW": {
@@ -287,9 +283,16 @@
         "captionCTA": "add coins"
       },
       "loading": {
-        "ready": "Ready to purchase",
-        "confirm": "Confirm in your wallet",
-        "processing": "Processing purchase"
+        "ready": [
+          "Collecting your order",
+          "Talking to wallet",
+          "Readying assets"
+        ],
+        "processing": [
+          "Initialising payment",
+          "Securing your assets",
+          "Finalising payment"
+        ]
       }
     },
     "PAY_WITH_COINS": {
@@ -650,4 +653,4 @@
       "switchButton": "Switch to {{chain}}"
     }
   }
-}
+}
diff --git a/packages/checkout/widgets-lib/src/locales/ja.json b/packages/checkout/widgets-lib/src/locales/ja.json
@@ -290,9 +290,8 @@
         "captionCTA": "コインを追加"
       },
       "loading": {
-        "ready": "購入準備完了",
-        "confirm": "ウォレットで確認してください",
-        "processing": "購入処理中"
+        "ready": ["注文を受け取り中", "ウォレットと通信中", "資産を準備中"],
+        "processing": ["支払いを初期化中", "資産を確保中", "支払いを完了中"]
       }
     },
     "PAY_WITH_COINS": {
@@ -643,4 +642,4 @@
       "switchButton": "{{chain}}に切り替える"
     }
   }
-}
+}
diff --git a/packages/checkout/widgets-lib/src/locales/ko.json b/packages/checkout/widgets-lib/src/locales/ko.json
@@ -56,11 +56,7 @@
     },
     "ERROR_VIEW": {
       "heading": "문제가 발생했습니다",
-      "body": [
-        "다시 시도하거나",
-        "지원팀에",
-        "도움을 요청하세요."
-      ],
+      "body": ["다시 시도하거나", "지원팀에", "도움을 요청하세요."],
       "actionText": "다시 시도"
     },
     "SERVICE_UNAVAILABLE_ERROR_VIEW": {
@@ -287,9 +283,8 @@
         "captionCTA": "코인 추가"
       },
       "loading": {
-        "ready": "구매 준비 완료",
-        "confirm": "지갑에서 확인하세요",
-        "processing": "구매 처리 중"
+        "ready": ["주문 수집 중", "지갑과 대화 중", "자산 준비 중"],
+        "processing": ["결제 초기화 중", "자산 보호 중", "결제 완료 중"]
       }
     },
     "PAY_WITH_COINS": {
@@ -640,4 +635,4 @@
       "switchButton": "{{chain}}로 전환하기"
     }
   }
-}
+}
diff --git a/packages/checkout/widgets-lib/src/locales/zh.json b/packages/checkout/widgets-lib/src/locales/zh.json
@@ -283,9 +283,8 @@
         "captionCTA": "添加硬币"
       },
       "loading": {
-        "ready": "准备购买",
-        "confirm": "在您的钱包中确认",
-        "processing": "正在处理购买"
+        "ready": ["正在收集您的订单", "正在与钱包交流", "正在准备资产"],
+        "processing": ["正在初始化支付", "正在保护您的资产", "正在完成支付"]
       }
     },
     "PAY_WITH_COINS": {

diff --git a/packages/checkout/widgets-lib/src/views/loading/LoadingView.tsx b/packages/checkout/widgets-lib/src/views/loading/LoadingView.tsx
@@ -2,14 +2,21 @@ import { LoadingOverlay } from '@biom3/react';
 import { SimpleLayout } from '../../components/SimpleLayout/SimpleLayout';
 
 export interface LoadingViewProps {
-  loadingText: string;
+  loadingText: string | string[];
+  textDuration?: number;
 }
-export function LoadingView({ loadingText }: LoadingViewProps) {
+export function LoadingView({ loadingText, textDuration }: LoadingViewProps) {
+  const text = Array.isArray(loadingText) ? loadingText : [loadingText];
+  const duration = textDuration || 2500;
+
   return (
     <SimpleLayout>
       <LoadingOverlay visible>
         <LoadingOverlay.Content>
-          <LoadingOverlay.Content.LoopingText text={[loadingText]} />
+          <LoadingOverlay.Content.LoopingText
+            text={[...text]}
+            textDuration={duration}
+          />
         </LoadingOverlay.Content>
       </LoadingOverlay>
     </SimpleLayout>

diff --git a/packages/checkout/widgets-lib/src/widgets/sale/SaleWidgetRoot.tsx b/packages/checkout/widgets-lib/src/widgets/sale/SaleWidgetRoot.tsx
@@ -103,21 +103,22 @@ export class Sale extends Base<WidgetType.SALE> {
       checkout: this.checkout,
       allowedChains: [getL2ChainId(this.checkout!.config)],
     };
+    const config = this.strongConfig();
 
     this.reactRoot.render(
       <React.StrictMode>
         <CustomAnalyticsProvider checkout={this.checkout}>
-          <ThemeProvider id="sale-container" config={this.strongConfig()}>
+          <ThemeProvider id="sale-container" config={config}>
             <ConnectLoader
-              widgetConfig={this.strongConfig()}
+              widgetConfig={config}
               params={connectLoaderParams}
               closeEvent={() => {
                 sendSaleWidgetCloseEvent(window);
               }}
             >
               <Suspense fallback={<LoadingView loadingText={t('views.LOADING_VIEW.text')} />}>
                 <SaleWidget
-                  config={this.strongConfig()}
+                  config={config}
                   amount={this.parameters.amount!}
                   items={this.parameters.items!}
                   environmentId={this.parameters.environmentId!}

diff --git a/packages/checkout/widgets-lib/src/widgets/sale/views/PayWithCoins.tsx b/packages/checkout/widgets-lib/src/widgets/sale/views/PayWithCoins.tsx
@@ -8,25 +8,21 @@ import { useSaleEvent } from '../hooks/useSaleEvents';
 export function PayWithCoins() {
   const { t } = useTranslation();
   const processing = useRef(false);
-  const { sendPageView, sendTransactionSuccessEvent, sendFailedEvent } = useSaleEvent();
   const {
-    execute, signResponse, executeResponse, goToSuccessView,
-  } = useSaleContext();
-  const expectedTxns = signResponse?.transactions.length || 0;
+    sendPageView,
+    sendTransactionSuccessEvent,
+    sendFailedEvent,
+    sendCloseEvent,
+  } = useSaleEvent();
+  const { execute, signResponse, executeResponse } = useSaleContext();
   const executedTxns = executeResponse?.transactions.length || 0;
 
   let loadingText = t('views.PAYMENT_METHODS.loading.ready');
 
-  if (signResponse !== undefined) {
-    loadingText = t('views.PAYMENT_METHODS.loading.confirm');
-  } else if (executedTxns > 0 && executedTxns === expectedTxns) {
+  if (executedTxns >= 1) {
     loadingText = t('views.PAYMENT_METHODS.loading.processing');
   }
 
-  if (signResponse !== undefined) {
-    loadingText = `${loadingText} ${executedTxns}/${expectedTxns}`;
-  }
-
   const sendTransaction = async () => {
     execute(
       signResponse,
@@ -48,7 +44,7 @@ export function PayWithCoins() {
 
   useEffect(() => {
     if (executeResponse?.done === true) {
-      goToSuccessView();
+      sendCloseEvent(SaleWidgetViews.SALE_SUCCESS);
     }
   }, [executeResponse]);