Fix charity dialog (#324)

Giving-Coupons · Oct 26, 2022 · 1a0a89e · 1a0a89e
2 parents 12ad019 + eb26343
commit 1a0a89e
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 7 deletions.
diff --git a/frontend/components/redeem/RedirectDialog.tsx b/frontend/components/redeem/RedirectDialog.tsx
@@ -1,7 +1,9 @@
+import InfoIcon from '@mui/icons-material/Info';
 import LockIcon from '@mui/icons-material/Lock';
 import { Box, Checkbox, Dialog, DialogContent, DialogTitle, FormControlLabel, Typography } from '@mui/material';
 import { Stack, useTheme } from '@mui/system';
 import { Form, Formik } from 'formik';
+import { useState } from 'react';
 import * as Yup from 'yup';
 import {
   charityLogoSx,
@@ -16,6 +18,7 @@ import { CouponRedirectFormData } from '../../types/coupons';
 import { CouponSponsorship } from '../../types/primaryDonor';
 import { log } from '../../utils/analytics';
 import Button from '../generic/Button';
+import IconButtonWithTooltip from '../IconButtonWithTooltip';
 
 interface Props {
   open: boolean;
@@ -39,6 +42,8 @@ const RedirectDialog = ({
   goToNextStep,
 }: Props) => {
   const theme = useTheme();
+  const [shouldShowLearnMore, setShouldShowLearnMore] = useState<boolean>(false);
+
   const handleRedirect = (values: CouponRedirectFormData) => {
     log('[RedirectDialog] Redirect to Giving.sg', {
       campaignCharityId: campaignCharity.id,
@@ -95,11 +100,32 @@ const RedirectDialog = ({
                   <Stack component="div" sx={redirectAcknowledgementContainerSx}>
                     <Typography align="center">
                       {couponSponsorship
-                        ? `${couponSponsorship.primaryDonor.name}'s ${couponSponsorship.couponDenomination} will not be redeemed until you return, so please
-                      come back afterwards!`
-                        : 'Your contribution will not be counted towards this campaign until you return, so please come back afterwards!'}
+                        ? `We will not be able to transfer ${couponSponsorship.primaryDonor.name}'s $${couponSponsorship.couponDenomination} to ${campaignCharity.charity.name} unless you return and verify your donation.`
+                        : 'Your contribution will not be counted towards this campaign unless you return and verify your donation.'}
+
+                      {couponSponsorship && (
+                        <IconButtonWithTooltip
+                          tooltip="Learn More"
+                          size="small"
+                          icon={<InfoIcon fontSize="small" />}
+                          onClick={() => setShouldShowLearnMore((prev) => !prev)}
+                        />
+                      )}
                     </Typography>
 
+                    {shouldShowLearnMore && couponSponsorship && (
+                      <Typography align="center" variant="subtitle2">
+                        Donations made through <Box sx={givingSgLogoSx} component="img" src="/giving-sg-logo.png" />{' '}
+                        cannot be tracked by us. We strongly encourage you to verify your redemption by returning to
+                        back to this link after donating.{' '}
+                        <strong>
+                          We will only transfer {couponSponsorship.primaryDonor.name}
+                          &apos;s ${couponSponsorship.couponDenomination} to {campaignCharity.charity.name} after you
+                          have verified your donation.
+                        </strong>
+                      </Typography>
+                    )}
+
                     <FormControlLabel
                       name="hasAcknowledged"
                       control={<Checkbox onChange={(e) => setFieldValue('hasAcknowledged', e.target.checked)} />}
@@ -114,7 +140,13 @@ const RedirectDialog = ({
                     )}
                   </Stack>
 
-                  <Button type="submit" actionType="primary" startIcon={<LockIcon />} fullWidth>
+                  <Button
+                    type="submit"
+                    disabled={!isValid || !dirty}
+                    actionType="primary"
+                    startIcon={<LockIcon />}
+                    fullWidth
+                  >
                     Pay through giving.sg
                   </Button>
 

diff --git a/frontend/styles/components/charities/CampaignCharityDialogStyles.ts b/frontend/styles/components/charities/CampaignCharityDialogStyles.ts
@@ -16,7 +16,7 @@ export const dialogContentSx: SxProps = {
   alignItems: 'center',
 };
 
-export const dialogContentTextSx: SxProps = { margin: '20px' };
+export const dialogContentTextSx: SxProps = { margin: '20px', height: '20%' };
 
 export const charityLogoSx: SxProps = {
   maxHeight: '40px',
@@ -25,8 +25,7 @@ export const charityLogoSx: SxProps = {
 };
 
 export const charityDesktopImageSx: SxProps = {
-  height: '60%',
-  width: '100%',
+  height: '80%',
 };
 
 export const charityMobileImageSx: SxProps = {