fix: Donation flow more fixes (#1989)

* chore: Fix inline registration * fix: Add minimum width to svgs for donation payment * chore: Add full stop at the end of the sentence * fix: Social links buttons not working * chore: Make amountChosen optional for now * fix: Typo in translation key * chore: Remove redundant log * chore: Remove redundant log * chore: Remove redundant logs
podkrepi-bg · Dec 6, 2024 · 62de3c5 · 62de3c5
1 parent f4384d8
commit 62de3c5
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 16 deletions.
diff --git a/public/locales/bg/donation-flow.json b/public/locales/bg/donation-flow.json
@@ -102,7 +102,7 @@
       },
       "noregister": {
         "label": "Продължете без регистрация  ",
-        "description": "Продължавайки без регистрация, нямате възможност да запазите дарението в историята на профила си както и да правите месечни дарения по избрана кампания"
+        "description": "Продължавайки без регистрация, нямате възможност да запазите дарението в историята на профила си както и да правите месечни дарения по избрана кампания."
       },
       "field": {
         "password": "Парола",

diff --git a/public/locales/en/donation-flow.json b/public/locales/en/donation-flow.json
@@ -56,7 +56,7 @@
         },
         "card-data": {
           "name-label": "Cardholder name",
-          "error": {
+          "errors": {
             "email": "Please enter your email",
             "name": "Please enter your name"
           }

diff --git a/src/components/client/donation-flow/steps/Amount.tsx b/src/components/client/donation-flow/steps/Amount.tsx
@@ -27,7 +27,7 @@ export const initialAmountFormValues = {
 export const amountValidation = {
   amountChosen: yup.string().when('payment', {
     is: 'card',
-    then: yup.string().required(),
+    then: yup.string().optional(),
   }),
   finalAmount: yup.number().when('payment', {
     is: (payment: string | null) => ['card', null].includes(payment),

diff --git a/src/components/client/donation-flow/steps/authentication/InlineRegisterForm.tsx b/src/components/client/donation-flow/steps/authentication/InlineRegisterForm.tsx
@@ -83,7 +83,6 @@ export default function InlineRegisterForm() {
     try {
       setLoading(true)
       // Register in Keycloak
-
       if (values.terms && values.gdpr && values.password === values.confirmPassword) {
         await register(values)
       } else if (!values.terms) {
@@ -143,7 +142,7 @@ export default function InlineRegisterForm() {
         </Grid>
         <Grid item xs={12}>
           <PasswordField
-            name="confirmPassword"
+            name="registerConfirmPassword"
             label="auth:account.confirm-password"
             autoComplete="new-password"
           />
@@ -155,11 +154,11 @@ export default function InlineRegisterForm() {
             )}
         </Grid>
         <Grid item xs={12}>
-          <AcceptTermsField name="terms" />
+          <AcceptTermsField name="registerTerms" />
           {!formik.values.registerTerms && formik.touched.registerTerms && (
             <FormHelperText sx={{ color: 'red' }}>{t('validation:terms-of-use')}</FormHelperText>
           )}
-          <AcceptPrivacyPolicyField name="gdpr" />
+          <AcceptPrivacyPolicyField name="registerGdpr" />
           {!formik.values.registerGdpr && formik.touched.registerGdpr && (
             <FormHelperText sx={{ color: 'red' }}>
               {t('validation:terms-of-service')}

diff --git a/src/components/client/donation-flow/steps/payment-method/PaymentMethod.tsx b/src/components/client/donation-flow/steps/payment-method/PaymentMethod.tsx
@@ -35,13 +35,13 @@ export default function PaymentMethod({
     {
       value: 'card',
       label: t('step.payment-method.field.method.card'),
-      icon: <CardIcon sx={{ width: 80, height: 80 }} />,
+      icon: <CardIcon sx={{ width: 80, height: 80, minWidth: 421 }} />,
       disabled: false,
     },
     {
       value: 'bank',
       label: t('step.payment-method.field.method.bank'),
-      icon: <BankIcon sx={{ width: 80, height: 80 }} />,
+      icon: <BankIcon sx={{ width: 80, height: 80, minWidth: 421 }} />,
       disabled: mode.value === 'subscription',
     },
   ]

diff --git a/src/components/common/SocialShareListButton.tsx b/src/components/common/SocialShareListButton.tsx
@@ -8,7 +8,7 @@ import {
   PopoverProps,
   ButtonProps,
 } from '@mui/material'
-import { ContentCopy, Facebook, LinkedIn, Share, Twitter } from '@mui/icons-material'
+import { ContentCopy, Facebook, LinkedIn, Share, Twitter, X } from '@mui/icons-material'
 
 import { AlertStore } from 'stores/AlertStore'
 import theme from 'common/theme'
@@ -25,7 +25,7 @@ export default function SocialShareListButton({
 }) {
   const { t } = useTranslation('common')
   const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null)
-  const serializedUrl = new URLSearchParams(url).toString()
+
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     setAnchorEl(event.currentTarget)
   }
@@ -62,20 +62,20 @@ export default function SocialShareListButton({
             <Typography>{t('components.social-share.copy')}</Typography>
             <ContentCopy sx={{ ml: 1, fill: theme.palette.grey[400] }} />
           </ListItemButton>
-          <ListItemButton href={`https://www.facebook.com/sharer/sharer.php?u=${serializedUrl}`}>
+          <ListItemButton href={`https://www.facebook.com/sharer/sharer.php?u=${url}`}>
             <Typography>{t('components.social-share.share')} Facebook</Typography>
             <Facebook sx={{ ml: 1, fill: '#4267B2' }} />
           </ListItemButton>
           <ListItemButton
             href={`
-            http://www.linkedin.com/shareArticle?mini=true&url=${serializedUrl}
+            http://www.linkedin.com/shareArticle?mini=true&url=${url}
           `}>
             <Typography>{t('components.social-share.share')} LinkedIn</Typography>
             <LinkedIn sx={{ ml: 1, fill: '#0077b5' }} />
           </ListItemButton>
-          <ListItemButton href={`https://twitter.com/intent/tweet?url=${serializedUrl}`}>
-            <Typography>{t('components.social-share.share')} Twitter</Typography>
-            <Twitter sx={{ ml: 1, fill: '#1DA1F2' }} />
+          <ListItemButton href={`https://x.com/intent/post?url=${url}`}>
+            <Typography>{t('components.social-share.share')} X</Typography>
+            <X sx={{ ml: 1 }} />
           </ListItemButton>
         </List>
       </Popover>