From d0b335576bead42d37c1432f985335f1cadbc71b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=9E=C3=B3rey=20J=C3=B3na?= <thoreyjona@gmail.com>
Date: Tue, 28 Jan 2025 17:31:31 +0000
Subject: [PATCH] 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
---
 .../src/screens/wallet-pass/wallet-pass.tsx   | 31 +++++++++++++------
 .../app/src/ui/lib/card/license-card.tsx      |  7 ++---
 2 files changed, 24 insertions(+), 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
index f1ab7762242a..8b600fdbcd05 100644
--- 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
index ef95e2d24654..a516d4004e2e 100644
--- 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,
                 }}
               />
             ) : (