logic for triggering new payment select modal

examples/react/src/components/Connected.tsx

@@ -7,7 +7,7 @@ import {
   validateEthProof,
   getModalPositionCss
 } from '@0xsequence/kit'
-import { useCheckoutModal, useAddFundsModal } from '@0xsequence/kit-checkout'
+import { useCheckoutModal, useAddFundsModal, useSelectPaymentModal } from '@0xsequence/kit-checkout'
 import { CardButton, Header } from '@0xsequence/kit-example-shared-components'
 import { useOpenWalletModal } from '@0xsequence/kit-wallet'
 import { allNetworks, ChainId } from '@0xsequence/network'
@@ -38,6 +38,7 @@ export const Connected = () => {
   const { setOpenWalletModal } = useOpenWalletModal()
   const { triggerCheckout } = useCheckoutModal()
   const { triggerAddFunds } = useAddFundsModal()
+  const { openSelectPaymentModal } = useSelectPaymentModal()
   const { data: walletClient } = useWalletClient()
   const storage = useStorage()
 
@@ -242,6 +243,10 @@ export const Connected = () => {
     setIsCheckoutInfoModalOpen(true)
   }
 
+  const onClickSelectPayment = () => {
+    openSelectPaymentModal({})
+  }
+
   const onCheckoutInfoConfirm = () => {
     setIsCheckoutInfoModalOpen(false)
     if (checkoutOrderId !== '' && checkoutTokenContractAddress !== '' && checkoutTokenId !== '') {
@@ -376,6 +381,12 @@ export const Connected = () => {
                   description="Set orderbook order id, token contract address and token id to test checkout (on Polygon)"
                   onClick={onClickCheckout}
                 />
+
+                <CardButton
+                  title="Select Payment Method"
+                  description="Purchase an NFT through various purchase methods"
+                  onClick={onClickSelectPayment}
+                />
               </>
             )}
           </Box>

packages/checkout/src/contexts/SelectPaymentModal.ts

@@ -0,0 +1,13 @@
+import { createGenericContext } from './genericContext'
+
+export interface SelectPaymentSettings {
+  // TODO: add options for each option type....
+}
+
+type SelectPaymentModalContext = {
+  openSelectPaymentModal: (settings: SelectPaymentSettings) => void
+  closeSelectPaymentModal: () => void
+  selectPaymentSettings?: SelectPaymentSettings
+}
+
+export const [useSelectPaymentContext, SelectPaymentContextProvider] = createGenericContext<SelectPaymentModalContext>()

packages/checkout/src/contexts/index.ts

@@ -1,3 +1,4 @@
 export * from './AddFundsModal'
 export * from './CheckoutModal'
 export * from './Navigation'
+export * from './SelectPaymentModal'

packages/checkout/src/hooks/index.ts

@@ -4,3 +4,4 @@ export * from './useNavigation'
 export * from './useModalTheme'
 export * from './useCheckoutWhitelistStatus'
 export * from './useSardineClientToken'
+export * from './useSelectPaymentModal'

packages/checkout/src/hooks/useSelectPaymentModal.ts

@@ -0,0 +1,7 @@
+import { useSelectPaymentContext } from '../contexts/SelectPaymentModal'
+
+export const useSelectPaymentModal = () => {
+  const { openSelectPaymentModal, closeSelectPaymentModal, selectPaymentSettings } = useSelectPaymentContext()
+
+  return { openSelectPaymentModal, closeSelectPaymentModal, selectPaymentSettings }
+}

packages/checkout/src/index.ts

@@ -4,6 +4,7 @@ export { KitCheckoutProvider } from './shared/components/KitCheckoutProvider'
 // Hooks
 export { useCheckoutModal } from './hooks/useCheckoutModal'
 export { useAddFundsModal } from './hooks/useAddFundsModal'
+export { useSelectPaymentModal } from './hooks/useSelectPaymentModal'
 export { useCheckoutWhitelistStatus } from './hooks/useCheckoutWhitelistStatus'
 
 export { type CheckoutSettings } from './contexts/CheckoutModal'

packages/checkout/src/shared/components/KitCheckoutProvider.tsx

@@ -13,10 +13,19 @@ import {
   CheckoutModalContextProvider,
   CheckoutSettings,
   AddFundsContextProvider,
-  AddFundsSettings
+  AddFundsSettings,
+  SelectPaymentContextProvider,
+  SelectPaymentSettings
 } from '../../contexts'
 import { NavigationHeader } from '../../shared/components/NavigationHeader'
-import { PendingTransaction, TransactionError, TransactionSuccess, CheckoutSelection, AddFundsContent } from '../../views'
+import {
+  PendingTransaction,
+  TransactionError,
+  TransactionSuccess,
+  CheckoutSelection,
+  AddFundsContent,
+  PaymentSelection,
+} from '../../views'
 
 export type KitCheckoutProvider = {
   children: React.ReactNode
@@ -36,7 +45,9 @@ export const KitCheckoutContent = ({ children }: KitCheckoutProvider) => {
   const { theme, position } = useTheme()
   const [openCheckoutModal, setOpenCheckoutModal] = useState<boolean>(false)
   const [openAddFundsModal, setOpenAddFundsModal] = useState<boolean>(false)
+  const [openPaymentSelectionModal, setOpenPaymentSelectionModal] = useState<boolean>(false)
   const [settings, setSettings] = useState<CheckoutSettings>()
+  const [selectPaymentSettings, setSelectPaymentSettings] = useState<SelectPaymentSettings>()
   const [addFundsSettings, setAddFundsSettings] = useState<AddFundsSettings>()
   const [history, setHistory] = useState<History>([])
 
@@ -78,6 +89,15 @@ export const KitCheckoutContent = ({ children }: KitCheckoutProvider) => {
     setOpenAddFundsModal(false)
   }
 
+  const openSelectPaymentModal = (settings: SelectPaymentSettings) => {
+    setSelectPaymentSettings(settings)
+    setOpenPaymentSelectionModal(true)
+  }
+
+  const closeSelectPaymentModal = () => {
+    setOpenPaymentSelectionModal(false)
+  }
+
   const getCheckoutContent = () => {
     const { location } = navigation
     switch (location) {
@@ -127,75 +147,100 @@ export const KitCheckoutContent = ({ children }: KitCheckoutProvider) => {
   }
 
   useEffect(() => {
-    if (openCheckoutModal || openAddFundsModal) {
+    if (openCheckoutModal || openAddFundsModal || openPaymentSelectionModal) {
       setHistory([])
     }
-  }, [openCheckoutModal, openAddFundsModal])
+  }, [openCheckoutModal, openAddFundsModal, openPaymentSelectionModal])
 
   return (
-    <AddFundsContextProvider
+    <SelectPaymentContextProvider
       value={{
-        triggerAddFunds,
-        closeAddFunds,
-        addFundsSettings
+        openSelectPaymentModal,
+        closeSelectPaymentModal,
+        selectPaymentSettings
       }}
     >
-      <CheckoutModalContextProvider
+      <AddFundsContextProvider
         value={{
-          triggerCheckout,
-          closeCheckout,
-          settings,
-          theme
+          triggerAddFunds,
+          closeAddFunds,
+          addFundsSettings
         }}
       >
-        <NavigationContextProvider value={{ history, setHistory, defaultLocation: getDefaultLocation() }}>
-          <div id="kit-checkout">
-            <ThemeProvider root="#kit-checkout" scope="kit" theme={theme}>
-              <AnimatePresence>
-                {openCheckoutModal && (
-                  <Modal
-                    contentProps={{
-                      style: {
-                        maxWidth: '400px',
-                        height: 'auto',
-                        ...getModalPositionCss(position)
-                      }
-                    }}
-                    scroll={false}
-                    backdropColor="backgroundBackdrop"
-                    onClose={() => setOpenCheckoutModal(false)}
-                  >
-                    <Box id="sequence-kit-checkout-content">
-                      {getCheckoutHeader()}
-                      {getCheckoutContent()}
-                    </Box>
-                  </Modal>
-                )}
-                {openAddFundsModal && (
-                  <Modal
-                    contentProps={{
-                      style: {
-                        maxWidth: '400px',
-                        height: 'auto',
-                        ...getModalPositionCss(position)
-                      }
-                    }}
-                    scroll={false}
-                    backdropColor="backgroundBackdrop"
-                    onClose={() => setOpenAddFundsModal(false)}
-                  >
-                    <Box id="sequence-kit-add-funds-content">
-                      {getAddFundsHeader()}
-                      {getAddFundsContent()}
-                    </Box>
-                  </Modal>
-                )}
-              </AnimatePresence>
-            </ThemeProvider>
-          </div>
-          {children}
-        </NavigationContextProvider>
-      </CheckoutModalContextProvider>
-    </AddFundsContextProvider>
+        <CheckoutModalContextProvider
+          value={{
+            triggerCheckout,
+            closeCheckout,
+            settings,
+            theme
+          }}
+        >
+          <NavigationContextProvider value={{ history, setHistory, defaultLocation: getDefaultLocation() }}>
+            <div id="kit-checkout">
+              <ThemeProvider root="#kit-checkout" scope="kit" theme={theme}>
+                <AnimatePresence>
+                  {openCheckoutModal && (
+                    <Modal
+                      contentProps={{
+                        style: {
+                          maxWidth: '400px',
+                          height: 'auto',
+                          ...getModalPositionCss(position)
+                        }
+                      }}
+                      scroll={false}
+                      backdropColor="backgroundBackdrop"
+                      onClose={() => setOpenCheckoutModal(false)}
+                    >
+                      <Box id="sequence-kit-checkout-content">
+                        {getCheckoutHeader()}
+                        {getCheckoutContent()}
+                      </Box>
+                    </Modal>
+                  )}
+                  {openAddFundsModal && (
+                    <Modal
+                      contentProps={{
+                        style: {
+                          maxWidth: '400px',
+                          height: 'auto',
+                          ...getModalPositionCss(position)
+                        }
+                      }}
+                      scroll={false}
+                      backdropColor="backgroundBackdrop"
+                      onClose={() => setOpenAddFundsModal(false)}
+                    >
+                      <Box id="sequence-kit-add-funds-content">
+                        {getAddFundsHeader()}
+                        {getAddFundsContent()}
+                      </Box>
+                    </Modal>
+                  )}
+                  {openPaymentSelectionModal && (
+                    <Modal
+                      contentProps={{
+                        style: {
+                          maxWidth: '400px',
+                          height: 'auto',
+                          ...getModalPositionCss(position)
+                        }
+                      }}
+                      backdropColor="backgroundBackdrop"
+                      onClose={() => setOpenPaymentSelectionModal(false)}
+                    >
+                      <Box id="sequence-kit-payment-selection-content">
+                        <PaymentSelection />
+                      </Box>
+                    </Modal>
+                  )}
+                </AnimatePresence>
+              </ThemeProvider>
+            </div>
+            {children}
+          </NavigationContextProvider>
+        </CheckoutModalContextProvider>
+      </AddFundsContextProvider>
+    </SelectPaymentContextProvider>
   )
 }

packages/checkout/src/views/PaymentSelection/index.tsx

@@ -0,0 +1,36 @@
+import { Box, Text } from '@0xsequence/design-system'
+import { NavigationHeader } from '../../shared/components/NavigationHeader'
+import { HEADER_HEIGHT } from '../../constants'
+
+export const PaymentSelection = () => {
+  return (
+    <>
+      <PaymentSelectionHeader />
+      <PaymentSelectionContent />
+    </>
+  )
+}
+
+export const PaymentSelectionHeader = () => {
+  return (
+    <NavigationHeader primaryText="Select Payment Method" />
+  )
+}
+
+export const PaymentSelectionContent = () => {
+  return (
+    <Box
+      paddingTop="0"
+      paddingX="5"
+      paddingBottom="5"
+      style={{
+        marginTop: HEADER_HEIGHT
+      }}
+    >
+      <Text color="text100">Payment Selection Content</Text>
+      <Text color="text100">Payment Selection Content</Text>
+      <Text color="text100">Payment Selection Content</Text>
+      <Text color="text100">Payment Selection Content</Text>
+    </Box>
+  )
+}

packages/checkout/src/views/index.ts

@@ -3,3 +3,4 @@ export * from './TransactionSuccess'
 export * from './TransactionError'
 export * from './CheckoutSelection'
 export * from './AddFunds'
+export * from './PaymentSelection'