From c74e644ca10c06ef6cb76f2465098cabae61e06a Mon Sep 17 00:00:00 2001 From: sivayogasubramanian Date: Wed, 26 Oct 2022 17:34:47 +0800 Subject: [PATCH 1/5] Fix image aspect ratio --- .../components/charities/CampaignCharityDialogStyles.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/frontend/styles/components/charities/CampaignCharityDialogStyles.ts b/frontend/styles/components/charities/CampaignCharityDialogStyles.ts index 9e78bab4..07d5fd52 100644 --- 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 = { From b024f2ce0b46731ec930ef527d1fe85e3240f766 Mon Sep 17 00:00:00 2001 From: sivayogasubramanian Date: Wed, 26 Oct 2022 17:58:50 +0800 Subject: [PATCH 2/5] Improve message --- frontend/components/redeem/RedirectDialog.tsx | 40 +++++++++++++++++-- 1 file changed, 36 insertions(+), 4 deletions(-) diff --git a/frontend/components/redeem/RedirectDialog.tsx b/frontend/components/redeem/RedirectDialog.tsx index 13911d87..56cc7b49 100644 --- a/frontend/components/redeem/RedirectDialog.tsx +++ b/frontend/components/redeem/RedirectDialog.tsx @@ -2,6 +2,7 @@ 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 +17,8 @@ import { CouponRedirectFormData } from '../../types/coupons'; import { CouponSponsorship } from '../../types/primaryDonor'; import { log } from '../../utils/analytics'; import Button from '../generic/Button'; +import InfoIcon from '@mui/icons-material/Info'; +import IconButtonWithTooltip from '../IconButtonWithTooltip'; interface Props { open: boolean; @@ -52,6 +55,8 @@ const RedirectDialog = ({ }); }; + const [shouldShowLearnMore, setShouldShowLearnMore] = useState(false); + return ( @@ -95,11 +100,32 @@ const RedirectDialog = ({ {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 && ( + } + onClick={() => setShouldShowLearnMore((prev) => !prev)} + /> + )} + {shouldShowLearnMore && couponSponsorship && ( + + Donations made through {' '} + cannot be tracked by us. We strongly encourage you to verify your redemption by returning to + back to this link after donating.{' '} + + We will only transfer {couponSponsorship.primaryDonor.name} + 's ${couponSponsorship.couponDenomination} to {campaignCharity.charity.name} after you + have verified your donation. + + + )} + setFieldValue('hasAcknowledged', e.target.checked)} />} @@ -114,7 +140,13 @@ const RedirectDialog = ({ )} - From 9c78dbd036f6ccb922862585b32bdf93e1ff8b81 Mon Sep 17 00:00:00 2001 From: sivayogasubramanian Date: Wed, 26 Oct 2022 18:01:18 +0800 Subject: [PATCH 3/5] Move some code --- frontend/components/redeem/RedirectDialog.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/components/redeem/RedirectDialog.tsx b/frontend/components/redeem/RedirectDialog.tsx index 56cc7b49..33e32d13 100644 --- a/frontend/components/redeem/RedirectDialog.tsx +++ b/frontend/components/redeem/RedirectDialog.tsx @@ -42,6 +42,8 @@ const RedirectDialog = ({ goToNextStep, }: Props) => { const theme = useTheme(); + const [shouldShowLearnMore, setShouldShowLearnMore] = useState(false); + const handleRedirect = (values: CouponRedirectFormData) => { log('[RedirectDialog] Redirect to Giving.sg', { campaignCharityId: campaignCharity.id, @@ -55,8 +57,6 @@ const RedirectDialog = ({ }); }; - const [shouldShowLearnMore, setShouldShowLearnMore] = useState(false); - return ( From 26ca99de5f78f8ecadf621ae9b614ed34523983b Mon Sep 17 00:00:00 2001 From: sivayogasubramanian Date: Wed, 26 Oct 2022 18:01:36 +0800 Subject: [PATCH 4/5] Organise imports --- frontend/components/redeem/RedirectDialog.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/components/redeem/RedirectDialog.tsx b/frontend/components/redeem/RedirectDialog.tsx index 33e32d13..fad2107a 100644 --- a/frontend/components/redeem/RedirectDialog.tsx +++ b/frontend/components/redeem/RedirectDialog.tsx @@ -1,3 +1,4 @@ +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'; @@ -17,7 +18,6 @@ import { CouponRedirectFormData } from '../../types/coupons'; import { CouponSponsorship } from '../../types/primaryDonor'; import { log } from '../../utils/analytics'; import Button from '../generic/Button'; -import InfoIcon from '@mui/icons-material/Info'; import IconButtonWithTooltip from '../IconButtonWithTooltip'; interface Props { From eb263431dbce3dfe81485ea95cd7ad5de06d2489 Mon Sep 17 00:00:00 2001 From: Siva Date: Wed, 26 Oct 2022 21:51:14 +0800 Subject: [PATCH 5/5] Fix PR comments Co-authored-by: Geng Ning <71375383+zognin@users.noreply.github.com> --- frontend/components/redeem/RedirectDialog.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/components/redeem/RedirectDialog.tsx b/frontend/components/redeem/RedirectDialog.tsx index fad2107a..02d5720a 100644 --- a/frontend/components/redeem/RedirectDialog.tsx +++ b/frontend/components/redeem/RedirectDialog.tsx @@ -142,7 +142,7 @@ const RedirectDialog = ({