[WT-1786] Error view with orchestration events

packages/checkout/widgets-lib/src/views/error/ServiceUnavailableErrorView.tsx

@@ -1,3 +1,4 @@
+import { Box, Button } from '@biom3/react';
 import { SimpleLayout } from '../../components/SimpleLayout/SimpleLayout';
 import { HeaderNavigation } from '../../components/Header/HeaderNavigation';
 import { SimpleTextBody } from '../../components/Body/SimpleTextBody';
@@ -10,11 +11,19 @@ import { ServiceType } from './serviceTypes';
 export interface ServiceUnavailableErrorViewProps {
   service: ServiceType;
   onCloseClick: () => void;
+  primaryActionText?: string;
+  onPrimaryButtonClick?: () => void;
+  secondaryActionText?: string;
+  onSecondaryButtonClick?: () => void;
 }
 
 export function ServiceUnavailableErrorView({
   service,
   onCloseClick,
+  primaryActionText,
+  onPrimaryButtonClick,
+  secondaryActionText,
+  onSecondaryButtonClick,
 }: ServiceUnavailableErrorViewProps) {
   const errorText = text.views[SharedViews.SERVICE_UNAVAILABLE_ERROR_VIEW];
   const headingText = errorText.heading[service];
@@ -30,6 +39,55 @@ export function ServiceUnavailableErrorView({
       testId="service-unavailable-error-view"
     >
       <SimpleTextBody heading={headingText}>{errorText.body}</SimpleTextBody>
+
+      <Box
+        testId="button-container"
+        sx={{
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'flex-end',
+        }}
+      >
+
+        {primaryActionText && onPrimaryButtonClick && (
+        <Box
+          sx={{
+            paddingX: 'base.spacing.x4',
+            paddingBottom: 'base.spacing.x2',
+          }}
+        >
+          <Button
+            sx={{ width: '100%' }}
+            testId="primary-action-button"
+            variant="primary"
+            size="large"
+            onClick={onPrimaryButtonClick}
+          >
+            {primaryActionText}
+          </Button>
+        </Box>
+        )}
+
+        {secondaryActionText && onSecondaryButtonClick && (
+        <Box
+          sx={{
+            paddingX: 'base.spacing.x4',
+            paddingBottom: 'base.spacing.x2',
+          }}
+        >
+          <Button
+            sx={{ width: '100%' }}
+            testId="secondary-action-button"
+            variant="secondary"
+            size="large"
+            onClick={onSecondaryButtonClick}
+          >
+            {secondaryActionText}
+          </Button>
+        </Box>
+        )}
+      </Box>
     </SimpleLayout>
   );
 }

packages/checkout/widgets-lib/src/views/top-up/TopUpView.tsx

@@ -201,7 +201,7 @@ export function TopUpView({
       });
       return;
     }
-    orchestrationEvents.sendRequestOnrampEvent(window, widgetEvent, {
+    orchestrationEvents.sendRequestOnrampEvent(eventTarget, widgetEvent, {
       tokenAddress: tokenAddress ?? '',
       amount: amount ?? '',
     });

packages/checkout/widgets-lib/src/widgets/swap/SwapWebComponent.tsx

@@ -19,6 +19,8 @@ import {
 import { CustomAnalyticsProvider } from '../../context/analytics-provider/CustomAnalyticsProvider';
 import { ServiceUnavailableErrorView } from '../../views/error/ServiceUnavailableErrorView';
 import { ServiceType } from '../../views/error/serviceTypes';
+import { isPassportProvider } from '../../lib/providerUtils';
+import { topUpBridgeOption, topUpOnRampOption } from './helpers';
 
 export class ImmutableSwap extends ImmutableWebComponent {
   walletProvider: WalletProviderName | undefined = undefined;
@@ -95,6 +97,24 @@ export class ImmutableSwap extends ImmutableWebComponent {
     }
   }
 
+  private isNotPassport = !isPassportProvider(this.provider)
+    || this.walletProvider !== WalletProviderName.PASSPORT;
+
+  private topUpOptions(): { text:string, action: ()=>void }[] | undefined {
+    const optionsArray: { text:string, action: ()=>void }[] = [];
+
+    const isOnramp = topUpOnRampOption(this.widgetConfig!.isOnRampEnabled);
+    if (isOnramp) {
+      optionsArray.push({ text: isOnramp.text, action: isOnramp.action });
+    }
+    const isBridge = topUpBridgeOption(this.widgetConfig!.isBridgeEnabled, this.isNotPassport);
+    if (isBridge) {
+      optionsArray.push({ text: isBridge.text, action: isBridge.action });
+    }
+
+    return optionsArray;
+  }
+
   renderWidget() {
     this.validateInputs();
     const connectLoaderParams: ConnectLoaderParams = {
@@ -113,6 +133,8 @@ export class ImmutableSwap extends ImmutableWebComponent {
 
     let isSwapAvailable = false;
 
+    const topUpOptions = this.topUpOptions();
+
     this.checkout
       ?.isSwapAvailable()
       .then((available) => {
@@ -132,6 +154,14 @@ export class ImmutableSwap extends ImmutableWebComponent {
                     <ServiceUnavailableErrorView
                       service={ServiceType.SWAP}
                       onCloseClick={() => sendSwapWidgetCloseEvent(window)}
+                      primaryActionText={topUpOptions && topUpOptions?.length > 0 ? topUpOptions[0].text : undefined}
+                      onPrimaryButtonClick={
+                      topUpOptions && topUpOptions?.length > 0
+                        ? topUpOptions[0].action
+                        : undefined
+}
+                      secondaryActionText={topUpOptions?.length === 2 ? topUpOptions[1].text : undefined}
+                      onSecondaryButtonClick={topUpOptions?.length === 2 ? topUpOptions[1].action : undefined}
                     />
                   </BiomeCombinedProviders>
                 )}

packages/checkout/widgets-lib/src/widgets/swap/helpers.ts

@@ -1,15 +1,50 @@
 import { TokenInfo } from '@imtbl/checkout-sdk';
-
-export const findTokenByAddress = (
-  tokens: TokenInfo[],
-  contractAddress: string | undefined,
-): TokenInfo | undefined => {
-  if (!contractAddress) return tokens[0];
-  return tokens.find(
-    (t) => t.address?.toLowerCase() === contractAddress.toLowerCase(),
-  );
-};
+import { IMTBLWidgetEvents } from '@imtbl/checkout-widgets';
+import { text } from '../../resources/text/textConfig';
+import { SharedViews } from '../../context/view-context/ViewContext';
+import { orchestrationEvents } from '../../lib/orchestrationEvents';
 
 export const alphaSortTokensList = (
   tokens: TokenInfo[],
 ): TokenInfo[] => tokens.sort((a, b) => a.symbol.localeCompare(b.symbol));
+
+export const topUpBridgeOption = (
+  isBridgeEnabled:boolean,
+  isNotPassport:boolean,
+): { text:string, action: ()=>void } | undefined => {
+  if (isBridgeEnabled && isNotPassport) {
+    return {
+      text: text.views[SharedViews.TOP_UP_VIEW].topUpOptions.bridge.heading,
+      action: () => {
+        orchestrationEvents.sendRequestBridgeEvent(
+          window,
+          IMTBLWidgetEvents.IMTBL_BRIDGE_WIDGET_EVENT,
+          {
+            tokenAddress: '',
+            amount: '',
+          },
+        );
+      },
+    };
+  }
+  return undefined;
+};
+
+export const topUpOnRampOption = (isOnRampEnabled:boolean): { text:string, action: ()=>void } | undefined => {
+  if (isOnRampEnabled) {
+    return {
+      text: text.views[SharedViews.TOP_UP_VIEW].topUpOptions.onramp.heading,
+      action: () => {
+        orchestrationEvents.sendRequestOnrampEvent(
+          window,
+          IMTBLWidgetEvents.IMTBL_ONRAMP_WIDGET_EVENT,
+          {
+            tokenAddress: '',
+            amount: '',
+          },
+        );
+      },
+    };
+  }
+  return undefined;
+};