[NO CHANGELOG] [Add Funds Widget] Add Geo Block error for AU and USA (#…

…2339)

packages/checkout/widgets-lib/src/context/view-context/AddFundsViewContextTypes.ts

@@ -4,9 +4,10 @@ import { ViewType } from './ViewType';
 export enum AddFundsWidgetViews {
   ADD_FUNDS = 'ADD_FUNDS',
   REVIEW = 'REVIEW',
+  GEO_BLOCK_ERROR = 'GEO_BLOCK_ERROR',
 }
 
-export type AddFundsWidgetView = AddFundsView | AddFundsReview;
+export type AddFundsWidgetView = AddFundsView | AddFundsReview | GeoBlockErrorView;
 
 interface AddFundsView extends ViewType {
   type: AddFundsWidgetViews.ADD_FUNDS;
@@ -17,6 +18,10 @@ interface AddFundsReview extends ViewType {
   data: AddFundsReviewData;
 }
 
+interface GeoBlockErrorView extends ViewType {
+  type: AddFundsWidgetViews.GEO_BLOCK_ERROR;
+}
+
 export interface AddFundsReviewData {
   balance: TokenBalance;
   toAmount: string;

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

@@ -71,11 +71,13 @@
     "SERVICE_UNAVAILABLE_ERROR_VIEW": {
       "heading": {
         "swap": "Swapping is not available in your region",
-        "generic": "This service is not available in your region"
+        "generic": "This service is not available in your region",
+        "addFunds": "This is not available in your region"
       },
       "body": {
         "swap": "Please refer to <quickswapLink>Quickswap’s</quickswapLink> website for further information.",
-        "generic": "For further assistance visit the <immutableSupport>Immutable</immutableSupport> support page."
+        "generic": "For further assistance visit the <immutableSupport>Immutable</immutableSupport> support page.",
+        "addFunds": "Please add tokens another way"
       }
     },
     "LOADING_VIEW": {
@@ -679,6 +681,10 @@
       },
       "footer": {
         "body":  "Swap functionality is powered by a third party, Squid. Immutable neither builds, owns, operates or deploys <squidLink>Squid</squidLink>."
+      },
+      "geoBlockError": {
+        "buyTokenButton": "Buy tokens",
+        "bridgeTokenButton": "Bridge tokens"
       }
     }
   },

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

@@ -75,11 +75,13 @@
     "SERVICE_UNAVAILABLE_ERROR_VIEW": {
       "heading": {
         "swap": "お住まいの地域では交換が利用できません",
-        "generic": "このサービスはお住まいの地域では利用できません"
+        "generic": "このサービスはお住まいの地域では利用できません",
+        "addFunds": "このサービスはお住まいの地域では利用できません"
       },
       "body": {
         "swap": "<quickswapLink>Quickswap</quickswapLink>のウェブサイトで詳細情報をご覧ください。",
-        "generic": "詳しいサポートについては、<immutableSupport>Immutable</immutableSupport>サポートページをご覧ください."
+        "generic": "詳しいサポートについては、<immutableSupport>Immutable</immutableSupport>サポートページをご覧ください.",
+        "addFunds": "別の方法でトークンを追加してください。"
       }
     },
     "LOADING_VIEW": {
@@ -626,6 +628,51 @@
           "actionText": "再試行"
         }
       }
+    },
+    "ADD_FUNDS": {
+      "drawer": {
+        "options": {
+          "swap": {
+            "heading": "スワップ",
+            "caption": "このネットワークでトークンをスワップします。",
+            "disabledCaption": "現在利用できません。"
+          },
+          "debit": {
+            "heading": "デビットカード",
+            "caption": "",
+            "disabledCaption": "選択した内容には利用できません。トークンを追加することをお勧めします。"
+          },
+          "credit": {
+            "heading": "クレジットカード",
+            "caption": "失敗や追加手数料が発生する可能性があります。",
+            "disabledCaption": "選択した内容には利用できません。トークンを追加することをお勧めします。"
+          }
+        }
+      },
+      "onboarding": {
+        "screen1": {
+          "title": "Immutableでの支払いが進化しました",
+          "caption": "よく聞いてください",
+          "buttonText": "次へ"
+        },
+        "screen2": {
+          "title": "トークンをPassportに転送し、\n任意のウォレットから支払います",
+          "caption": "進化した内容",
+          "buttonText": "次へ"
+        },
+        "screen3": {
+          "title": "他のチェーンでトークンを使用して支払う、\n最適なオプションを見つけます",
+          "caption": "進化",
+          "buttonText": "支払いに使用するウォレットを選択"
+        }
+      },
+      "footer": {
+        "body": "スワップ機能はサードパーティであるSquidによって提供されています。Immutableは<squidLink>Squid</squidLink>を構築、所有、運営、またはデプロイしていません。"
+      },
+      "geoBlockError": {
+        "buyTokenButton": "トークンを購入する",
+        "bridgeTokenButton": "トークンをブリッジする"
+      }
     }
   },
   "footers": {

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

@@ -70,12 +70,14 @@
     },
     "SERVICE_UNAVAILABLE_ERROR_VIEW": {
       "heading": {
-        "swap": "귀하의 지역에서는 스왑이 가능하지 않습니다",
-        "generic": "이 서비스는 귀하의 지역에서 이용할 수 없습니다"
+        "swap": "해당 지역에서는 스왑을 이용할 수 없습니다",
+        "generic": "이 서비스는 귀하의 지역에서 사용할 수 없습니다",
+        "addFunds": "이 서비스는 귀하의 지역에서 사용할 수 없습니다"
       },
       "body": {
-        "swap": "자세한 정보는 <quickswapLink>Quickswap</quickswapLink> 웹사이트를 참조하십시오.",
-        "generic": "추가 지원이 필요하시면 <immutableSupport>Immutable</immutableSupport> 지원 페이지를 방문하세요."
+        "swap": "<quickswapLink>Quickswap</quickswapLink> 웹사이트에서 자세한 내용을 확인하세요.",
+        "generic": "자세한 내용은 <immutableSupport>Immutable</immutableSupport> 지원 페이지를 참조하세요.",
+        "addFunds": "다른 방법으로 토큰을 추가해 주세요."
       }
     },
     "LOADING_VIEW": {
@@ -619,6 +621,51 @@
           "actionText": "다시 시도"
         }
       }
+    },
+    "ADD_FUNDS": {
+      "drawer": {
+        "options": {
+          "swap": {
+            "heading": "스왑",
+            "caption": "이 네트워크에서 토큰을 스왑합니다.",
+            "disabledCaption": "현재 이용할 수 없습니다."
+          },
+          "debit": {
+            "heading": "직불카드",
+            "caption": "",
+            "disabledCaption": "선택한 항목에서 사용할 수 없습니다. 토큰 추가를 권장합니다."
+          },
+          "credit": {
+            "heading": "신용카드",
+            "caption": "실패하거나 추가 수수료가 발생할 수 있습니다.",
+            "disabledCaption": "선택한 항목에서 사용할 수 없습니다. 토큰 추가를 권장합니다."
+          }
+        }
+      },
+      "onboarding": {
+        "screen1": {
+          "title": "Immutable에서 결제가 진화했습니다",
+          "caption": "잘 들으세요",
+          "buttonText": "다음"
+        },
+        "screen2": {
+          "title": "토큰을 Passport로 전달하고,\n어떤 지갑에서든지 결제하세요",
+          "caption": "진화된 내용",
+          "buttonText": "다음"
+        },
+        "screen3": {
+          "title": "다른 체인의 토큰으로 결제하고,\n최적의 옵션을 찾아드립니다",
+          "caption": "진화",
+          "buttonText": "결제할 지갑을 선택하세요"
+        }
+      },
+      "footer": {
+        "body": "스왑 기능은 제3자인 Squid에 의해 제공됩니다. Immutable은 <squidLink>Squid</squidLink>를 구축, 소유, 운영 또는 배포하지 않습니다."
+      },
+      "geoBlockError": {
+        "buyTokenButton": "토큰 구매",
+        "bridgeTokenButton": "토큰 브릿지"
+      }
     }
   },
   "footers": {

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

@@ -70,12 +70,14 @@
     },
     "SERVICE_UNAVAILABLE_ERROR_VIEW": {
       "heading": {
-        "swap": "您所在的地区不支持兑换",
-        "generic": "该服务在您的地区不可用"
+        "swap": "您的地区无法使用兑换功能",
+        "generic": "该服务在您的地区不可用",
+        "addFunds": "该服务在您的地区不可用"
       },
       "body": {
-        "swap": "请参考<quickswapLink>Quickswap</quickswapLink>的网站了解更多信息。",
-        "generic": "如需进一步帮助，请访问<immutableSupport>Immutable</immutableSupport>支持页面。"
+        "swap": "请访问<quickswapLink>Quickswap</quickswapLink>网站了解更多信息。",
+        "generic": "更多帮助，请访问<immutableSupport>Immutable</immutableSupport>支持页面。",
+        "addFunds": "请通过其他方式添加代币。"
       }
     },
     "LOADING_VIEW": {
@@ -619,6 +621,51 @@
           "actionText": "请重试"
         }
       }
+    },
+    "ADD_FUNDS": {
+      "drawer": {
+        "options": {
+          "swap": {
+            "heading": "兑换",
+            "caption": "在此网络上兑换代币。",
+            "disabledCaption": "当前不可用。"
+          },
+          "debit": {
+            "heading": "借记卡",
+            "caption": "",
+            "disabledCaption": "您的选择不可用。我们建议添加代币。"
+          },
+          "credit": {
+            "heading": "信用卡",
+            "caption": "可能会发生失败或额外费用。",
+            "disabledCaption": "您的选择不可用。我们建议添加代币。"
+          }
+        }
+      },
+      "onboarding": {
+        "screen1": {
+          "title": "Immutable的支付方式已进化",
+          "caption": "请注意",
+          "buttonText": "下一步"
+        },
+        "screen2": {
+          "title": "将代币传输到Passport，\n并从任何钱包付款",
+          "caption": "进化了什么",
+          "buttonText": "下一步"
+        },
+        "screen3": {
+          "title": "使用其他链上的代币支付，\n我们会为您找到最佳选择",
+          "caption": "进化",
+          "buttonText": "选择要使用的付款钱包"
+        }
+      },
+      "footer": {
+        "body": "交换功能由第三方 Squid 提供。Immutable 不构建、拥有、运营或部署 <squidLink>Squid</squidLink>。"
+      },
+      "geoBlockError": {
+        "buyTokenButton": "购买代币",
+        "bridgeTokenButton": "桥接代币"
+      }
     }
   },
   "footers": {

packages/checkout/widgets-lib/src/views/error/serviceTypes.ts

@@ -1,4 +1,5 @@
 export enum ServiceType {
   SWAP = 'swap',
   GENERIC = 'generic',
+  ADD_FUNDS = 'addFunds',
 }

packages/checkout/widgets-lib/src/widgets/add-funds/AddFundsWidget.tsx

@@ -128,6 +128,20 @@ export default function AddFundsWidget({
     })();
   }, []);
 
+  useEffect(() => {
+    if (!checkout) return;
+    (async () => {
+      if (!(await checkout.isSwapAvailable())) {
+        viewDispatch({
+          payload: {
+            type: ViewActions.UPDATE_VIEW,
+            view: { type: AddFundsWidgetViews.GEO_BLOCK_ERROR },
+          },
+        });
+      }
+    })();
+  }, [checkout]);
+
   useEffect(() => {
     if (!squid || !chains || !fromProvider || fetchingBalances.current) return;
 
@@ -260,6 +274,44 @@ export default function AddFundsWidget({
               onCloseClick={() => sendAddFundsCloseEvent(eventTarget)}
             />
           )}
+          {viewState.view.type === AddFundsWidgetViews.GEO_BLOCK_ERROR && (
+            <ServiceUnavailableErrorView
+              service={ServiceType.ADD_FUNDS}
+              onCloseClick={() => sendAddFundsCloseEvent(eventTarget)}
+              primaryActionText={
+              checkout.config.isOnRampEnabled
+                ? t('views.ADD_FUNDS.geoBlockError.buyTokenButton') : undefined
+              }
+              onPrimaryButtonClick={
+                () => {
+                  orchestrationEvents.sendRequestOnrampEvent(
+                    eventTarget,
+                    IMTBLWidgetEvents.IMTBL_ADD_FUNDS_WIDGET_EVENT,
+                    {
+                      tokenAddress: '',
+                      amount: '',
+                    },
+                  );
+                }
+              }
+              secondaryActionText={
+                checkout.config.isBridgeEnabled
+                  ? t('views.ADD_FUNDS.geoBlockError.bridgeTokenButton') : undefined
+              }
+              onSecondaryButtonClick={
+                () => {
+                  orchestrationEvents.sendRequestBridgeEvent(
+                    eventTarget,
+                    IMTBLWidgetEvents.IMTBL_ADD_FUNDS_WIDGET_EVENT,
+                    {
+                      tokenAddress: '',
+                      amount: '',
+                    },
+                  );
+                }
+              }
+            />
+          )}
         </Stack>
       </AddFundsContext.Provider>
     </ViewContext.Provider>

packages/checkout/widgets-sample-app/src/components/ui/add-funds/addFunds.tsx

@@ -1,12 +1,13 @@
 import {
-  Checkout,
-  WidgetTheme,
-  WidgetType,
-  WidgetLanguage,
   AddFundsEventType,
+  BridgeEventType,
+  Checkout,
   OnRampEventType,
   OrchestrationEventType,
   WalletProviderName,
+  WidgetLanguage,
+  WidgetTheme,
+  WidgetType,
 } from "@imtbl/checkout-sdk";
 import { WidgetsFactory } from "@imtbl/checkout-widgets";
 import { Environment } from "@imtbl/config";
@@ -130,16 +131,33 @@ function AddFundsUI() {
     addFunds.addListener(AddFundsEventType.CONNECT_SUCCESS, (data: any) => {
       console.log("CONNECT_SUCCESS", data);
     });
+    addFunds.addListener(OrchestrationEventType.REQUEST_BRIDGE, (data: any) => {
+      console.log("REQUEST_BRIDGE", data);
+      addFunds.unmount();
+      bridge.addListener(BridgeEventType.CLOSE_WIDGET, (data: any) => {
+        console.log("CLOSE_WIDGET", data);
+        bridge.unmount();
+      });
+      bridge.mount(ADD_FUNDS_TARGET_ID, {
+        ...data,
+        showBackButton: true,
+      });
+    });
     onRamp.addListener(OrchestrationEventType.REQUEST_GO_BACK, () => {
       goBack();
     });
+    bridge.addListener(OrchestrationEventType.REQUEST_GO_BACK, () => {
+      goBack();
+    });
 
     return () => {
       addFunds.removeListener(AddFundsEventType.CLOSE_WIDGET);
       addFunds.removeListener(OrchestrationEventType.REQUEST_ONRAMP);
       addFunds.removeListener(AddFundsEventType.CONNECT_SUCCESS);
       onRamp.removeListener(OnRampEventType.CLOSE_WIDGET);
       onRamp.removeListener(OrchestrationEventType.REQUEST_GO_BACK);
+      bridge.removeListener(BridgeEventType.CLOSE_WIDGET);
+      bridge.removeListener(OrchestrationEventType.REQUEST_GO_BACK);
     }
   }, [addFunds, toProvider, toTokenAddress, toAmount]);
 
@@ -187,7 +205,7 @@ function AddFundsUI() {
       <button onClick={() => setPresetToProvider(prev => !prev)}>
         {presetToProvider ? 'Disconnect destination wallet' : 'Connect destination wallet'}
       </button>
-      
+
     </div>
   );
 }