applications/drive/src/app/components/modals/DriveStartupModals.tsx

   1 import { useEffect, useRef } from 'react';
   2
   3 import { useWelcomeFlags } from '@proton/account';
   4 import { useSubscription } from '@proton/account/subscription/hooks';
   5 import {
   6     CancellationReminderModal,
   7     LightLabellingFeatureModal,
   8     getShouldOpenReferralModal,
   9     shouldOpenReminderModal,
  10     useModalState,
  11     useNewFeatureOnboarding,
  12     useShowLightLabellingFeatureModal,
  13 } from '@proton/components';
  14 import type { ReminderFlag } from '@proton/components/containers/payments/subscription/cancellationReminder/cancellationReminderHelper';
  15 import { FeatureCode, useFeature } from '@proton/features';
  16 import { OPEN_OFFER_MODAL_EVENT } from '@proton/shared/lib/constants';
  17
  18 import { useDriveDocsFeatureFlag } from '../../store/_documents';
  19 import { DocsSuggestionsOnboardingModal } from './DocsSuggestionsOnboardingModal';
  20 import { DriveOnboardingV2Modal } from './DriveOnboardingV2Modal';
  21
  22 const DriveStartupModals = () => {
  23     const { welcomeFlags } = useWelcomeFlags();
  24
  25     // Drive onboarding V2
  26     const showWelcomeV2Modal = !welcomeFlags.isDone;
  27     const [welcomeV2Modal, setWelcomeV2Modal, renderWelcomeV2Modal] = useModalState();
  28
  29     // Docs welcome modal
  30     const { isDocsEnabled } = useDriveDocsFeatureFlag();
  31     const { showOnboarding: showDocsSuggestionModeOnboarding, onWasShown: onDocsSuggestionModeOnboardingShown } =
  32         useNewFeatureOnboarding({
  33             key: 'drive-docs-suggestion-mode',
  34             featureFlagsEnabled: isDocsEnabled,
  35             shouldWelcomeFlowBeDone: true,
  36             startDate: '2024-11-13',
  37             expirationDate: '2024-12-15',
  38         });
  39     const [docsModal, setDocsModal, renderDocsModal] = useModalState({
  40         onClose: onDocsSuggestionModeOnboardingShown,
  41     });
  42
  43     // Referral modal
  44     const [subscription, subscriptionLoading] = useSubscription();
  45     const seenReferralModal = useFeature<boolean>(FeatureCode.SeenReferralModal);
  46     const { open: showReferralModal } = getShouldOpenReferralModal({
  47         subscription,
  48         feature: seenReferralModal.feature,
  49     });
  50     const setReferralModal = () => {
  51         document.dispatchEvent(new CustomEvent(OPEN_OFFER_MODAL_EVENT));
  52     };
  53
  54     // Cancellation reminder modal
  55     const { feature } = useFeature<ReminderFlag>(FeatureCode.AutoDowngradeReminder);
  56     const [reminderModal, setReminderModal, renderReminderModal] = useModalState();
  57     const showReminderModal = shouldOpenReminderModal(subscriptionLoading, subscription, feature);
  58
  59     // Light labelling modal
  60     const showLightLabellingFeatureModal = useShowLightLabellingFeatureModal();
  61     const [lightLabellingFeatureModalProps, setLightLabellingFeatureModal, renderLightLabellingFeatureModal] =
  62         useModalState();
  63
  64     // This ref ensures only one modal is shown at a time
  65     const onceRef = useRef(false);
  66
  67     useEffect(() => {
  68         if (onceRef.current) {
  69             return;
  70         }
  71
  72         // Modals by order of priority, top-most will be prioritized
  73         const modals: [boolean, (value: boolean) => void][] = [
  74             // Drive modals
  75             [showWelcomeV2Modal, setWelcomeV2Modal],
  76             // Docs modals
  77             [showDocsSuggestionModeOnboarding, setDocsModal],
  78             // Account modals
  79             [showReminderModal, setReminderModal],
  80             [showReferralModal, setReferralModal],
  81             [showLightLabellingFeatureModal, setLightLabellingFeatureModal],
  82         ];
  83
  84         for (const [show, setModalOpen] of modals) {
  85             if (show) {
  86                 onceRef.current = true;
  87                 setModalOpen(true);
  88
  89                 break;
  90             }
  91         }
  92     }, [
  93         showWelcomeV2Modal,
  94         showReminderModal,
  95         showReferralModal,
  96         showLightLabellingFeatureModal,
  97         showDocsSuggestionModeOnboarding,
  98     ]);
  99
 100     return (
 101         <>
 102             {/* Drive modals */}
 103             {renderWelcomeV2Modal && <DriveOnboardingV2Modal {...welcomeV2Modal} />}
 104
 105             {/* Docs modals */}
 106             {renderDocsModal && <DocsSuggestionsOnboardingModal {...docsModal} />}
 107
 108             {/* Account modals */}
 109             {renderReminderModal && <CancellationReminderModal {...reminderModal} />}
 110             {renderLightLabellingFeatureModal && <LightLabellingFeatureModal {...lightLabellingFeatureModalProps} />}
 111         </>
 112     );
 113 };
 114
 115 export default DriveStartupModals;