Add a dialog to ask if user want to take the survey

portal/src/components/billing/CancelSubscriptionSurveyDialog.tsx

@@ -0,0 +1,58 @@
+import {
+  Dialog,
+  DialogFooter,
+  DialogType,
+  IDialogContentProps,
+} from "@fluentui/react";
+import React, { useMemo } from "react";
+import { FormattedMessage } from "@oursky/react-messageformat";
+import PrimaryButton from "../../PrimaryButton";
+import DefaultButton from "../../DefaultButton";
+
+interface CancelSubscriptionSurveyDialogProps {
+  isHidden: boolean;
+  onDismiss: () => void;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export function CancelSubscriptionSurveyDialog({
+  isHidden,
+  onDismiss,
+  onConfirm,
+  onCancel,
+}: CancelSubscriptionSurveyDialogProps): React.ReactElement {
+  const dialogContentProps: IDialogContentProps = useMemo(() => {
+    return {
+      type: DialogType.normal,
+      title: <FormattedMessage id="CancelSubscriptionSurveyDialog.title" />,
+      subText: (
+        <FormattedMessage id="CancelSubscriptionSurveyDialog.body" />
+      ) as unknown as IDialogContentProps["subText"],
+    };
+  }, []);
+
+  return (
+    <Dialog
+      hidden={isHidden}
+      onDismiss={onDismiss}
+      dialogContentProps={dialogContentProps}
+    >
+      <DialogFooter>
+        <PrimaryButton
+          onClick={onConfirm}
+          disabled={isHidden}
+          text={
+            <FormattedMessage id="CancelSubscriptionSurveyDialog.button.yes" />
+          }
+        />
+        <DefaultButton
+          onClick={onCancel}
+          text={
+            <FormattedMessage id="CancelSubscriptionSurveyDialog.button.no" />
+          }
+        />
+      </DialogFooter>
+    </Dialog>
+  );
+}

portal/src/graphql/portal/SubscriptionScreen.tsx

@@ -67,6 +67,7 @@ import LinkButton from "../../LinkButton";
 import { useGenerateStripeCustomerPortalSessionMutationMutation } from "./mutations/generateStripeCustomerPortalSessionMutation";
 import { CancelSubscriptionReminder } from "../../components/billing/CancelSubscriptionReminder";
 import { extractRawID } from "../../util/graphql";
+import { CancelSubscriptionSurveyDialog } from "../../components/billing/CancelSubscriptionSurveyDialog";
 
 const CHECK_IS_PROCESSING_SUBSCRIPTION_INTERVAL = 5000;
 
@@ -486,6 +487,8 @@ function SubscriptionScreenContent(props: SubscriptionScreenContentProps) {
 
   const [enterpriseDialogHidden, setEnterpriseDialogHidden] = useState(true);
   const [cancelDialogHidden, setCancelDialogHidden] = useState(true);
+  const [cancelSurveyDialogHidden, setCancelSurveyDialogHidden] =
+    useState(true);
 
   const { selectedKey: selectedTab, onLinkClick } = usePivotNavigation<Tab>([
     Tab.Subscription,
@@ -551,18 +554,23 @@ function SubscriptionScreenContent(props: SubscriptionScreenContentProps) {
       e.preventDefault();
       e.stopPropagation();
       await setSubscriptionCancelledStatus(true);
-      const projectID = extractRawID(appID);
-      const cancelSurveyURL = `https://oursky.typeform.com/authgear-cancel#project_id=${projectID}`;
-      const anchor = document.createElement("A") as HTMLAnchorElement;
-      anchor.href = cancelSurveyURL;
-      anchor.target = "_blank";
-      anchor.click();
-      anchor.remove();
       setCancelDialogHidden(true);
+      setCancelSurveyDialogHidden(false);
     },
-    [appID, setSubscriptionCancelledStatus]
+    [setSubscriptionCancelledStatus]
   );
 
+  const onConfirmCancelSurveyDialog = useCallback(() => {
+    const projectID = extractRawID(appID);
+    const cancelSurveyURL = `https://oursky.typeform.com/authgear-cancel#project_id=${projectID}`;
+    const anchor = document.createElement("A") as HTMLAnchorElement;
+    anchor.href = cancelSurveyURL;
+    anchor.target = "_blank";
+    anchor.click();
+    anchor.remove();
+    setCancelSurveyDialogHidden(true);
+  }, [appID]);
+
   return (
     <>
       <Dialog
@@ -596,6 +604,16 @@ function SubscriptionScreenContent(props: SubscriptionScreenContentProps) {
           />
         </DialogFooter>
       </Dialog>
+      <CancelSubscriptionSurveyDialog
+        isHidden={cancelSurveyDialogHidden}
+        onDismiss={useCallback(() => {
+          setCancelSurveyDialogHidden(true);
+        }, [])}
+        onConfirm={onConfirmCancelSurveyDialog}
+        onCancel={useCallback(() => {
+          setCancelSurveyDialogHidden(true);
+        }, [])}
+      />
       <ErrorDialog
         error={cancelSubscriptionError}
         rules={[]}

portal/src/locale-data/en.json

@@ -2110,6 +2110,11 @@
   "PlanCard.action.reactivate": "Reactivate",
   "PlanCard.action.contact-us": "Contact Us",
 
+  "CancelSubscriptionSurveyDialog.title": "Sorry to see you go",
+  "CancelSubscriptionSurveyDialog.body": "Do you have 1 minute to tell us why you are cancelling?{br, react}Your feedback helps us improve.",
+  "CancelSubscriptionSurveyDialog.button.yes": "Yes",
+  "CancelSubscriptionSurveyDialog.button.no": "No",
+
   "FeatureBanner.title": "Simple pricing with no gotchas!",
   "FeatureBanner.subtitle": "There are no feature gate between plans",
   "FeatureBanner.features.customizeSignInPage": "Customize Sign-in/Sign-up Page",