feat/MSSDK-2097: Add props to disable Exit Survey from MSSDK components

README.md

@@ -294,6 +294,7 @@ Config.setMyAccountPayPalUrls({
 
 - `customCancellationReasons` - array of the custom cancellation reasons. List of these reasons will be displayed in unsubscribe popup. The provided cancellation reasons will replace our default ones. Every cancellation reason should have value and key. You can use this key in your translations file, otherwise value will be always displayed.
 - `skipAvailableDowngradesStep` - an optional parameter that can be used to skip available downgrades step in the unsubscribe process.
+- `skipCancellationSurveyStep` - an optional parameter that can be used to skip cancellation survey step in the unsubscribe process.
 - `skipAvailableFreeExtensionStep` - an optional parameter that can be used to skip available Free Extension step in the unsubscribe process.
 - `adyenConfiguration` - an optional parameter that can be used to customize look and feel of the Adyen payment in update payment details section. Read more information about adyen configuration [here](#adyen-configuration).
 - `displayGracePeriodError` - an optional parameter that can be used to display error when customer is in a grace period.
@@ -470,6 +471,7 @@ import adyenConfiguration from './adyenConfiguration';
 **Props**
 
 - `skipAvailableDowngradesStep` - an optional parameter that can be used to skip available downgrades step in the unsubscribe process.
+- `skipCancellationSurveyStep` - an optional parameter that can be used to skip cancellation survey step in the unsubscribe process.
 - `skipAvailableFreeExtensionStep` - an optional parameter that can be used to skip available Free Extension step in the unsubscribe process.
 
 **Config methods**
@@ -552,6 +554,7 @@ Config.setRefreshToken('yyy'); // optional
 
 - `customCancellationReasons` - array of the custom cancellation reasons. List of that reasons will be displayed on unsubscribe popup. The provided cancellation reasons will replace our default ones. Every cancellation reason should have key and value. You can use this key in your translations file, otherwise value will be always displayed.
 - `skipAvailableDowngradesStep` - an optional parameter that can be used to skip available downgrades step in the unsubscribe process.
+- `skipCancellationSurveyStep` - an optional parameter that can be used to skip cancellation survey step in the unsubscribe process.
 - `skipAvailableFreeExtensionStep` - an optional parameter that can be used to skip available Free Extension step in the unsubscribe process.
 - `displayGracePeriodError` - an optional parameter that can be used to display error when customer is in a grace period.
 

src/appRedux/types/popupSlice.types.ts

@@ -29,7 +29,7 @@ type Step = {
 
 type InitPaymentMethod = { initPaymentMethod: PaymentDetail | null };
 
-type Offer = {
+export type SubscriptionOffer = {
   subscriptionId: number;
   offerId: string;
   status: string;
@@ -65,7 +65,7 @@ type SwitchSettings = {
 
 export type UpdateSubscription = {
   action: string;
-  offerData: Offer;
+  offerData: SubscriptionOffer;
   retentionActions: RetentionActions;
 };
 

src/appRedux/types/unsubscribe.types.ts

@@ -8,5 +8,5 @@ export type UnsubscribeInitialState = {
 export type FetchUnsubscribeParams = {
   offerId: string | undefined;
   isPauseActive: boolean;
-  checkedReason: string;
+  checkedReason?: string;
 };

src/components/PlanDetailsPopupManager/PlanDetailsPopupManager.tsx

@@ -12,6 +12,7 @@ const PlanDetailsPopupManager = ({
   customCancellationReasons,
   skipAvailableDowngradesStep,
   skipAvailableFreeExtensionStep,
+  skipCancellationSurveyStep,
   onCancel,
   onSwitchSuccess,
   onSwitchError
@@ -27,6 +28,7 @@ const PlanDetailsPopupManager = ({
           customCancellationReasons={customCancellationReasons}
           skipAvailableDowngradesStep={skipAvailableDowngradesStep}
           skipAvailableFreeExtensionStep={skipAvailableFreeExtensionStep}
+          skipCancellationSurveyStep={skipCancellationSurveyStep}
         />
       );
     case POPUP_TYPES.SWITCH_PLAN_POPUP:

src/components/PlanDetailsPopupManager/PlanDetailsPopupManager.types.ts

@@ -7,6 +7,7 @@ export type PlanDetailsPopupManagerProps = {
   customCancellationReasons?: CancellationReason[];
   skipAvailableDowngradesStep?: boolean;
   skipAvailableFreeExtensionStep?: boolean;
+  skipCancellationSurveyStep?: boolean;
   onCancel?: () => void;
   onSwitchSuccess?: () => void;
   onSwitchError?: () => void;

src/components/SubscriptionManagement/SubscriptionManagement.jsx

@@ -198,9 +198,7 @@ const SubscriptionManagement = ({ subscription, showMessageBox }) => {
                         type: POPUP_TYPES.updateSubscription,
                         data: {
                           action: 'unsubscribe',
-                          offerData: {
-                            ...subscription
-                          }
+                          offerData: subscription
                         }
                       })
                     );

src/components/UpdateSubscription/Unsubscribe.tsx

@@ -1,19 +1,7 @@
-import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import InnerPopupWrapper from 'components/InnerPopupWrapper';
-import {
-  selectSwitchDetails,
-  selectSwitchSettings
-} from 'appRedux/planDetailsSlice';
-import { SwitchSetting } from 'appRedux/types';
-import { useAppDispatch, useAppSelector } from 'appRedux/store';
-import { selectOffers } from 'appRedux/offersSlice';
-import { selectOfferData } from 'appRedux/popupSlice';
-import { fetchUnsubscribe, selectUnsubscribe } from 'appRedux/unsubscribeSlice';
-import { selectRetentionActions } from 'appRedux/retentionActionsSlice';
-import eventDispatcher, {
-  UNSUBSCRIBE_ACTION_CONFIRMED
-} from 'util/eventDispatcher';
+import { useAppSelector } from 'appRedux/store';
+import { selectUnsubscribe } from 'appRedux/unsubscribeSlice';
 import {
   Pause,
   Downgrades,
@@ -22,159 +10,63 @@ import {
   FreeExtension
 } from 'components/UpdateSubscription/components';
 import { Props } from './Unsubscribe.types';
-import STEPS from './Unsubscribe.enum';
+import { STEPS } from './constants';
+import useRetentionActions from './hooks/useRetentionActions';
+import useUnsubscribe from './hooks/useUnsubscribe';
+import useUnsubscribeSteps from './hooks/useUnsubscribeSteps';
+import useUnsubscribeImmediately from './hooks/useUnsubscribeImmediately';
 
 const Unsubscribe = ({
   customCancellationReasons,
   skipAvailableDowngradesStep,
+  skipCancellationSurveyStep,
   skipAvailableFreeExtensionStep
 }: Props) => {
-  const INITIAL_STEPS_ARRAY = [STEPS.SURVEY, STEPS.CONFIRMATION];
-
-  const [downgradesList, setDowngradesList] = useState<Array<SwitchSetting>>(
-    []
-  );
-  const [checkedReason, setCheckedReason] = useState('');
-  const [isFreeExtensionSecondStep, setIsFreeExtensionSecondStep] =
-    useState(false);
-
-  const [steps, setSteps] = useState<STEPS[]>([]);
-  const { pauseOffersIDs } = useAppSelector(selectOffers);
-  const { data: switchSettings } = useAppSelector(selectSwitchSettings);
-  const { data: switchDetails } = useAppSelector(selectSwitchDetails);
-  const offerDetails = useAppSelector(selectOfferData);
   const { error: isError } = useAppSelector(selectUnsubscribe);
-
-  const { retentionActions } = useAppSelector(selectRetentionActions);
-
   const { t } = useTranslation();
-  const dispatch = useAppDispatch();
-
-  const getDowngrades = () => {
-    if (Object.keys(switchSettings).length && offerDetails) {
-      const offerSwitchSettings = switchSettings[offerDetails?.offerId];
-      return [...offerSwitchSettings.available]
-        .filter((offer) => offer.switchDirection === 'downgrade')
-        .sort((aOffer, bOffer) => bOffer.price - aOffer.price);
-    }
-    return [];
-  };
-
-  const scheduledSwitch = () => {
-    if (offerDetails?.pendingSwitchId) {
-      return switchDetails[offerDetails.pendingSwitchId];
-    }
-    return false;
-  };
-
-  const downgrades = getDowngrades();
-
-  const shouldShowDowngradeScreen = () => {
-    if (skipAvailableDowngradesStep) return false;
-
-    const scheduled = scheduledSwitch();
-    if (
-      scheduled &&
-      scheduled.direction === 'downgrade' &&
-      offerDetails?.pendingSwitchId
-    )
-      return false;
-
-    const {
-      downgradeDetails: { offers }
-    } = retentionActions;
-
-    if (!offerDetails?.inTrial && offers.length) {
-      const downgradeOffersFiltered = offers.filter(
-        ({ toOfferId }) => !pauseOffersIDs.includes(toOfferId)
-      );
-      return !!downgradeOffersFiltered.length;
-    }
-
-    return false;
-  };
-
-  const shouldShowPauseScreen = () => {
-    if (downgrades.length) {
-      const pauseOffer = downgrades.filter(({ toOfferId }) =>
-        pauseOffersIDs.includes(toOfferId)
-      );
-      return !!pauseOffer.length;
-    }
-    return false;
-  };
-
-  const shouldShowFreeExtension =
-    retentionActions?.type === 'FREE_EXTENSION' &&
-    !skipAvailableFreeExtensionStep;
-
-  const shouldShowDowngrades =
-    retentionActions?.type === 'DOWNGRADE' && shouldShowDowngradeScreen();
-
-  const shouldShowPause =
-    retentionActions?.type === 'PAUSE' && shouldShowPauseScreen();
-
-  const [currentStep, setCurrentStep] = useState<STEPS | null>(null);
-
-  const pauseOffer = downgradesList?.filter(({ toOfferId }) =>
-    pauseOffersIDs.includes(toOfferId)
-  );
-
-  useEffect(() => {
-    const tempArray = INITIAL_STEPS_ARRAY.slice();
-
-    if (shouldShowDowngrades && !tempArray.includes(STEPS.DOWNGRADES)) {
-      tempArray.unshift(STEPS.DOWNGRADES);
-    }
-    if (shouldShowPause && !tempArray.includes(STEPS.PAUSE)) {
-      tempArray.unshift(STEPS.PAUSE);
-    }
-
-    if (shouldShowFreeExtension && !tempArray.includes(STEPS.FREE_EXTENSION)) {
-      tempArray.unshift(STEPS.FREE_EXTENSION);
-    }
-
-    if (tempArray.length !== steps.length) {
-      setSteps(tempArray);
-    }
-    if (!downgradesList.length) setDowngradesList(() => getDowngrades());
-  }, []);
-
-  useEffect(() => {
-    setCurrentStep(steps[0]);
-  }, [steps]);
-
-  // Filter out the pause subscription
-  const downgradesListFiltered = downgradesList?.filter(
-    ({ toOfferId: offerId }) => !pauseOffersIDs.includes(offerId)
-  );
-
-  const isPauseActive = offerDetails?.offerId
-    ? pauseOffersIDs.includes(offerDetails?.offerId)
-    : false;
-
-  if (!steps || !currentStep) return <></>;
-
-  const goToNextStep = () =>
-    setCurrentStep(steps[steps.indexOf(currentStep) + 1]);
-
-  const handleUnsubscribe = async () => {
-    eventDispatcher(UNSUBSCRIBE_ACTION_CONFIRMED, {
-      detail: {
-        offerId: offerDetails?.offerId,
-        cancellationReason: checkedReason
-      }
-    });
-    await dispatch(
-      fetchUnsubscribe({
-        offerId: offerDetails?.offerId,
-        checkedReason,
-        isPauseActive
-      })
-    );
 
-    setCurrentStep(STEPS.CONFIRMATION);
+  const {
+    checkedReason,
+    handleUnsubscribe,
+    scheduledSwitch,
+    setCheckedReason
+  } = useUnsubscribe(skipCancellationSurveyStep);
+  const performUnsubscribe = async () => {
+    await handleUnsubscribe(isPauseActive, showConfirmationStep);
   };
+  const {
+    downgradesWithoutPause,
+    isPauseActive,
+    pauseOffer,
+    shouldShowDowngrades,
+    shouldShowFreeExtension,
+    shouldShowPauseScreen
+  } = useRetentionActions({
+    scheduledSwitch,
+    skipAvailableDowngradesStep,
+    skipAvailableFreeExtensionStep
+  });
+  const {
+    currentStep,
+    setCurrentStep,
+    steps,
+    isFreeExtensionSecondStep,
+    setIsFreeExtensionSecondStep,
+    goToNextStep,
+    showConfirmationStep
+  } = useUnsubscribeSteps({
+    shouldShowDowngrades,
+    shouldShowFreeExtension,
+    shouldShowPauseScreen,
+    skipCancellationSurveyStep
+  });
+
+  useUnsubscribeImmediately({
+    skipCancellationSurveyStep,
+    performUnsubscribe
+  });
+
+  if (!steps?.length || !currentStep) return null;
 
   return (
     <InnerPopupWrapper
@@ -191,12 +83,12 @@ const Unsubscribe = ({
           setIsFreeExtensionSecondStep={setIsFreeExtensionSecondStep}
         />
       )}
-      {currentStep === STEPS.PAUSE && (
-        <Pause pauseOffer={pauseOffer[0]} handleClick={goToNextStep} />
+      {currentStep === STEPS.PAUSE && !!pauseOffer && (
+        <Pause pauseOffer={pauseOffer} handleClick={goToNextStep} />
       )}
       {currentStep === STEPS.DOWNGRADES && (
         <Downgrades
-          downgradesListFiltered={downgradesListFiltered}
+          downgrades={downgradesWithoutPause}
           handleClick={goToNextStep}
         />
       )}
@@ -209,7 +101,7 @@ const Unsubscribe = ({
           handleCheckboxClick={setCheckedReason}
           setCurrentStep={setCurrentStep}
           scheduledSwitch={scheduledSwitch}
-          handleUnsubscribe={handleUnsubscribe}
+          handleUnsubscribe={performUnsubscribe}
         />
       )}
       {currentStep === STEPS.CONFIRMATION && <Confirmation />}

src/components/UpdateSubscription/Unsubscribe.types.ts

@@ -1,5 +1,3 @@
-import { RetentionActions } from 'appRedux/types';
-
 type CancellationReason = {
   value: string;
   key: string;
@@ -9,5 +7,5 @@ export type Props = {
   customCancellationReasons?: CancellationReason[];
   skipAvailableDowngradesStep?: boolean;
   skipAvailableFreeExtensionStep?: boolean;
-  retentionActions: RetentionActions;
+  skipCancellationSurveyStep?: boolean;
 };