Merge pull request #1399 from internxt/fix/remove-feedback-dialog-whe…

…n-canceling-sub [_]: fix/remove feedback step when cancelling sub
internxt · Dec 20, 2024 · b63c0c5 · b63c0c5
2 parents 56fc3a2 + af359a0
commit b63c0c5
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 87 deletions.
diff --git a/src/app/newSettings/Sections/Account/Billing/BillingAccountSection.tsx b/src/app/newSettings/Sections/Account/Billing/BillingAccountSection.tsx
@@ -36,7 +36,7 @@ const BillingAccountSection = ({ changeSection, onClosePreferences }: BillingAcc
     setCurrentUsage(getCurrentUsage(plan.usageDetails));
   }, [plan.individualSubscription]);
 
-  async function cancelSubscription(feedback: string) {
+  async function cancelSubscription() {
     setCancellingSubscription(true);
     try {
       await paymentService.cancelSubscription();

diff --git a/src/app/newSettings/Sections/Account/Billing/components/CancelSubscription.tsx b/src/app/newSettings/Sections/Account/Billing/components/CancelSubscription.tsx
@@ -5,9 +5,9 @@ import { UserType } from '@internxt/sdk/dist/drive/payments/types';
 
 interface CancelSubscriptionProps {
   isCancelSubscriptionModalOpen: boolean;
-  setIsCancelSubscriptionModalOpen: (isCancelSubscriptionModalOpen) => void;
+  setIsCancelSubscriptionModalOpen: (isCancelSubscriptionModalOpen: boolean) => void;
   cancellingSubscription: boolean;
-  cancelSubscription: (string) => void;
+  cancelSubscription: () => void;
   planName: string;
   planInfo: string;
   currentUsage: number;

diff --git a/src/app/newSettings/Sections/Account/Plans/PlansSection.tsx b/src/app/newSettings/Sections/Account/Plans/PlansSection.tsx
@@ -219,7 +219,7 @@ const PlansSection = ({ changeSection, onClosePreferences }: PlansSectionProps)
     setIsUpdatingSubscription(false);
   };
 
-  async function cancelSubscription(feedback: string) {
+  async function cancelSubscription() {
     setCancellingSubscription(true);
     try {
       await paymentService.cancelSubscription(selectedSubscriptionType);

diff --git a/src/app/newSettings/Sections/Workspace/Billing/BillingWorkspaceSection.tsx b/src/app/newSettings/Sections/Workspace/Billing/BillingWorkspaceSection.tsx
@@ -90,7 +90,7 @@ const BillingWorkspaceSection = ({ onClosePreferences }: BillingWorkspaceSection
     }
   };
 
-  const cancelSubscription = async (feedback: string) => {
+  const cancelSubscription = async () => {
     setCancellingSubscription(true);
     try {
       await paymentService.cancelSubscription(UserType.Business);

diff --git a/src/app/newSettings/Sections/Workspace/Billing/CancelSubscriptionModal.tsx b/src/app/newSettings/Sections/Workspace/Billing/CancelSubscriptionModal.tsx
@@ -28,11 +28,11 @@ const CancelSubscriptionModal = ({
   currentUsage: number;
   cancellingSubscription: boolean;
   userType: UserType;
-  cancelSubscription: (feedback: string) => void;
+  cancelSubscription: () => void;
 }): JSX.Element => {
   const isIndividual = userType === UserType.Individual;
   const { translate } = useTranslationContext();
-  const [step, setStep] = useState<1 | 2 | 3>(!isIndividual ? 3 : 2);
+  const [step, setStep] = useState<1 | 2>(2);
   const [couponAvailable, setCouponAvailable] = useState(false);
   const dispatch = useAppDispatch();
 
@@ -85,7 +85,7 @@ const CancelSubscriptionModal = ({
 
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
-      {(step === 2 || step === 3) && (
+      {step === 2 && (
         <>
           <h1 className="text-2xl font-medium text-gray-80">
             {translate('views.account.tabs.billing.cancelSubscriptionModal.title')}
@@ -101,20 +101,13 @@ const CancelSubscriptionModal = ({
         <Step2
           currentPlanName={currentPlanName}
           onClose={onClose}
+          cancelSubscription={cancelSubscription}
+          cancellingSubscription={cancellingSubscription}
           setStep={setStep}
           currentPlanInfo={currentPlanInfo}
           currentUsage={currentUsage}
         />
       )}
-
-      {step === 3 && (
-        <Step3
-          currentPlanName={currentPlanName}
-          onClose={onClose}
-          cancellingSubscription={cancellingSubscription}
-          cancelSubscription={cancelSubscription}
-        />
-      )}
     </Modal>
   );
 };
@@ -125,7 +118,7 @@ const Step1 = ({
   applyCoupon,
 }: {
   currentPlanName: string;
-  setStep: Dispatch<SetStateAction<3 | 2 | 1>>;
+  setStep: Dispatch<SetStateAction<2 | 1>>;
   applyCoupon: () => void;
 }): JSX.Element => {
   const { translate } = useTranslationContext();
@@ -170,13 +163,16 @@ const Step2 = ({
   currentPlanName,
   currentPlanInfo,
   currentUsage,
-  setStep,
+  cancellingSubscription,
+  cancelSubscription,
   onClose,
 }: {
   currentPlanName: string;
   currentPlanInfo: string;
   currentUsage: number;
-  setStep: Dispatch<SetStateAction<3 | 2 | 1>>;
+  cancellingSubscription: boolean;
+  cancelSubscription: () => void;
+  setStep: Dispatch<SetStateAction<2 | 1>>;
   onClose: () => void;
 }): JSX.Element => {
   const { translate } = useTranslationContext();
@@ -251,77 +247,12 @@ const Step2 = ({
         <Button
           className={'shadow-subtle-hard'}
           variant="secondary"
-          onClick={() => {
-            setStep(3);
-          }}
-        >
-          {translate('views.account.tabs.billing.cancelSubscriptionModal.continue')}
-        </Button>
-        <Button
-          className="ml-2 shadow-subtle-hard"
-          onClick={() => {
-            onClose();
-          }}
-        >
-          {translate('views.account.tabs.billing.cancelSubscriptionModal.keepSubscription')}
-        </Button>
-      </div>
-    </>
-  );
-};
-
-const Step3 = ({
-  currentPlanName,
-  onClose,
-  cancellingSubscription,
-  cancelSubscription,
-}: {
-  currentPlanName: string;
-  onClose: () => void;
-  cancellingSubscription: boolean;
-  cancelSubscription: (feedback: string) => void;
-}): JSX.Element => {
-  const { translate } = useTranslationContext();
-  const [otherFeedback, setOtherFeedback] = useState<string>('');
-
-  const MAX_OTHERFEEDBACK_LENGTH = 1000;
-
-  return (
-    <>
-      <p className="mt-4 text-gray-100">
-        {translate('views.account.tabs.billing.cancelSubscriptionModal.giveUsFeedback', {
-          currentPlanName,
-        })}
-      </p>
-      <div>
-        <textarea
           disabled={cancellingSubscription}
-          value={otherFeedback}
-          placeholder={translate('views.account.tabs.billing.cancelSubscriptionModal.feedback.placeholder')}
-          rows={4}
-          className="mt-4 w-full max-w-lg resize-none rounded-md border border-gray-20 bg-transparent p-3 pl-4 outline-none"
-          onChange={(e) => setOtherFeedback(String(e.target.value))}
-        />
-        <div className="flex w-full max-w-lg justify-end">
-          <span className={`text-sm ${(otherFeedback.length > MAX_OTHERFEEDBACK_LENGTH && 'text-red') || ''}`}>
-            {otherFeedback.length}/{MAX_OTHERFEEDBACK_LENGTH}
-          </span>
-        </div>
-      </div>
-
-      <div className="mt-4 flex justify-end">
-        <Button
-          loading={cancellingSubscription}
-          disabled={otherFeedback.length > MAX_OTHERFEEDBACK_LENGTH || otherFeedback.length <= 0}
-          variant="secondary"
-          className="shadow-subtle-hard"
-          onClick={() => {
-            cancelSubscription(otherFeedback.trim());
-          }}
+          onClick={cancelSubscription}
         >
           {translate('views.account.tabs.billing.cancelSubscriptionModal.cancelSubscription')}
         </Button>
-        <Button disabled={cancellingSubscription} className="ml-2 shadow-subtle-hard" onClick={onClose}>
+        <Button className="ml-2 shadow-subtle-hard" disabled={cancellingSubscription} onClick={onClose}>
           {translate('views.account.tabs.billing.cancelSubscriptionModal.keepSubscription')}
         </Button>
       </div>