Merge pull request #4437 from kobotoolbox/bugfix/4422-your-plan-show-…

…only-on-annual-or-monthly Bugfix/4422 your plan show only on annual or monthly
kobotoolbox · May 22, 2023 · ec2eb74 · ec2eb74
2 parents 65b4145 + 95607a6
commit ec2eb74
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 17 deletions.
diff --git a/jsapp/js/account/plan.component.tsx b/jsapp/js/account/plan.component.tsx
@@ -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;
@@ -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(() => {
     if (state.subscribedProduct) {
       return state.subscribedProduct.some((subscription: BaseSubscription) =>
@@ -101,11 +108,20 @@ 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 (state.subscribedProduct?.[0].status === 'canceled') {
+        dispatch({type: 'year'});
+      } else {
+        dispatch({type: subscribedFilter});
+      }
+    }
+  }, [state.subscribedProduct]);
 
   useEffect(() => {
     getProducts().then((data) => {
@@ -187,7 +203,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;
         });
 
@@ -212,17 +228,31 @@ 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' &&
+        !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(
@@ -413,7 +443,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} />
@@ -468,7 +498,8 @@ export default function Plan() {
                           isDisabled={areButtonsDisabled}
                         />
                       )}
-                    {(isSubscribedProduct(price) || shouldShowManage(price)) &&
+                    {isSubscribedProduct(price) &&
+                      shouldShowManage(price) &&
                       price.prices.unit_amount !== 0 && (
                         <Button
                           type='full'
@@ -481,6 +512,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} />
                     )}

diff --git a/jsapp/js/account/stripe.api.ts b/jsapp/js/account/stripe.api.ts
@@ -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;
 }

diff --git a/kobo/apps/stripe/serializers.py b/kobo/apps/stripe/serializers.py
@@ -39,6 +39,7 @@ class Meta:
             'nickname',
             'currency',
             'type',
+            'recurring',
             'unit_amount',
             'human_readable_price',
             'metadata',
@@ -94,6 +95,8 @@ class Meta(BasePriceSerializer.Meta):
             'id',
             'nickname',
             'currency',
+            'type',
+            'recurring',
             'unit_amount',
             'human_readable_price',
             'metadata',

diff --git a/kobo/apps/stripe/views.py b/kobo/apps/stripe/views.py
@@ -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": {}