Merge pull request #55117 from jayeshmangwani/subscription_plan_card_…

…ui_changes [CP Staging] Subscription plan card UI changes
Expensify · Jan 13, 2025 · b545bcf · b545bcf
2 parents c98f805 + c52c520
commit b545bcf
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 35 deletions.
diff --git a/src/pages/settings/Subscription/SubscriptionPlan/SubscriptionPlanCard.tsx b/src/pages/settings/Subscription/SubscriptionPlan/SubscriptionPlanCard.tsx
@@ -7,6 +7,7 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import {PressableWithFeedback} from '@components/Pressable';
 import SelectCircle from '@components/SelectCircle';
 import Text from '@components/Text';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
@@ -30,45 +31,45 @@ type SubscriptionPlanCardProps = {
 function SubscriptionPlanCard({plan, index, onPress}: SubscriptionPlanCardProps) {
     const styles = useThemeStyles();
     const theme = useTheme();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     return (
-        <View style={[styles.borderedContentCard, styles.flex1, styles.mt5, styles.p5, index === 0 && styles.mr3, plan.isSelected && styles.borderColorFocus]}>
-            <PressableWithFeedback
-                accessibilityLabel={plan.title}
-                wrapperStyle={[styles.flex1]}
-                onPress={() => onPress(plan.type)}
-            >
-                <View style={[styles.flexRow, styles.justifyContentBetween]}>
+        <PressableWithFeedback
+            accessibilityLabel={plan.title}
+            wrapperStyle={[styles.flexShrink1]}
+            style={[styles.borderedContentCard, styles.mt5, styles.flex1, !shouldUseNarrowLayout && index === 0 && styles.mr3, plan.isSelected && styles.borderColorFocus, styles.p5]}
+            onPress={() => onPress(plan.type)}
+        >
+            <View style={[styles.flexRow, styles.justifyContentBetween]}>
+                <Icon
+                    src={plan.src}
+                    width={variables.iconHeader}
+                    height={variables.iconHeader}
+                />
+                <View>
+                    <SelectCircle
+                        isChecked={plan.isSelected}
+                        selectCircleStyles={styles.sectionSelectCircle}
+                    />
+                </View>
+            </View>
+            <Text style={[styles.headerText, styles.mv2]}>{plan.title}</Text>
+            <Text style={[styles.textLabelSupporting, styles.mb2]}>{plan.description}</Text>
+            {plan.benefits.map((benefit) => (
+                <View
+                    style={[styles.flexRow, styles.alignItemsCenter, styles.mt2]}
+                    key={benefit}
+                >
                     <Icon
-                        src={plan.src}
-                        width={variables.iconHeader}
-                        height={variables.iconHeader}
+                        src={Expensicons.Checkmark}
+                        fill={theme.iconSuccessFill}
+                        width={variables.iconSizeSmall}
+                        height={variables.iconSizeSmall}
                     />
-                    <View>
-                        <SelectCircle
-                            isChecked={plan.isSelected}
-                            selectCircleStyles={styles.sectionSelectCircle}
-                        />
-                    </View>
+                    <Text style={[styles.textMicroSupporting, styles.ml2]}>{benefit}</Text>
                 </View>
-                <Text style={[styles.headerText, styles.mv2]}>{plan.title}</Text>
-                <Text style={[styles.textLabelSupporting, styles.mb2]}>{plan.description}</Text>
-                {plan.benefits.map((benefit) => (
-                    <View
-                        style={[styles.flexRow, styles.alignItemsCenter, styles.mt2]}
-                        key={benefit}
-                    >
-                        <Icon
-                            src={Expensicons.Checkmark}
-                            fill={theme.iconSuccessFill}
-                            width={variables.iconSizeSmall}
-                            height={variables.iconSizeSmall}
-                        />
-                        <Text style={[styles.textMicroSupporting, styles.ml2]}>{benefit}</Text>
-                    </View>
-                ))}
-            </PressableWithFeedback>
-        </View>
+            ))}
+        </PressableWithFeedback>
     );
 }
 

diff --git a/src/pages/workspace/upgrade/UpgradeIntro.tsx b/src/pages/workspace/upgrade/UpgradeIntro.tsx
@@ -46,7 +46,14 @@ function UpgradeIntro({feature, onUpgrade, buttonDisabled, loading, isCategorizi
         return `${convertToShortDisplayString(upgradePrice, upgradeCurrency)} `;
     }, [preferredCurrency, isCategorizing]);
 
-    if (!feature || !policyID) {
+    /**
+     * If the feature is null or there is no policyID, it indicates the user is not associated with any specific workspace.
+     * In this case, the generic upgrade view should be shown.
+     * However, the policyID check is only necessary when the user is not coming from the "Categorize" option.
+     * The "isCategorizing" flag is set to true when the user accesses the "Categorize" option in the Self-DM whisper.
+     * In such scenarios, a separate Categories upgrade UI is displayed.
+     */
+    if (!feature || (!isCategorizing && !policyID)) {
         return (
             <GenericFeaturesView
                 onUpgrade={onUpgrade}