packages/components/containers/offers/hooks/useOfferModal.ts

   1 import { useEffect, useState } from 'react';
   2
   3 import useModalState from '@proton/components/components/modalTwo/useModalState';
   4 import { useAutomaticCurrency } from '@proton/components/payments/client-extensions';
   5 import { type Currency } from '@proton/payments';
   6
   7 import type { OfferConfig } from '../interface';
   8 import useFetchOffer from './useFetchOffer';
   9
  10 const useOfferModal = (offerConfig: OfferConfig) => {
  11     const [offerModalProps, setOfferModalOpen, renderOfferModal] = useModalState();
  12     const [fetchOffer, setFetchOffer] = useState(false);
  13     const [automaticCurrency, loadingCurrency] = useAutomaticCurrency();
  14     const [controlledCurrency, setCurrency] = useState<Currency | undefined>();
  15     const currency = controlledCurrency ?? automaticCurrency;
  16
  17     useEffect(() => {
  18         if (!loadingCurrency) {
  19             setCurrency(automaticCurrency);
  20         }
  21     }, [automaticCurrency, loadingCurrency]);
  22
  23     const [offer, loadingOffer] = useFetchOffer({
  24         offerConfig: fetchOffer ? offerConfig : undefined,
  25         currency,
  26         onError: () => {
  27             // This is like a retry. Resetting the offer config so that the calls get retried if the user clicks the button again.
  28             setFetchOffer(false);
  29         },
  30     });
  31
  32     return {
  33         offer,
  34         currency,
  35         loadingOffer,
  36         renderOfferModal,
  37         offerModalProps,
  38         onChangeCurrency: setCurrency,
  39         setOfferModalOpen,
  40         setFetchOffer,
  41     };
  42 };
  43
  44 export default useOfferModal;