feature(unlock-app): respecting the order when set in settings (#13334)

* respecting the order when set in settings * toggling tab to close * adding ordering in the checkout builder
unlock-protocol · Feb 11, 2024 · d91c413 · d91c413
1 parent 8dc33fc
commit d91c413
Show file tree

Hide file tree

Showing 5 changed files with 255 additions and 155 deletions.
diff --git a/packages/core/src/schema.ts b/packages/core/src/schema.ts
@@ -51,6 +51,7 @@ export const MetadataInput = z.object({
 export type MetadataInputType = z.infer<typeof MetadataInput>
 
 export const PaywallLockConfig = z.object({
+  order: z.number().int().optional(),
   name: z
     .string({
       description: 'Name of the lock to display.',

diff --git a/packages/ui/lib/components/Tabs/Tabs.tsx b/packages/ui/lib/components/Tabs/Tabs.tsx
@@ -158,7 +158,7 @@ const Tab = ({
           open={isOpen}
           scrollIntoView={scrollIntoView}
           onClick={() => {
-            handleChange(tabNumber)
+            handleChange(isOpen ? 0 : tabNumber)
           }}
         />
         <TabContent open={isOpen}>

diff --git a/unlock-app/src/components/content/event/Registration/RegistrationCard.tsx b/unlock-app/src/components/content/event/Registration/RegistrationCard.tsx
@@ -55,21 +55,28 @@ export const RegistrationCard = ({
   // Multiple locks!
   return (
     <Card className="grid gap-4 mt-10 lg:mt-0">
-      {Object.keys(checkoutConfig.config.locks)?.map((lockAddress: string) => {
-        return (
-          <LockPriceDetails
-            key={lockAddress}
-            lockAddress={lockAddress}
-            network={
-              (checkoutConfig.config.locks[
-                Object.keys(checkoutConfig.config.locks)[0]
-              ].network || checkoutConfig.config.network)!
-            }
-            lockCheckoutConfig={checkoutConfig.config.locks[lockAddress]}
-            showContract
-          />
-        )
-      })}
+      {Object.keys(checkoutConfig.config.locks)
+        ?.sort((l, m) => {
+          return (
+            (checkoutConfig.config.locks[l].order || 0) -
+            (checkoutConfig.config.locks[m].order || 0)
+          )
+        })
+        ?.map((lockAddress: string) => {
+          return (
+            <LockPriceDetails
+              key={lockAddress}
+              lockAddress={lockAddress}
+              network={
+                (checkoutConfig.config.locks[
+                  Object.keys(checkoutConfig.config.locks)[0]
+                ].network || checkoutConfig.config.network)!
+              }
+              lockCheckoutConfig={checkoutConfig.config.locks[lockAddress]}
+              showContract
+            />
+          )
+        })}
       <EmbeddedCheckout checkoutConfig={checkoutConfig} refresh={refresh} />
     </Card>
   )

diff --git a/unlock-app/src/components/interface/checkout/main/Select.tsx b/unlock-app/src/components/interface/checkout/main/Select.tsx
@@ -191,30 +191,36 @@ export function Select({ checkoutService, injectedProvider }: Props) {
   const [state, send] = useActor(checkoutService)
   const { paywallConfig, lock: selectedLock } = state.context
   const [lock, setLock] = useState<LockState | undefined>(selectedLock)
+
   const { isLoading: isLocksLoading, data: locks } = useQuery(
     ['locks', JSON.stringify(paywallConfig)],
     async () => {
       const items = await Promise.all(
-        Object.entries(paywallConfig.locks).map(async ([lock, props]) => {
-          const networkId: number = props.network || paywallConfig.network || 1
-
-          const lockData = await web3Service.getLock(lock, networkId)
-          const fiatPricing = await getLockUsdPrice({
-            network: networkId,
-            currencyContractAddress: lockData?.currencyContractAddress,
-            amount: Number(lockData.keyPrice),
+        Object.entries(paywallConfig.locks)
+          .sort(([, l], [, m]) => {
+            return (l.order || 0) - (m.order || 0)
+          })
+          .map(async ([lock, props]) => {
+            const networkId: number =
+              props.network || paywallConfig.network || 1
+
+            const lockData = await web3Service.getLock(lock, networkId)
+            const fiatPricing = await getLockUsdPrice({
+              network: networkId,
+              currencyContractAddress: lockData?.currencyContractAddress,
+              amount: Number(lockData.keyPrice),
+            })
+
+            return {
+              ...props,
+              ...lockData,
+              name: props.name || lockData.name,
+              network: networkId,
+              address: lock,
+              fiatPricing,
+              isSoldOut: numberOfAvailableKeys(lockData) <= 0,
+            } as LockState
           })
-
-          return {
-            ...props,
-            ...lockData,
-            name: props.name || lockData.name,
-            network: networkId,
-            address: lock,
-            fiatPricing,
-            isSoldOut: numberOfAvailableKeys(lockData) <= 0,
-          } as LockState
-        })
       )
 
       const locks = items?.filter(