Export SalePaymentTypes from sdk (#1364)

packages/checkout/sdk/src/widgets/definitions/events/sale.ts

@@ -17,7 +17,7 @@ export enum SaleEventType {
  */
 export type SaleSuccess = {
   /** Chosen payment method */
-  paymentMethod: string | undefined;
+  paymentMethod: SalePaymentTypes | undefined;
   /** The executed transactions */
   transactions: {
     method: string;
@@ -38,7 +38,7 @@ export type SaleFailed = {
   /** The timestamp of the failed swap. */
   timestamp: number;
   /** Chosen payment method */
-  paymentMethod: string | undefined;
+  paymentMethod: SalePaymentTypes | undefined;
   /** The executed transactions */
   transactions: {
     method: string;
@@ -51,7 +51,7 @@ export type SaleFailed = {
  * @property {Object} transactions
  */
 export type SaleTransactionSuccess = {
-  paymentMethod: string | undefined;
+  paymentMethod: SalePaymentTypes | undefined;
   /** The executed transactions */
   transactions: {
     method: string;
@@ -65,5 +65,13 @@ export type SaleTransactionSuccess = {
  */
 export type SalePaymentMethod = {
   /** Chosen payment method */
-  paymentMethod: string | undefined;
+  paymentMethod: SalePaymentTypes | undefined;
 };
+
+/**
+ * Enum representing Sale Widget available payment types.
+ */
+export enum SalePaymentTypes {
+  CRYPTO = 'crypto',
+  FIAT = 'fiat',
+}

packages/checkout/widgets-lib/src/resources/text/textConfig.ts

@@ -1,13 +1,13 @@
 /* eslint-disable max-len */
-import { WalletProviderName } from '@imtbl/checkout-sdk';
+import { SalePaymentTypes, WalletProviderName } from '@imtbl/checkout-sdk';
 import { BridgeWidgetViews } from 'context/view-context/BridgeViewContextTypes';
 import { ConnectWidgetViews } from '../../context/view-context/ConnectViewContextTypes';
 import { SwapWidgetViews } from '../../context/view-context/SwapViewContextTypes';
 import { SharedViews } from '../../context/view-context/ViewContext';
 import { WalletWidgetViews } from '../../context/view-context/WalletViewContextTypes';
 import { OnRampWidgetViews } from '../../context/view-context/OnRampViewContextTypes';
 import { SaleWidgetViews } from '../../context/view-context/SaleViewContextTypes';
-import { SaleErrorTypes, PaymentTypes } from '../../widgets/sale/types';
+import { SaleErrorTypes } from '../../widgets/sale/types';
 import { ServiceType } from '../../views/error/serviceTypes';
 
 export const text = {
@@ -273,12 +273,12 @@ export const text = {
         heading: 'How would you like to pay?',
       },
       options: {
-        [PaymentTypes.CRYPTO]: {
+        [SalePaymentTypes.CRYPTO]: {
           heading: 'Coins',
           caption: 'Using the coins balance in your wallet',
           disabledCaption: "We can't see enough coins in your balance",
         },
-        [PaymentTypes.FIAT]: {
+        [SalePaymentTypes.FIAT]: {
           heading: 'Card',
           caption: 'GooglePay also available with Transak',
           disabledCaption: undefined,

packages/checkout/widgets-lib/src/widgets/sale/SaleWidgetEvents.ts

@@ -3,6 +3,7 @@ import {
   IMTBLWidgetEvents,
   SaleEventType,
   WidgetType,
+  SalePaymentTypes,
 } from '@imtbl/checkout-sdk';
 import { ExecutedTransaction } from './types';
 
@@ -23,7 +24,7 @@ export const sendSaleWidgetCloseEvent = (eventTarget: Window | EventTarget) => {
 
 export const sendSaleSuccessEvent = (
   eventTarget: Window | EventTarget,
-  paymentMethod: string | undefined,
+  paymentMethod: SalePaymentTypes | undefined,
   transactions: ExecutedTransaction[] = [],
 ) => {
   const event = new CustomEvent<
@@ -45,7 +46,7 @@ export const sendSaleSuccessEvent = (
 export const sendSaleFailedEvent = (
   eventTarget: Window | EventTarget,
   reason: string,
-  paymentMethod: string | undefined,
+  paymentMethod: SalePaymentTypes | undefined,
   transactions: ExecutedTransaction[] = [],
 ) => {
   const event = new CustomEvent<
@@ -68,7 +69,7 @@ export const sendSaleFailedEvent = (
 
 export const sendSaleTransactionSuccessEvent = (
   eventTarget: Window | EventTarget,
-  paymentMethod: string | undefined,
+  paymentMethod: SalePaymentTypes | undefined,
   transactions: ExecutedTransaction[],
 ) => {
   const event = new CustomEvent<
@@ -86,7 +87,7 @@ export const sendSaleTransactionSuccessEvent = (
 
 export const sendSalePaymentMethodEvent = (
   eventTarget: Window | EventTarget,
-  paymentMethod: string | undefined,
+  paymentMethod: SalePaymentTypes | undefined,
 ) => {
   const event = new CustomEvent<
   WidgetEvent<WidgetType.SALE, SaleEventType.PAYMENT_METHOD>

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

@@ -1,10 +1,10 @@
 import { IconProps, MenuItem } from '@biom3/react';
+import { SalePaymentTypes } from '@imtbl/checkout-sdk';
 import { useTranslation } from 'react-i18next';
-import { PaymentTypes } from '../types';
 
 export interface PaymentOptionProps {
-  type: PaymentTypes;
-  onClick: (type: PaymentTypes) => void;
+  type: SalePaymentTypes;
+  onClick: (type: SalePaymentTypes) => void;
   disabled?: boolean;
 }
 
@@ -14,8 +14,8 @@ export function PaymentOption(props: PaymentOptionProps) {
   // const optionText = options[type];
 
   const icon: Record<string, IconProps['icon']> = {
-    [PaymentTypes.CRYPTO]: 'Coins',
-    [PaymentTypes.FIAT]: 'BankCard',
+    [SalePaymentTypes.CRYPTO]: 'Coins',
+    [SalePaymentTypes.FIAT]: 'BankCard',
   };
 
   const handleClick = () => onClick(type);

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

@@ -1,17 +1,16 @@
 import { Box } from '@biom3/react';
 
+import { SalePaymentTypes } from '@imtbl/checkout-sdk';
 import { PaymentOption } from './PaymentOption';
 
-import { PaymentTypes } from '../types';
-
-const defaultPaymentOptions: PaymentTypes[] = [
-  PaymentTypes.FIAT,
-  PaymentTypes.CRYPTO,
+const defaultPaymentOptions: SalePaymentTypes[] = [
+  SalePaymentTypes.FIAT,
+  SalePaymentTypes.CRYPTO,
 ];
 
 export interface PaymentOptionsProps {
-  onClick: (type: PaymentTypes) => void;
-  disabledOptions?: PaymentTypes[];
+  onClick: (type: SalePaymentTypes) => void;
+  disabledOptions?: SalePaymentTypes[];
 }
 
 export function PaymentOptions(props: PaymentOptionsProps) {

packages/checkout/widgets-lib/src/widgets/sale/context/SaleContextProvider.tsx

@@ -3,6 +3,7 @@ import {
   SaleItem,
   RoutingOutcomeType,
   SmartCheckoutResult,
+  SalePaymentTypes,
 } from '@imtbl/checkout-sdk';
 import { Passport } from '@imtbl/passport';
 import {
@@ -26,7 +27,6 @@ import { useSignOrder } from '../hooks/useSignOrder';
 import {
   ExecuteOrderResponse,
   ExecutedTransaction,
-  PaymentTypes,
   SaleErrorTypes,
   SignOrderError,
   SignResponse,
@@ -49,7 +49,7 @@ type SaleContextProps = {
 
 type SaleContextValues = SaleContextProps & {
   sign: (
-    paymentType: PaymentTypes,
+    paymentType: SalePaymentTypes,
     callback?: (response: SignResponse | undefined) => void
   ) => Promise<SignResponse | undefined>;
   execute: (
@@ -61,15 +61,15 @@ type SaleContextValues = SaleContextProps & {
   signError: SignOrderError | undefined;
   executeResponse: ExecuteOrderResponse | undefined;
   isPassportWallet: boolean;
-  paymentMethod: PaymentTypes | undefined;
-  setPaymentMethod: (paymentMethod: PaymentTypes | undefined) => void;
-  goBackToPaymentMethods: (paymentMethod?: PaymentTypes | undefined) => void;
+  paymentMethod: SalePaymentTypes | undefined;
+  setPaymentMethod: (paymentMethod: SalePaymentTypes | undefined) => void;
+  goBackToPaymentMethods: (paymentMethod?: SalePaymentTypes | undefined) => void;
   goToErrorView: (type: SaleErrorTypes, data?: Record<string, unknown>) => void;
   goToSuccessView: (data?: Record<string, unknown>) => void;
   querySmartCheckout: ((callback?: (r?: SmartCheckoutResult) => void) => Promise<SmartCheckoutResult | undefined>);
   smartCheckoutResult: SmartCheckoutResult | undefined;
   fundingRoutes: FundingRoute[];
-  disabledPaymentTypes: PaymentTypes[]
+  disabledPaymentTypes: SalePaymentTypes[]
 };
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -136,15 +136,15 @@ export function SaleContextProvider(props: {
     recipientAddress: '',
   });
 
-  const [paymentMethod, setPaymentMethod] = useState<PaymentTypes | undefined>(
+  const [paymentMethod, setPaymentMethod] = useState<SalePaymentTypes | undefined>(
     undefined,
   );
 
   const [fundingRoutes, setFundingRoutes] = useState<FundingRoute[]>([]);
-  const [disabledPaymentTypes, setDisabledPaymentTypes] = useState<PaymentTypes[]>([]);
+  const [disabledPaymentTypes, setDisabledPaymentTypes] = useState<SalePaymentTypes[]>([]);
 
   const goBackToPaymentMethods = useCallback(
-    (type?: PaymentTypes | undefined, showInsufficientCoinsBanner?: boolean) => {
+    (type?: SalePaymentTypes | undefined, showInsufficientCoinsBanner?: boolean) => {
       setPaymentMethod(type);
       viewDispatch({
         payload: {
@@ -190,7 +190,7 @@ export function SaleContextProvider(props: {
 
   const sign = useCallback(
     async (
-      type: PaymentTypes,
+      type: SalePaymentTypes,
       callback?: (r?: SignResponse) => void,
     ): Promise<SignResponse | undefined> => {
       const response = await signOrder(type);
@@ -260,7 +260,7 @@ export function SaleContextProvider(props: {
   useEffect(() => {
     if (!smartCheckoutError) return;
     if ((smartCheckoutError.data?.error as Error)?.message === SmartCheckoutErrorTypes.FRACTIONAL_BALANCE_BLOCKED) {
-      setDisabledPaymentTypes([PaymentTypes.CRYPTO]);
+      setDisabledPaymentTypes([SalePaymentTypes.CRYPTO]);
       goBackToPaymentMethods(undefined, true);
       return;
     }
@@ -278,7 +278,7 @@ export function SaleContextProvider(props: {
       return;
     }
     if (smartCheckoutResult.sufficient) {
-      sign(PaymentTypes.CRYPTO);
+      sign(SalePaymentTypes.CRYPTO);
       viewDispatch({
         payload: {
           type: ViewActions.UPDATE_VIEW,
@@ -308,7 +308,7 @@ export function SaleContextProvider(props: {
         default:
           setFundingRoutes([]);
           setPaymentMethod(undefined);
-          setDisabledPaymentTypes([PaymentTypes.CRYPTO]);
+          setDisabledPaymentTypes([SalePaymentTypes.CRYPTO]);
           goBackToPaymentMethods(undefined, true);
           break;
       }

packages/checkout/widgets-lib/src/widgets/sale/hooks/useSaleEvents.ts

@@ -1,5 +1,6 @@
 import { useContext } from 'react';
 import { StandardAnalyticsActions } from '@imtbl/react-analytics';
+import { SalePaymentTypes } from '@imtbl/checkout-sdk';
 import {
   UserJourney,
   useAnalytics,
@@ -112,7 +113,7 @@ export const useSaleEvent = () => {
     sendSaleTransactionSuccessEvent(eventTarget, paymentMethod, transactions);
   };
 
-  const sendSelectedPaymentMethod = (type: string, screen: string) => {
+  const sendSelectedPaymentMethod = (type: SalePaymentTypes, screen: string) => {
     track({
       ...commonProps,
       screen: toPascalCase(screen),

packages/checkout/widgets-lib/src/widgets/sale/hooks/useSignOrder.ts

@@ -1,12 +1,11 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import { useCallback, useState } from 'react';
-import { SaleItem } from '@imtbl/checkout-sdk';
+import { SaleItem, SalePaymentTypes } from '@imtbl/checkout-sdk';
 
 import { Environment } from '@imtbl/config';
 import {
   SignResponse,
   SignOrderInput,
-  PaymentTypes,
   SignedOrderProduct,
   SignOrderError,
   ExecuteOrderResponse,
@@ -231,7 +230,7 @@ export const useSignOrder = (input: SignOrderInput) => {
   );
 
   const sign = useCallback(
-    async (paymentType: PaymentTypes): Promise<SignResponse | undefined> => {
+    async (paymentType: SalePaymentTypes): Promise<SignResponse | undefined> => {
       try {
         const data: SignApiRequest = {
           recipient_address: recipientAddress,

packages/checkout/widgets-lib/src/widgets/sale/types.ts

@@ -1,11 +1,6 @@
 import { Web3Provider } from '@ethersproject/providers';
 import { SaleItem } from '@imtbl/checkout-sdk';
 
-export enum PaymentTypes {
-  CRYPTO = 'crypto',
-  FIAT = 'fiat',
-}
-
 export type SignedOrderProduct = {
   productId: string;
   qty: number;

packages/checkout/widgets-lib/src/widgets/sale/views/PaymentMethods.tsx

@@ -2,6 +2,7 @@ import { Banner, Box, Heading } from '@biom3/react';
 import { useContext, useEffect } from 'react';
 
 import { useTranslation } from 'react-i18next';
+import { SalePaymentTypes } from '@imtbl/checkout-sdk';
 import { FooterLogo } from '../../../components/Footer/FooterLogo';
 import { HeaderNavigation } from '../../../components/Header/HeaderNavigation';
 import { SimpleLayout } from '../../../components/SimpleLayout/SimpleLayout';
@@ -15,7 +16,6 @@ import {
 import { PaymentOptions } from '../components/PaymentOptions';
 import { useSaleContext } from '../context/SaleContextProvider';
 import { useSaleEvent } from '../hooks/useSaleEvents';
-import { PaymentTypes } from '../types';
 
 export function PaymentMethods() {
   const { t } = useTranslation();
@@ -25,14 +25,14 @@ export function PaymentMethods() {
   } = useSaleContext();
   const { sendPageView, sendCloseEvent, sendSelectedPaymentMethod } = useSaleEvent();
 
-  const handleOptionClick = (type: PaymentTypes) => setPaymentMethod(type);
+  const handleOptionClick = (type: SalePaymentTypes) => setPaymentMethod(type);
 
   useEffect(() => {
     if (paymentMethod) {
       sendSelectedPaymentMethod(paymentMethod, SaleWidgetViews.PAYMENT_METHODS);
     }
 
-    if (paymentMethod === PaymentTypes.FIAT) {
+    if (paymentMethod === SalePaymentTypes.FIAT) {
       sign(paymentMethod, () => {
         viewDispatch({
           payload: {
@@ -55,7 +55,7 @@ export function PaymentMethods() {
       });
     }
 
-    if (paymentMethod === PaymentTypes.CRYPTO) {
+    if (paymentMethod === SalePaymentTypes.CRYPTO) {
       viewDispatch({
         payload: {
           type: ViewActions.UPDATE_VIEW,

packages/checkout/widgets-lib/src/widgets/sale/views/SaleErrorView.tsx

@@ -1,9 +1,10 @@
 import { BaseTokens } from '@biom3/design-tokens';
 import { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
+import { SalePaymentTypes } from '@imtbl/checkout-sdk';
 import { StatusType } from '../../../components/Status/StatusType';
 import { StatusView, StatusViewProps } from '../../../components/Status/StatusView';
-import { PaymentTypes, SaleErrorTypes } from '../types';
+import { SaleErrorTypes } from '../types';
 import { useSaleContext } from '../context/SaleContextProvider';
 import { sendSaleWidgetCloseEvent } from '../SaleWidgetEvents';
 import { EventTargetContext } from '../../../context/event-target-context/EventTargetContext';
@@ -69,7 +70,7 @@ export function SaleErrorView({ errorType = SaleErrorTypes.DEFAULT, biomeTheme }
     },
     [SaleErrorTypes.WALLET_REJECTED]: {
       onActionClick: () => {
-        goBackToPaymentMethods(PaymentTypes.CRYPTO);
+        goBackToPaymentMethods(SalePaymentTypes.CRYPTO);
       },
       onSecondaryActionClick: closeWidget,
       statusType: StatusType.INFORMATION,