Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Payment card / Subscription] Implement “Subscription details” section (UI) #42975

Merged
merged 18 commits into from
Jun 4, 2024
Merged

[Payment card / Subscription] Implement “Subscription details” section (UI) #42975

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
b43b00a
add translations
JKobrynski May 29, 2024
439794e
start implementing section UI
JKobrynski May 29, 2024
432d883
Merge branch 'createYourPlanSection' into createSubscriptionDetailsSe…
JKobrynski May 29, 2024
d6e9e0e
add heads up section
JKobrynski May 29, 2024
6222434
add new illustrations
JKobrynski May 31, 2024
153daee
implement Optionitem component
JKobrynski May 31, 2024
ca23503
implement OptionsPicker component
JKobrynski May 31, 2024
a4fa1e7
implement mobile subscription details section and subscription size part
JKobrynski Jun 3, 2024
e4374cb
remove subscription size section from pay per use variant
JKobrynski Jun 3, 2024
c6a24ef
change OptionItems layout
JKobrynski Jun 3, 2024
6f1ab30
make updates based on comments
JKobrynski Jun 3, 2024
ded5927
add generic typing to OptionsPicker, unify styling
JKobrynski Jun 3, 2024
f29db84
Merge branch 'main' into createSubscriptionDetailsSection
JKobrynski Jun 4, 2024
67507bb
apply suggested changes
JKobrynski Jun 4, 2024
e09329d
change border radius and icon size
JKobrynski Jun 4, 2024
37245b5
Merge branch 'main' into createSubscriptionDetailsSection
JKobrynski Jun 4, 2024
42de07c
remove borderedContentCardFocused style
JKobrynski Jun 4, 2024
352e354
add light theme ExpensifyApproved! logo
JKobrynski Jun 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 20 additions & 13 deletions src/pages/settings/Subscription/SubscriptionDetails/index.native.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,25 @@ function SubscriptionDetails() {

const [account] = useOnyx(ONYXKEYS.ACCOUNT);

// This section is only shown when the subscription is annual
let subscripitionSizeSection = null;
JKobrynski marked this conversation as resolved.
Show resolved Hide resolved

if (privateSubscription?.type === CONST.SUBSCRIPTION.TYPE.ANNUAL) {
subscripitionSizeSection = privateSubscription?.userCount ? (
<MenuItemWithTopDescription
description={translate('subscription.details.subscriptionSize')}
title={`${privateSubscription?.userCount}`}
wrapperStyle={styles.sectionMenuItemTopDescription}
style={styles.mt5}
/>
) : (
<Text style={styles.mt5}>
<Text style={styles.h4}>{translate('subscription.details.headsUpTitle')}</Text>
<Text style={styles.textLabelSupporting}>{translate('subscription.details.headsUpBody')}</Text>
</Text>
);
}

return (
<Section
title={translate('subscription.details.title')}
Expand Down Expand Up @@ -53,19 +72,7 @@ function SubscriptionDetails() {
isDisabled
/>
)}
{privateSubscription?.userCount ? (
<MenuItemWithTopDescription
description={translate('subscription.details.subscriptionSize')}
title={`${privateSubscription?.userCount}`}
wrapperStyle={styles.sectionMenuItemTopDescription}
style={styles.mt5}
/>
) : (
<Text style={styles.mt5}>
<Text style={styles.h4}>{translate('subscription.details.headsUpTitle')}</Text>
<Text style={styles.textLabelSupporting}>{translate('subscription.details.headsUpBody')}</Text>
</Text>
)}
{subscripitionSizeSection}
</>
)}
</Section>
Expand Down
37 changes: 21 additions & 16 deletions src/pages/settings/Subscription/SubscriptionDetails/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,27 +39,32 @@ function SubscriptionDetails() {
setSelectedOption(option);
};

const subscriptionSizeSection = privateSubscription?.userCount ? (
<MenuItemWithTopDescription
description={translate('subscription.details.subscriptionSize')}
title={`${privateSubscription?.userCount}`}
wrapperStyle={styles.sectionMenuItemTopDescription}
style={styles.mt5}
/>
) : (
<>
// This section is only shown when the subscription is annual
let subscriptionSizeSection = null;
JKobrynski marked this conversation as resolved.
Show resolved Hide resolved

if (privateSubscription?.type === CONST.SUBSCRIPTION.TYPE.ANNUAL) {
subscriptionSizeSection = privateSubscription?.userCount ? (
<MenuItemWithTopDescription
amyevans marked this conversation as resolved.
Show resolved Hide resolved
description={translate('subscription.details.subscriptionSize')}
shouldShowRightIcon
title={`${privateSubscription?.userCount}`}
wrapperStyle={styles.sectionMenuItemTopDescription}
style={styles.mt5}
/>
<Text style={styles.mt2}>
<Text style={styles.h4}>{translate('subscription.details.headsUpTitle')}</Text>
<Text style={styles.textLabelSupporting}>{translate('subscription.details.headsUpBody')}</Text>
</Text>
</>
);
) : (
<>
<MenuItemWithTopDescription
description={translate('subscription.details.subscriptionSize')}
shouldShowRightIcon
wrapperStyle={styles.sectionMenuItemTopDescription}
style={styles.mt5}
/>
<Text style={styles.mt2}>
<Text style={styles.h4}>{translate('subscription.details.headsUpTitle')}</Text>
<Text style={styles.textLabelSupporting}>{translate('subscription.details.headsUpBody')}</Text>
</Text>
</>
);
}

return (
<Section
Expand Down
Loading