packages/components/containers/api/ApiModalsHVUpsell.tsx

   1 import { Suspense, useEffect, useState } from 'react';
   2
   3 import type { ApiListenerCallback, ApiVerificationEvent, ApiWithListener } from '@proton/shared/lib/api/createApi';
   4 import remove from '@proton/utils/remove';
   5 import replace from '@proton/utils/replace';
   6
   7 import AccountLockedUpsellModal from '../../components/upsell/modal/AccountLockedUpsellModal';
   8 import type { ApiModalPayload } from './ApiModals.interface';
   9
  10 const ApiModalsHVUpsell = ({ api }: { api: ApiWithListener }) => {
  11     const [verificationModals, setVerificationModals] = useState<ApiModalPayload<ApiVerificationEvent['payload']>[]>(
  12         []
  13     );
  14
  15     useEffect(() => {
  16         const handleEvent: ApiListenerCallback = (event) => {
  17             if (event.type === 'handle-verification' && event.payload.methods.includes('payment')) {
  18                 setVerificationModals((prev) => [...prev, { open: true, payload: event.payload }]);
  19                 return true;
  20             }
  21             return false;
  22         };
  23         api.addEventListener(handleEvent);
  24         return () => {
  25             api.removeEventListener(handleEvent);
  26         };
  27     }, [api]);
  28
  29     const verification = verificationModals[0];
  30
  31     return (
  32         <>
  33             {verification && (
  34                 <Suspense fallback={null}>
  35                     <AccountLockedUpsellModal
  36                         open={verification.open}
  37                         onSubscribed={() => {
  38                             verification.payload.resolve(null);
  39                         }}
  40                         onClose={() => {
  41                             verification.payload.error.cancel = true;
  42                             verification.payload.reject(verification.payload.error);
  43                             setVerificationModals((arr) =>
  44                                 replace(arr, verification, {
  45                                     ...verification,
  46                                     open: false,
  47                                 })
  48                             );
  49                         }}
  50                         onExit={() => {
  51                             setVerificationModals((arr) => remove(arr, verification));
  52                         }}
  53                     />
  54                 </Suspense>
  55             )}
  56         </>
  57     );
  58 };
  59
  60 export default ApiModalsHVUpsell;