[PAY-2277][PAY-2272] Fix purchase modaldrawer scroll and safe areas (#…

…6941)
AudiusProject · Dec 14, 2023 · b6a82b9 · b6a82b9
1 parent fe21499
commit b6a82b9
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 57 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/stems/src/components/Modal/ModalContentPages.tsx b/packages/stems/src/components/Modal/ModalContentPages.tsx
@@ -10,6 +10,8 @@ import { ModalContent } from './ModalContent'
 import styles from './ModalContentPages.module.css'
 import { ModalContentProps } from './types'
 
+const INNER_HEIGHT_PADDING = 100
+
 const defaultTransitions = {
   initial: { opacity: 1, transform: 'translate3d(0%, 0, 0)' },
   enter: { opacity: 1, transform: 'translate3d(0%, 0 ,0)' }
@@ -53,6 +55,14 @@ export const ModalContentPages = ({
     polyfill: ResizeObserver
   })
 
+  // A bit of a hack, but instead of resizing the height to the result from
+  // useMeasure, clamp it to the window height minus a padding.
+  // This makes it so that when inside a "Drawer," safe areas are respected.
+  const computedHeight = Math.min(
+    height,
+    window.innerHeight - INNER_HEIGHT_PADDING
+  )
+
   if (lastPage !== currentPage) {
     setTransitions(
       getSwipeTransitions(currentPage > lastPage ? 'forward' : 'back')
@@ -68,7 +78,7 @@ export const ModalContentPages = ({
       className={styles.transitionContainer}
       style={{
         width: width ? `${width}px` : '100%',
-        height: height ? `${height}px` : '100%'
+        height: computedHeight ? `${computedHeight}px` : '100%'
       }}
     >
       <Transition

diff --git a/packages/web/package.json b/packages/web/package.json
@@ -94,7 +94,7 @@
     "array-range": "1.0.1",
     "bitski": "0.10.9",
     "bn.js": "5.1.0",
-    "body-scroll-lock": "2.7.1",
+    "body-scroll-lock": "4.0.0-beta.0",
     "canvas-loop": "1.0.7",
     "chart.js": "2.9.3",
     "clamp": "1.0.1",

diff --git a/packages/web/src/components/drawer/Drawer.module.css b/packages/web/src/components/drawer/Drawer.module.css
@@ -19,8 +19,7 @@
 .fullDrawer {
   top: 0px;
   height: 100vh;
-  overflow-x: hidden;
-  overflow-y: scroll;
+  overflow: hidden;
   touch-action: auto;
 }
 

diff --git a/packages/web/src/components/premium-content-purchase-modal/PremiumContentPurchaseModal.tsx b/packages/web/src/components/premium-content-purchase-modal/PremiumContentPurchaseModal.tsx
@@ -16,7 +16,7 @@ import {
   PurchaseContentPage
 } from '@audius/common'
 import { USDC } from '@audius/fixed-decimal'
-import { Box, Flex } from '@audius/harmony'
+import { Flex } from '@audius/harmony'
 import {
   IconCart,
   ModalContentPages,
@@ -103,55 +103,53 @@ const RenderForm = ({
   const mobile = isMobile()
 
   return (
-    <ModalForm className={styles.root}>
-      <Box>
-        <ModalHeader
-          className={cn(styles.modalHeader, { [styles.mobile]: mobile })}
-          onClose={onClose}
-          showDismissButton={!mobile}
+    <ModalForm>
+      <ModalHeader
+        className={cn(styles.modalHeader, { [styles.mobile]: mobile })}
+        onClose={onClose}
+        showDismissButton={!mobile}
+      >
+        <Text
+          variant='label'
+          color='neutralLight2'
+          size='xLarge'
+          strength='strong'
+          className={styles.title}
         >
-          <Text
-            variant='label'
-            color='neutralLight2'
-            size='xLarge'
-            strength='strong'
-            className={styles.title}
-          >
-            <Icon size='large' icon={IconCart} />
-            {messages.completePurchase}
-          </Text>
-        </ModalHeader>
-        <ModalContentPages
-          contentClassName={styles.content}
-          className={styles.content}
-          currentPage={currentPageIndex}
-        >
-          <>
-            {stage !== PurchaseContentStage.FINISH ? (
-              <AudioMatchSection
-                amount={USDC(price / 100)
-                  .round()
-                  .toShorthand()}
+          <Icon size='large' icon={IconCart} />
+          {messages.completePurchase}
+        </Text>
+      </ModalHeader>
+      <ModalContentPages
+        contentClassName={styles.content}
+        className={styles.content}
+        currentPage={currentPageIndex}
+      >
+        <>
+          {stage !== PurchaseContentStage.FINISH ? (
+            <AudioMatchSection
+              amount={USDC(price / 100)
+                .round()
+                .toShorthand()}
+            />
+          ) : null}
+          <Flex p={mobile ? 'l' : 'xl'}>
+            <Flex direction='column' gap='xl' w='100%'>
+              <LockedTrackDetailsTile
+                track={track as unknown as Track}
+                owner={track.user}
+              />
+              <PurchaseContentFormFields
+                stage={stage}
+                purchaseSummaryValues={purchaseSummaryValues}
+                isUnlocking={isUnlocking}
+                price={price}
               />
-            ) : null}
-            <Flex p={mobile ? 'l' : 'xl'}>
-              <Flex direction='column' gap='xl' w='100%'>
-                <LockedTrackDetailsTile
-                  track={track as unknown as Track}
-                  owner={track.user}
-                />
-                <PurchaseContentFormFields
-                  stage={stage}
-                  purchaseSummaryValues={purchaseSummaryValues}
-                  isUnlocking={isUnlocking}
-                  price={price}
-                />
-              </Flex>
             </Flex>
-          </>
-          <USDCManualTransfer onClose={handleClose} amountInCents={price} />
-        </ModalContentPages>
-      </Box>
+          </Flex>
+        </>
+        <USDCManualTransfer onClose={handleClose} amountInCents={price} />
+      </ModalContentPages>
       <ModalFooter className={styles.footer}>
         {page === PurchaseContentPage.PURCHASE ? (
           <PurchaseContentFormFooter