[NO-CHANGELOG] feat: primary revenue widget views - part 3 (#901)

Author: jhesgodi

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

@@ -330,6 +330,9 @@ export const text = {
         heading: 'Pay with your coins',
         caption: 'Using the coins balance in your wallet',
       },
+      button: {
+        buyNow: 'Buy now',
+      },
     },
     [PrimaryRevenueWidgetViews.PAY_WITH_CARD]: {
       header: {

packages/checkout/widgets-lib/src/widgets/primary-revenue/PrimaryRevenueWidget.tsx

@@ -21,6 +21,9 @@ import { PrimaryRevenueWidgetViews } from '../../context/view-context/PrimaryRev
 import { Item } from './types';
 import { widgetTheme } from '../../lib/theme';
 import { SharedContextProvider } from './context/SharedContextProvider';
+import { PaymentMethods } from './views/PaymentMethods';
+import { PayWithCard } from './views/PayWithCard';
+import { PayWithCoins } from './views/PayWithCoins';
 
 export interface PrimaryRevenueWidgetProps {
   config: StrongCheckoutWidgetsConfig;
@@ -36,15 +39,7 @@ export function PrimaryRevenueWidget(props: PrimaryRevenueWidgetProps) {
     config, amount, items, fromContractAddress, env, environmentId,
   } = props;
 
-  console.log(
-    '@@@ PrimaryRevenueWidget',
-    config,
-    amount,
-    items,
-    fromContractAddress,
-    env,
-    environmentId,
-  );
+  console.log('@@@ PrimaryRevenueWidget', config, amount, items, fromContractAddress, env, environmentId);
 
   const { connectLoaderState } = useContext(ConnectLoaderContext);
   const { checkout, provider } = connectLoaderState;
@@ -84,6 +79,7 @@ export function PrimaryRevenueWidget(props: PrimaryRevenueWidgetProps) {
       <ViewContext.Provider value={viewReducerValues}>
         <SharedContextProvider
           value={{
+            config,
             items,
             amount,
             fromContractAddress,
@@ -101,7 +97,13 @@ export function PrimaryRevenueWidget(props: PrimaryRevenueWidgetProps) {
           )}
           {viewState.view.type
             === PrimaryRevenueWidgetViews.PAYMENT_METHODS && (
-            <div>Payment methods</div>
+            <PaymentMethods />
+          )}
+          {viewState.view.type === PrimaryRevenueWidgetViews.PAY_WITH_CARD && (
+            <PayWithCard />
+          )}
+          {viewState.view.type === PrimaryRevenueWidgetViews.PAY_WITH_COINS && (
+            <PayWithCoins />
           )}
         </SharedContextProvider>
       </ViewContext.Provider>

packages/checkout/widgets-lib/src/widgets/primary-revenue/components/OrderItem.tsx

@@ -0,0 +1,31 @@
+import { MenuItem } from '@biom3/react';
+import { SignedOrderProduct } from '../types';
+
+export interface OrderItemProps {
+  item: SignedOrderProduct;
+}
+
+const CURRENCY_IMAGE_URL = {
+  eth: 'https://design-system.immutable.com/hosted-for-ds/currency-icons/currency--eth.svg',
+  usdc: 'https://design-system.immutable.com/hosted-for-ds/currency-icons/currency--usdc.svg',
+};
+
+export function OrderItem(props: OrderItemProps) {
+  const { item } = props;
+  const currencyIcon = CURRENCY_IMAGE_URL[item.currency.toLowerCase()] || CURRENCY_IMAGE_URL.eth;
+
+  return (
+    <MenuItem emphasized size="small">
+      <MenuItem.FramedImage imageUrl={item.image} />
+      <MenuItem.Label>{item.name}</MenuItem.Label>
+      <MenuItem.Caption>{item.description}</MenuItem.Caption>
+      {item.amount && (
+        <MenuItem.PriceDisplay
+          fiatAmount={item.amount.toString()}
+          price={`${item.currency} ${item.amount}`}
+          currencyImageUrl={currencyIcon}
+        />
+      )}
+    </MenuItem>
+  );
+}

packages/checkout/widgets-lib/src/widgets/primary-revenue/components/OrderList.tsx

@@ -0,0 +1,29 @@
+import { Box } from '@biom3/react';
+import { OrderItem } from './OrderItem';
+
+import { SignedOrderProduct } from '../types';
+
+export interface OrderListProps {
+  items: SignedOrderProduct[] | undefined;
+}
+
+export function OrderList(props: OrderListProps) {
+  const { items } = props;
+
+  return (
+    <Box
+      testId="order-list"
+      sx={{
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'flex-start',
+      }}
+    >
+      {items && items.map((item) => (
+        <OrderItem key={`${item.name}${item.tokenId[0]}`} item={item} />
+      ))}
+    </Box>
+  );
+}

packages/checkout/widgets-lib/src/widgets/primary-revenue/context/SharedContextProvider.tsx

@@ -12,8 +12,10 @@ import { PrimaryRevenueSuccess } from '@imtbl/checkout-widgets';
 import { Item, PaymentTypes, SignResponse } from '../types';
 import { useSignOrder } from '../hooks/useSignOrder';
 import { ConnectLoaderState } from '../../../context/connect-loader-context/ConnectLoaderContext';
+import { StrongCheckoutWidgetsConfig } from '../../../lib/withDefaultWidgetConfig';
 
 type SharedContextProps = {
+  config: StrongCheckoutWidgetsConfig;
   env: string;
   environmentId: string;
   items: Item[];
@@ -24,7 +26,7 @@ type SharedContextProps = {
 };
 
 type SharedContextValues = SharedContextProps & {
-  sign: (paymentType: PaymentTypes) => Promise<SignResponse | undefined>
+  sign: (paymentType: PaymentTypes) => Promise<SignResponse | undefined>;
   execute: () => Promise<PrimaryRevenueSuccess>;
   recipientAddress: string;
   signResponse: SignResponse | undefined;
@@ -43,6 +45,7 @@ const SharedContext = createContext<SharedContextValues>({
   sign: () => Promise.resolve(undefined),
   execute: () => Promise.resolve({} as PrimaryRevenueSuccess),
   signResponse: undefined,
+  config: {} as StrongCheckoutWidgetsConfig,
 });
 
 SharedContext.displayName = 'PrimaryRevenueSharedContext';
@@ -54,7 +57,14 @@ export function SharedContextProvider(props: {
   const {
     children,
     value: {
-      env, environmentId, items, amount, fromContractAddress, provider, checkout,
+      config,
+      env,
+      environmentId,
+      items,
+      amount,
+      fromContractAddress,
+      provider,
+      checkout,
     },
   } = props;
 
@@ -84,6 +94,7 @@ export function SharedContextProvider(props: {
 
   const values = useMemo(
     () => ({
+      config,
       items,
       amount,
       fromContractAddress,
@@ -96,7 +107,18 @@ export function SharedContextProvider(props: {
       checkout,
       recipientAddress,
     }),
-    [env, environmentId, items, amount, fromContractAddress, provider, checkout, recipientAddress, signResponse],
+    [
+      config,
+      env,
+      environmentId,
+      items,
+      amount,
+      fromContractAddress,
+      provider,
+      checkout,
+      recipientAddress,
+      signResponse,
+    ],
   );
 
   return (

packages/checkout/widgets-lib/src/widgets/primary-revenue/hooks/useSignOrder.ts

@@ -24,7 +24,11 @@ const X_IMMUTABLE_API_KEY = 'sk_imapik-Ekz6cLnnwREtqjGn$xo6_fb97b8';
 
 type SignApiResponse = {
   order: {
-    currency: string;
+    currency: {
+      name: string;
+      decimals: number;
+      erc20_address: string;
+    };
     currency_symbol: string;
     products: {
       detail: {
@@ -54,6 +58,22 @@ type SignApiResponse = {
   }[];
 };
 
+enum SignCurrencyFilter {
+  CONTRACT_ADDRESS = 'contract_address',
+  CURRENCY_SYMBOL = 'currency_symbol',
+}
+
+type SignApiRequest = {
+  recipient_address: string
+  currency_filter: SignCurrencyFilter;
+  currency_value: string
+  payment_type: string
+  products: {
+    product_id: string;
+    quantity: number
+  }[]
+};
+
 const toSignedProduct = (
   product: SignApiResponse['order']['products'][0],
   currency: string,
@@ -77,10 +97,13 @@ const toSignResponse = (
 
   return {
     order: {
-      currency: order.currency,
+      currency: {
+        name: order.currency.name,
+        erc20Address: order.currency.erc20_address,
+      },
       products: order.products.map((product) => toSignedProduct(
         product,
-        order.currency,
+        order.currency.name,
         items.find((item) => item.productId === product.product_id),
       )),
       totalAmount: Number(order.total_amount),
@@ -151,10 +174,11 @@ export const useSignOrder = (input: SignOrderInput) => {
         return undefined;
       }
 
-      const data = {
+      const data: SignApiRequest = {
         recipient_address: recipientAddress,
-        contractAddress: fromContractAddress,
         payment_type: paymentType,
+        currency_filter: SignCurrencyFilter.CONTRACT_ADDRESS,
+        currency_value: fromContractAddress,
         products: items.map((item) => ({
           product_id: item.productId,
           quantity: item.qty,

packages/checkout/widgets-lib/src/widgets/primary-revenue/types.ts

@@ -25,7 +25,10 @@ export type SignedOrderProduct = {
 };
 
 export type SignedOrder = {
-  currency: string;
+  currency: {
+    name: string;
+    erc20Address: string;
+  };
   totalAmount: number;
   products: SignedOrderProduct[];
 };

packages/checkout/widgets-lib/src/widgets/primary-revenue/views/PayWithCard.tsx

@@ -0,0 +1,42 @@
+/* eslint-disable no-console */
+import { BiomeCombinedProviders, Box } from '@biom3/react';
+import { BaseTokens, onDarkBase, onLightBase } from '@biom3/design-tokens';
+import { WidgetTheme } from '../../../lib';
+import { StrongCheckoutWidgetsConfig } from '../../../lib/withDefaultWidgetConfig';
+import { HeaderNavigation } from '../../../components/Header/HeaderNavigation';
+import { SimpleLayout } from '../../../components/SimpleLayout/SimpleLayout';
+import { useSharedContext } from '../context/SharedContextProvider';
+
+export interface PayWithCardProps {
+  config: StrongCheckoutWidgetsConfig;
+
+}
+
+export function PayWithCard() {
+  const { config: { theme } } = useSharedContext();
+
+  const biomeTheme: BaseTokens = theme.toLowerCase() === WidgetTheme.LIGHT.toLowerCase()
+    ? onLightBase
+    : onDarkBase;
+
+  return (
+    <BiomeCombinedProviders theme={{ base: biomeTheme }}>
+      <Box>
+        <SimpleLayout
+          header={(
+            <HeaderNavigation
+              showBack
+              title="Pay with Card"
+              onCloseButtonClick={() => {}}
+            />
+          )}
+          footerBackgroundColor="base.color.translucent.emphasis.200"
+        >
+          <Box>
+            Transak Iframe
+          </Box>
+        </SimpleLayout>
+      </Box>
+    </BiomeCombinedProviders>
+  );
+}