fix(native-app): more license fixes (#17699)

* fix: spacing for license info and add to wallet button * feat: add feature flag to show/hide add to wallet button * fix: spacing on license card
island-is · Jan 28, 2025 · d0b3355 · d0b3355
1 parent 414edc7
commit d0b3355
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 14 deletions.
diff --git a/apps/native/app/src/screens/wallet-pass/wallet-pass.tsx b/apps/native/app/src/screens/wallet-pass/wallet-pass.tsx
@@ -149,6 +149,10 @@ export const WalletPassScreen: NavigationFunctionComponent<{
   const intl = useIntl()
   const [addingToWallet, setAddingToWallet] = useState(false)
   const isBarcodeEnabled = useFeatureFlag('isBarcodeEnabled', false)
+  const isAddToWalletButtonEnabled = useFeatureFlag(
+    'isAddToWalletButtonEnabled',
+    true,
+  )
   const fadeInAnim = useRef(new Animated.Value(0)).current
   const isConnected = useOfflineStore(({ isConnected }) => isConnected)
 
@@ -183,15 +187,27 @@ export const WalletPassScreen: NavigationFunctionComponent<{
   const informationTopSpacing =
     (allowLicenseBarcode && ((loading && !data?.barcode) || data?.barcode)) ||
     ((!isConnected || res.error) && isBarcodeEnabled)
-      ? barcodeHeight + LICENSE_CARD_ROW_GAP + theme.spacing[5]
+      ? barcodeHeight + LICENSE_CARD_ROW_GAP + theme.spacing[4]
       : theme.spacing[2]
 
+  // Calculate bottom inset based on the content
+  const bottomInset =
+    informationTopSpacing || (!isConnected && isBarcodeEnabled)
+      ? isTablet
+        ? 340
+        : !allowLicenseBarcode
+        ? 80 // less spacing needed if no barcode available (expired or not available)
+        : isAddToWalletButtonEnabled
+        ? 182
+        : 192 // Extra spacing needed at bottom if no button is shown
+      : 0
+
   const [key, setKey] = useState(0)
   useEffect(() => {
     // Used to rerender ScrollView to have correct ContentInset based on barcode/no barcode
     // Remove once barcodes are live
     setKey((prev) => prev + 1)
-  }, [isBarcodeEnabled])
+  }, [isBarcodeEnabled, isAddToWalletButtonEnabled])
 
   const fadeIn = () => {
     Animated.timing(fadeInAnim, {
@@ -425,12 +441,7 @@ export const WalletPassScreen: NavigationFunctionComponent<{
       </LicenseCardWrapper>
       <Information
         contentInset={{
-          bottom:
-            informationTopSpacing || (!isConnected && isBarcodeEnabled)
-              ? isTablet
-                ? 340
-                : 162
-              : 0,
+          bottom: bottomInset,
         }}
         key={key}
         topSpacing={informationTopSpacing}
@@ -481,7 +492,7 @@ export const WalletPassScreen: NavigationFunctionComponent<{
           )}
         </SafeAreaView>
 
-        {pkPassAllowed && isBarcodeEnabled && (
+        {isAddToWalletButtonEnabled && pkPassAllowed && isBarcodeEnabled && (
           <ButtonWrapper>{renderButtons()}</ButtonWrapper>
         )}
         {isAndroid && <Spacer />}
@@ -491,7 +502,7 @@ export const WalletPassScreen: NavigationFunctionComponent<{
           The reason for the animation is to avoid rendering flicker.
           The component will on first render the isBarcodeEnabled flag to be false and then set it to true after Configcat has fetched the flag.
        */}
-      {pkPassAllowed && !isBarcodeEnabled && (
+      {isAddToWalletButtonEnabled && pkPassAllowed && !isBarcodeEnabled && (
         <ButtonWrapper floating>
           <Animated.View style={{ opacity: fadeInAnim }}>
             {renderButtons()}

diff --git a/apps/native/app/src/ui/lib/card/license-card.tsx b/apps/native/app/src/ui/lib/card/license-card.tsx
@@ -37,10 +37,10 @@ const Host = styled(Animated.View)`
   justify-content: center;
 `
 
-const ContentContainer = styled.View`
+const ContentContainer = styled.View<{ marginBottom: number }>`
   flex-direction: row;
   justify-content: space-between;
-  margin-bottom: ${({ theme }) => theme.spacing[1]}px;
+  margin-bottom: ${({ marginBottom }) => marginBottom}px;
 `
 
 const BarcodeWrapper = styled.View<{ minHeight?: number }>`
@@ -182,7 +182,7 @@ export function LicenseCard({
         color={backgroundColor}
         resizeMode="cover"
       />
-      <ContentContainer>
+      <ContentContainer marginBottom={barcode ? theme.spacing[1] : 0}>
         <Content>
           <Title
             numberOfLines={1}
@@ -202,7 +202,6 @@ export function LicenseCard({
                   width: 62,
                   borderRadius: 4,
                   opacity: 0.5,
-                  marginBottom: theme.spacing.smallGutter,
                 }}
               />
             ) : (