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

README.md

@@ -293,6 +293,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.
@@ -469,6 +470,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**
@@ -551,6 +553,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/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/UpdateSubscription/Unsubscribe.tsx

@@ -27,6 +27,7 @@ import STEPS from './Unsubscribe.enum';
 const Unsubscribe = ({
   customCancellationReasons,
   skipAvailableDowngradesStep,
+  skipCancellationSurveyStep,
   skipAvailableFreeExtensionStep
 }: Props) => {
   const INITIAL_STEPS_ARRAY = [STEPS.SURVEY, STEPS.CONFIRMATION];
@@ -123,6 +124,10 @@ const Unsubscribe = ({
   useEffect(() => {
     const tempArray = INITIAL_STEPS_ARRAY.slice();
 
+    if (skipCancellationSurveyStep) {
+      tempArray.shift();
+    }
+
     if (shouldShowDowngrades && !tempArray.includes(STEPS.DOWNGRADES)) {
       tempArray.unshift(STEPS.DOWNGRADES);
     }

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;
 };

src/components/UpdateSubscription/UpdateSubscription.tsx

@@ -0,0 +1,35 @@
+import { useAppSelector } from 'appRedux/store';
+import Unsubscribe from './Unsubscribe';
+import Resubscribe from './Resubscribe';
+
+import { UpdateSubscriptionProps } from './UpdateSubscription.types';
+
+const UpdateSubscription = ({
+  customCancellationReasons,
+  skipAvailableDowngradesStep,
+  skipAvailableFreeExtensionStep,
+  skipCancellationSurveyStep
+}: UpdateSubscriptionProps) => {
+  const { updateSubscription } = useAppSelector((state) => state.popupManager);
+
+  switch (updateSubscription?.action) {
+    case 'unsubscribe':
+      return (
+        <Unsubscribe
+          customCancellationReasons={customCancellationReasons}
+          skipAvailableDowngradesStep={skipAvailableDowngradesStep}
+          skipAvailableFreeExtensionStep={skipAvailableFreeExtensionStep}
+          skipCancellationSurveyStep={skipCancellationSurveyStep}
+        />
+      );
+    case 'resubscribe':
+      return <Resubscribe />;
+
+    default:
+      return null;
+  }
+};
+
+export { UpdateSubscription as PureUpdateSubscription };
+
+export default UpdateSubscription;

src/components/UpdateSubscription/UpdateSubscription.types.ts

@@ -0,0 +1,8 @@
+import { CancellationReason } from 'containers/PlanDetails/PlanDetails.types';
+
+export type UpdateSubscriptionProps = {
+  customCancellationReasons?: CancellationReason[];
+  skipAvailableDowngradesStep?: boolean;
+  skipAvailableFreeExtensionStep?: boolean;
+  skipCancellationSurveyStep?: boolean;
+};

src/containers/MyAccount/MyAccount.component.jsx

@@ -201,6 +201,7 @@ class MyAccount extends Component {
       customCancellationReasons,
       skipAvailableDowngradesStep,
       skipAvailableFreeExtensionStep,
+      skipCancellationSurveyStep,
       myaccountState: { activeTab }
     } = this.props;
 
@@ -211,6 +212,7 @@ class MyAccount extends Component {
             customCancellationReasons={customCancellationReasons}
             skipAvailableDowngradesStep={skipAvailableDowngradesStep}
             skipAvailableFreeExtensionStep={skipAvailableFreeExtensionStep}
+            skipCancellationSurveyStep={skipCancellationSurveyStep}
           />
         );
       case MYACCCOUNT_TABS.paymentInfo:
@@ -271,6 +273,7 @@ MyAccount.propTypes = {
   ),
   skipAvailableDowngradesStep: PropTypes.bool,
   skipAvailableFreeExtensionStep: PropTypes.bool,
+  skipCancellationSurveyStep: PropTypes.bool,
   initPublisherConfig: PropTypes.func.isRequired,
   adyenConfiguration: PropTypes.objectOf(PropTypes.any),
   displayGracePeriodError: PropTypes.bool,
@@ -286,6 +289,7 @@ MyAccount.defaultProps = {
   customCancellationReasons: null,
   skipAvailableDowngradesStep: false,
   skipAvailableFreeExtensionStep: false,
+  skipCancellationSurveyStep: false,
   displayGracePeriodError: null
 };
 

src/containers/PlanDetails/PlanDetails.tsx

@@ -29,6 +29,7 @@ const PlanDetails = ({
   customCancellationReasons,
   skipAvailableDowngradesStep,
   skipAvailableFreeExtensionStep,
+  skipCancellationSurveyStep,
   displayGracePeriodError
 }: PlanDetailsProps) => {
   const { data: currentPlan } = useAppSelector(selectCurrentPlan);
@@ -114,6 +115,7 @@ const PlanDetails = ({
         customCancellationReasons={customCancellationReasons}
         skipAvailableDowngradesStep={skipAvailableDowngradesStep}
         skipAvailableFreeExtensionStep={skipAvailableFreeExtensionStep}
+        skipCancellationSurveyStep={skipCancellationSurveyStep}
       />
     );
 

src/containers/PlanDetails/PlanDetails.types.ts

@@ -9,6 +9,7 @@ export type PlanDetailsProps = {
   customCancellationReasons: CancellationReason[];
   skipAvailableDowngradesStep: boolean;
   skipAvailableFreeExtensionStep: boolean;
+  skipCancellationSurveyStep: boolean;
   displayGracePeriodError: boolean;
 };
 

src/containers/Subscriptions/Subscriptions.component.jsx → src/containers/Subscriptions/Subscriptions.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PropTypes } from 'prop-types';
-import { useDispatch, useSelector } from 'react-redux';
+import { useAppDispatch, useAppSelector } from 'appRedux/store';
 
 import SectionHeader from 'components/SectionHeader';
 import CurrentPlan from 'components/CurrentPlan';
@@ -17,23 +16,30 @@ import {
 } from 'appRedux/planDetailsSlice';
 import { hidePopup } from 'appRedux/popupSlice';
 
+import { CustomerOffer } from 'api/Customer/types';
 import { WrapStyled } from './SubscriptionsStyled';
+import { SubscriptionsProps } from './Subscriptions.types';
 
 const Subscriptions = ({
   customCancellationReasons,
   skipAvailableDowngradesStep,
-  skipAvailableFreeExtensionStep
-}) => {
-  const { data: currentPlan } = useSelector((state) => state.plan.currentPlan);
-  const { updateList: updateListValue } = useSelector((state) => state.plan);
-  const { offers } = useSelector((state) => state.offers);
-  const { isOpen: isPopupOpen } = useSelector((state) => state.popupManager);
+  skipAvailableFreeExtensionStep,
+  skipCancellationSurveyStep
+}: SubscriptionsProps) => {
+  const { data: currentPlan } = useAppSelector(
+    (state) => state.plan.currentPlan
+  );
+  const { updateList: updateListValue } = useAppSelector((state) => state.plan);
+  const { offers } = useAppSelector((state) => state.offers);
+  const { isOpen: isPopupOpen } = useAppSelector((state) => state.popupManager);
 
   const { t } = useTranslation();
   const didMount = useRef(false);
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
 
-  const getAndSaveSwitchSettings = async (customerSubscriptions) => {
+  const getAndSaveSwitchSettings = async (
+    customerSubscriptions: CustomerOffer[]
+  ) => {
     if (customerSubscriptions.length > 1) {
       dispatch(resetOfferToSwitch());
     }
@@ -87,6 +93,7 @@ const Subscriptions = ({
         customCancellationReasons={customCancellationReasons}
         skipAvailableDowngradesStep={skipAvailableDowngradesStep}
         skipAvailableFreeExtensionStep={skipAvailableFreeExtensionStep}
+        skipCancellationSurveyStep={skipCancellationSurveyStep}
       />
     );
 
@@ -100,21 +107,4 @@ const Subscriptions = ({
   );
 };
 
-Subscriptions.propTypes = {
-  customCancellationReasons: PropTypes.arrayOf(
-    PropTypes.shape({
-      key: PropTypes.string.isRequired,
-      value: PropTypes.string.isRequired
-    })
-  ),
-  skipAvailableDowngradesStep: PropTypes.bool,
-  skipAvailableFreeExtensionStep: PropTypes.bool
-};
-
-Subscriptions.defaultProps = {
-  customCancellationReasons: null,
-  skipAvailableDowngradesStep: false,
-  skipAvailableFreeExtensionStep: false
-};
-
 export default Subscriptions;

src/containers/Subscriptions/Subscriptions.types.ts

@@ -0,0 +1,8 @@
+import { CancellationReason } from 'containers/PlanDetails/PlanDetails.types';
+
+export type SubscriptionsProps = {
+  customCancellationReasons?: CancellationReason[];
+  skipAvailableDowngradesStep?: boolean;
+  skipAvailableFreeExtensionStep?: boolean;
+  skipCancellationSurveyStep?: boolean;
+};

src/containers/Subscriptions/index.ts

@@ -0,0 +1,3 @@
+import Subscriptions from './Subscriptions';
+
+export default Subscriptions;