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

Bugfix/4422 your plan show only on annual or monthly #4437

Merged
merged 12 commits into from
May 22, 2023
Merged

Bugfix/4422 your plan show only on annual or monthly #4437

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
7e1005c
Banner only appears on correct filtered option or yearly with communi…
srartese May 9, 2023
027b05b
Merge branch 'bugfix/4411-flashing-plan-banner' of github.com:kobotoo…
srartese May 9, 2023
2bcf0ab
Merge branch 'feature/billing' of github.com:kobotoolbox/kpi into bug…
srartese May 9, 2023
edae192
Merge branch 'feature/billing' into bugfix/4422-your-plan-show-only-o…
srartese May 10, 2023
dfccea0
Updated page to load on the subscribed filter if applicable and show …
srartese May 12, 2023
ac10c6c
Merge branch 'feature/billing' of github.com:kobotoolbox/kpi into bug…
srartese May 12, 2023
9e55483
Updated logic to add 'change plan' button and work with other updates
srartese May 12, 2023
0a4685f
add recurring price intervals to Product endpoint
LMNTL May 15, 2023
cd336aa
make /subscriptions/ endpoint return recurring intervals
LMNTL May 17, 2023
19a90f5
Updated useMemo and using new interval data
srartese May 17, 2023
05b5aa8
added back in hasActiveSubscription
srartese May 18, 2023
95607a6
Fixed banner not showing properly on canceled plans
srartese May 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
78 changes: 61 additions & 17 deletions jsapp/js/account/plan.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,13 +72,13 @@ function planReducer(state: PlanState, action: DataUpdates) {
return {
...state,
intervalFilter: 'month',
filterToggle: !state.filterToggle,
filterToggle: true,
};
case 'year':
return {
...state,
intervalFilter: 'year',
filterToggle: !state.filterToggle,
filterToggle: false,
};
default:
return state;
Expand All @@ -92,6 +92,13 @@ export default function Plan() {
const [shouldRevalidate, setShouldRevalidate] = useState(false);
const [searchParams] = useSearchParams();
const didMount = useRef(false);

const isDataLoading = useMemo(
(): boolean =>
!(state.products && state.organization && state.subscribedProduct),
[state.products, state.organization, state.subscribedProduct]
);

const hasActiveSubscription = useMemo(() => {
srartese marked this conversation as resolved.
Show resolved Hide resolved
if (state.subscribedProduct) {
return state.subscribedProduct.some((subscription: BaseSubscription) =>
Expand All @@ -101,11 +108,18 @@ export default function Plan() {
return false;
}, [state.subscribedProduct]);

const isDataLoading = useMemo(
(): boolean =>
!(state.products && state.organization && state.subscribedProduct),
[state.products, state.organization, state.subscribedProduct]
);
useMemo(() => {
if (
state.subscribedProduct !== null &&
state.subscribedProduct.length > 0
) {
const subscribedFilter =
state.subscribedProduct?.[0].items[0].price.recurring?.interval;
if (subscribedFilter === 'year' || subscribedFilter === 'month') {
dispatch({type: subscribedFilter});
}
}
}, [state.subscribedProduct]);
srartese marked this conversation as resolved.
Show resolved Hide resolved

useEffect(() => {
getProducts().then((data) => {
Expand Down Expand Up @@ -187,7 +201,7 @@ export default function Plan() {
if (state.products !== null) {
const filterAmount = state.products.map((product: Product) => {
const filteredPrices = product.prices.filter((price: BasePrice) => {
const interval = price.human_readable_price.split('/')[1];
const interval = price.recurring?.interval;
return interval === state.intervalFilter;
});

Expand All @@ -212,17 +226,32 @@ export default function Plan() {

const isSubscribedProduct = useCallback(
(product: Price) => {
if (hasActiveSubscription !== undefined) {
if (!product.prices.unit_amount && !hasActiveSubscription) {
if (
!product.prices.unit_amount &&
state.intervalFilter === 'year' &&
LMNTL marked this conversation as resolved.
Show resolved Hide resolved
state.subscribedProduct.length === 0 &&
!hasActiveSubscription
) {
return true;
}

const subscription = getSubscriptionsForProductId(product.id);

if (subscription.length > 0) {
const lastsubscription = subscription.length - 1;
if (
subscription[lastsubscription].items[0].price.id ===
product.prices.id &&
hasActiveSubscription
) {
return true;
} else {
return false;
}
}
const subscriptions = getSubscriptionsForProductId(product.id);
return subscriptions.some(
(subscription: BaseSubscription) => subscription.status === 'active'
);
return;
},
[state.subscribedProduct]
[state.subscribedProduct, state.intervalFilter]
);

const shouldShowManage = useCallback(
Expand Down Expand Up @@ -413,7 +442,7 @@ export default function Plan() {
<div className={styles.allPlans}>
{filterPrices.map((price: Price) => (
<div className={styles.stripePlans} key={price.id}>
{shouldShowManage(price) || isSubscribedProduct(price) ? (
{isSubscribedProduct(price) ? (
<div className={styles.currentPlan}>{t('your plan')}</div>
) : (
<div className={styles.otherPlanSpacing} />
Expand Down Expand Up @@ -468,7 +497,8 @@ export default function Plan() {
isDisabled={areButtonsDisabled}
/>
)}
{(isSubscribedProduct(price) || shouldShowManage(price)) &&
{isSubscribedProduct(price) &&
shouldShowManage(price) &&
price.prices.unit_amount !== 0 && (
<Button
type='full'
Expand All @@ -481,6 +511,20 @@ export default function Plan() {
isDisabled={areButtonsDisabled}
/>
)}
{!isSubscribedProduct(price) &&
shouldShowManage(price) &&
price.prices.unit_amount > 0 && (
<Button
type='full'
color='blue'
size='m'
label={t('Change plan')}
onClick={managePlan}
aria-label={`manage your ${price.name} subscription`}
aria-disabled={areButtonsDisabled}
isDisabled={areButtonsDisabled}
/>
)}
{price.prices.unit_amount === 0 && (
<div className={styles.btnSpacePlaceholder} />
)}
Expand Down
1 change: 1 addition & 0 deletions jsapp/js/account/stripe.api.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ export interface BasePrice {
type: string;
unit_amount: number;
human_readable_price: string;
recurring: {[key: string]: string | number};
metadata: {[key: string]: string};
product: BaseProduct;
}
Expand Down
3 changes: 3 additions & 0 deletions kobo/apps/stripe/serializers.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ class Meta:
'nickname',
'currency',
'type',
'recurring',
'unit_amount',
'human_readable_price',
'metadata',
Expand Down Expand Up @@ -94,6 +95,8 @@ class Meta(BasePriceSerializer.Meta):
'id',
'nickname',
'currency',
'type',
'recurring',
'unit_amount',
'human_readable_price',
'metadata',
Expand Down
6 changes: 6 additions & 0 deletions kobo/apps/stripe/views.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -313,6 +313,12 @@ class ProductViewSet(viewsets.GenericViewSet, mixins.ListModelMixin):
> "nickname": string,
> "currency": string,
> "type": string,
> "recurring": {
> "aggregate_usage": string ('sum', 'last_during_period`, `last_ever`, `max`)
> "interval": string ('month', 'year', 'week', 'day')
> "interval_count": int,
> "usage_type": string ('metered', 'licensed')
> },
> "unit_amount": int (cents),
> "human_readable_price": string,
> "metadata": {}
Expand Down