feat: Added loader for plan purchase and refreshed subscription on pl…

…an purchase
implerhq · Oct 21, 2024 · eb7dc2a · eb7dc2a
1 parent 37c210a
commit eb7dc2a
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 21 deletions.
diff --git a/apps/web/components/settings/AddCard/PaymentMethods/PaymentMethods.tsx b/apps/web/components/settings/AddCard/PaymentMethods/PaymentMethods.tsx
@@ -8,13 +8,15 @@ import { MODAL_KEYS, ROUTES } from '@config';
 import { PaymentMethodOption } from './PaymentMethodOption';
 
 interface PaymentMethodsProps {
+  isAddCardDisabled?: boolean;
   paymentMethods: ICardData[] | undefined;
   selectedPaymentMethod: string | undefined;
   handlePaymentMethodChange: (methodId: string) => void;
 }
 
 export function PaymentMethods({
   paymentMethods,
+  isAddCardDisabled,
   selectedPaymentMethod,
   handlePaymentMethodChange,
 }: PaymentMethodsProps) {
@@ -44,7 +46,7 @@ export function PaymentMethods({
         ))}
       </Radio.Group>
 
-      <Button variant="outline" color="yellow" fullWidth onClick={handleAddMoreCard}>
+      <Button variant="outline" color="yellow" fullWidth onClick={handleAddMoreCard} disabled={isAddCardDisabled}>
         + Add Card
       </Button>
     </>

diff --git a/apps/web/components/settings/AddCard/SelectCardModal.tsx b/apps/web/components/settings/AddCard/SelectCardModal.tsx
@@ -16,15 +16,16 @@ interface SelectCardModalProps {
 
 export function SelectCardModal({ email, planCode, paymentMethodId }: SelectCardModalProps) {
   const {
+    handleProceed,
+    paymentMethods,
     appliedCouponCode,
+    isPurchaseLoading,
     setAppliedCouponCode,
-    handlePaymentMethodChange,
-    handleProceed,
+    selectedPaymentMethod,
     isCouponFeatureEnabled,
     isPaymentMethodsFetching,
     isPaymentMethodsLoading,
-    selectedPaymentMethod,
-    paymentMethods,
+    handlePaymentMethodChange,
   } = useSubscribe({
     email,
     planCode,
@@ -52,6 +53,7 @@ export function SelectCardModal({ email, planCode, paymentMethodId }: SelectCard
 
           <PaymentMethods
             paymentMethods={paymentMethods}
+            isAddCardDisabled={isPurchaseLoading}
             selectedPaymentMethod={selectedPaymentMethod}
             handlePaymentMethodChange={handlePaymentMethodChange}
           />
@@ -63,8 +65,8 @@ export function SelectCardModal({ email, planCode, paymentMethodId }: SelectCard
 
             <CheckoutDetails checkoutData={checkoutData} isCheckoutDataLoading={isCheckoutDataLoading} />
 
-            <Button onClick={handleProceed} fullWidth mt="md">
-              Confirm
+            <Button onClick={handleProceed} fullWidth mt="md" loading={isPurchaseLoading}>
+              {isPurchaseLoading ? 'Processing...' : 'Confirm'}
             </Button>
           </Stack>
         </>

diff --git a/apps/web/hooks/usePlanDetails.tsx b/apps/web/hooks/usePlanDetails.tsx
@@ -10,12 +10,11 @@ interface UsePlanDetailProps {
 
 export function usePlanDetails({ projectId }: UsePlanDetailProps) {
   const { meta, setPlanMeta } = usePlanMetaData();
-  const { data: activePlanDetails, isLoading: isActivePlanLoading } = useQuery<
-    unknown,
-    IErrorObject,
-    ISubscriptionData,
-    [string, string]
-  >(
+  const {
+    data: activePlanDetails,
+    isLoading: isActivePlanLoading,
+    refetch: refetchActivePlanDetails,
+  } = useQuery<unknown, IErrorObject, ISubscriptionData, [string, string]>(
     [API_KEYS.FETCH_ACTIVE_SUBSCRIPTION, projectId],
     () =>
       commonApi<ISubscriptionData>(API_KEYS.FETCH_ACTIVE_SUBSCRIPTION as any, {
@@ -42,5 +41,6 @@ export function usePlanDetails({ projectId }: UsePlanDetailProps) {
     meta,
     activePlanDetails,
     isActivePlanLoading,
+    refetchActivePlanDetails,
   };
 }
diff --git a/apps/web/hooks/useSubscribe.tsx b/apps/web/hooks/useSubscribe.tsx
@@ -1,13 +1,15 @@
 import { useState } from 'react';
 import getConfig from 'next/config';
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
+import { modals } from '@mantine/modals';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+
 import { notify } from '@libs/notify';
 import { commonApi } from '@libs/api';
-import { API_KEYS, CONSTANTS, NOTIFICATION_KEYS, ROUTES } from '@config';
-import { modals } from '@mantine/modals';
 import { ICardData, IErrorObject } from '@impler/shared';
 import { ConfirmationModal } from '@components/ConfirmationModal';
+import { API_KEYS, CONSTANTS, NOTIFICATION_KEYS, ROUTES } from '@config';
+import { useAppState } from 'store/app.context';
 
 const { publicRuntimeConfig } = getConfig();
 
@@ -24,11 +26,12 @@ interface ISubscribeResponse {
 }
 
 export const useSubscribe = ({ email, planCode, paymentMethodId }: UseSubscribeProps) => {
-  const queryClient = useQueryClient();
   const router = useRouter();
+  const queryClient = useQueryClient();
+  const { profileInfo } = useAppState();
   const isCouponFeatureEnabled = publicRuntimeConfig.NEXT_PUBLIC_COUPON_ENABLED;
-  const [selectedPaymentMethod, setSelectedPaymentMethod] = useState<string | undefined>(paymentMethodId);
   const [appliedCouponCode, setAppliedCouponCode] = useState<string | undefined>(undefined);
+  const [selectedPaymentMethod, setSelectedPaymentMethod] = useState<string | undefined>(paymentMethodId);
 
   const {
     data: paymentMethods,
@@ -65,7 +68,8 @@ export const useSubscribe = ({ email, planCode, paymentMethodId }: UseSubscribeP
       }),
     {
       onSuccess: (response) => {
-        queryClient.invalidateQueries([API_KEYS.FETCH_ACTIVE_SUBSCRIPTION, email]);
+        queryClient.invalidateQueries([API_KEYS.FETCH_ACTIVE_SUBSCRIPTION, profileInfo?._projectId]);
+        modals.closeAll();
         if (response && response.status) {
           modals.open({
             title:
@@ -77,12 +81,12 @@ export const useSubscribe = ({ email, planCode, paymentMethodId }: UseSubscribeP
         }
       },
       onError: (error: IErrorObject) => {
+        modals.closeAll();
         notify(NOTIFICATION_KEYS.PURCHASE_FAILED, {
           title: 'Purchase Failed',
           message: error.message,
           color: 'red',
         });
-        queryClient.invalidateQueries([API_KEYS.FETCH_ACTIVE_SUBSCRIPTION, email]);
         if (error && error.statusCode) {
           modals.open({
             title: CONSTANTS.SUBSCRIPTION_FAILED_TITLE,
@@ -94,7 +98,6 @@ export const useSubscribe = ({ email, planCode, paymentMethodId }: UseSubscribeP
   );
 
   const handleProceed = () => {
-    modals.closeAll();
     if (selectedPaymentMethod) {
       subscribe({
         email,