packages/components/containers/organization/logoUpload/LightLabellingFeatureModal.tsx

   1 import { c } from 'ttag';
   2
   3 import { Button, ButtonLike } from '@proton/atoms';
   4 import SettingsLink from '@proton/components/components/link/SettingsLink';
   5 import type { ModalProps } from '@proton/components/components/modalTwo/Modal';
   6 import ModalTwo from '@proton/components/components/modalTwo/Modal';
   7 import ModalTwoContent from '@proton/components/components/modalTwo/ModalContent';
   8 import ModalTwoFooter from '@proton/components/components/modalTwo/ModalFooter';
   9 import { FeatureCode, useFeature } from '@proton/features';
  10 import illustration from '@proton/styles/assets/img/illustrations/light-labelling-feature-modal.svg';
  11
  12 interface Props extends ModalProps {}
  13
  14 const LightLabellingFeatureModal = ({ open, ...rest }: Props) => {
  15     const { feature, update } = useFeature(FeatureCode.SeenLightLabellingFeatureModal);
  16
  17     const handleClick = () => {
  18         if (feature?.Value === false) {
  19             void update(true);
  20         }
  21         rest.onClose?.();
  22     };
  23
  24     return (
  25         <ModalTwo open={open} size="small" {...rest} disableCloseOnEscape>
  26             <ModalTwoContent className="mt-6 text-center">
  27                 <img src={illustration} alt="" className="w-full" width={344} height={198} />
  28                 <h1 className="h2 text-bold mt-4">{c('Title').t`Add a custom logo`}</h1>
  29                 <p className="text-lg mt-2 color-weak">{c('Info')
  30                     .t`Boost your organization’s brand identity and create a more consistent online experience for your users.`}</p>
  31             </ModalTwoContent>
  32             <ModalTwoFooter>
  33                 <Button onClick={handleClick}>{c('Action').t`Later`}</Button>
  34                 <ButtonLike
  35                     color="norm"
  36                     shape="solid"
  37                     onClick={handleClick}
  38                     as={SettingsLink}
  39                     path="/organization-keys#organization"
  40                 >
  41                     {c('Action').t`Go to settings`}
  42                 </ButtonLike>
  43             </ModalTwoFooter>
  44         </ModalTwo>
  45     );
  46 };
  47
  48 export default LightLabellingFeatureModal;