From d490238777aa4b0ef638973bac5f6ce6cce186f0 Mon Sep 17 00:00:00 2001
From: blushi <marie.gauthier63@gmail.com>
Date: Wed, 7 Aug 2024 16:28:00 +0200
Subject: [PATCH] chore: address review comments

---
 .../PaymentInfoForm.CustomerInfo.tsx          |  4 +-
 .../PaymentInfoForm/PaymentInfoForm.tsx       | 75 ++++++++++---------
 2 files changed, 43 insertions(+), 36 deletions(-)

diff --git a/web-marketplace/src/components/organisms/PaymentInfoForm/PaymentInfoForm.CustomerInfo.tsx b/web-marketplace/src/components/organisms/PaymentInfoForm/PaymentInfoForm.CustomerInfo.tsx
index 47c68d00c4..caed1c6243 100644
--- a/web-marketplace/src/components/organisms/PaymentInfoForm/PaymentInfoForm.CustomerInfo.tsx
+++ b/web-marketplace/src/components/organisms/PaymentInfoForm/PaymentInfoForm.CustomerInfo.tsx
@@ -54,7 +54,7 @@ export const CustomerInfo = ({
       </div>
       {retiring && (
         <TextField
-          label={`Your name`}
+          label="Your name"
           description={`This name will appear on the retirement certificate unless you choose to retire anonymously in the next step. It is also your user profile name.`}
           {...register('name')}
           error={!!errors['name']}
@@ -64,7 +64,7 @@ export const CustomerInfo = ({
       )}
       <TextField
         className={!accountId && !wallet ? 'mb-30' : ''}
-        label={`Your email`}
+        label="Your email"
         description={
           !!wallet && !accountEmail ? (
             <>
diff --git a/web-marketplace/src/components/organisms/PaymentInfoForm/PaymentInfoForm.tsx b/web-marketplace/src/components/organisms/PaymentInfoForm/PaymentInfoForm.tsx
index 2a34227dff..c2094c55f3 100644
--- a/web-marketplace/src/components/organisms/PaymentInfoForm/PaymentInfoForm.tsx
+++ b/web-marketplace/src/components/organisms/PaymentInfoForm/PaymentInfoForm.tsx
@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import { Elements } from '@stripe/react-stripe-js';
 import { loadStripe, StripeElementsOptionsMode } from '@stripe/stripe-js';
 
@@ -52,44 +53,50 @@ export const PaymentInfoForm = ({
     mode: 'onBlur',
   });
 
-  const stripePromise =
-    paymentOption === 'card' &&
-    stripePublishableKey &&
-    loadStripe(stripePublishableKey);
+  const stripePromise = useMemo(
+    () =>
+      paymentOption === 'card' &&
+      stripePublishableKey &&
+      loadStripe(stripePublishableKey),
+    [paymentOption, stripePublishableKey],
+  );
 
-  const options: StripeElementsOptionsMode = {
-    mode: 'payment',
-    amount,
-    currency,
-    paymentMethodCreation: 'manual',
-    fonts: [
-      {
-        cssSrc:
-          'https://fonts.googleapis.com/css?family=Lato:100,300,400,700,800',
-      },
-    ],
-    appearance: {
-      theme: 'stripe',
-      variables: {
-        colorText: '#000',
-        colorDanger: '#DE4526',
-        fontFamily: defaultFontFamily,
-        spacingUnit: '5px',
-        borderRadius: '2px',
-      },
-      rules: {
-        '.Label': {
-          fontWeight: 'bold',
-          fontSize: '16px',
+  const options: StripeElementsOptionsMode = useMemo(
+    () => ({
+      mode: 'payment',
+      amount,
+      currency,
+      paymentMethodCreation: 'manual',
+      fonts: [
+        {
+          cssSrc:
+            'https://fonts.googleapis.com/css?family=Lato:100,300,400,700,800',
         },
-        '.Input': {
-          boxShadow: 'none',
-          borderColor: '#D2D5D9',
-          marginTop: '9px',
+      ],
+      appearance: {
+        theme: 'stripe',
+        variables: {
+          colorText: '#000',
+          colorDanger: '#DE4526',
+          fontFamily: defaultFontFamily,
+          spacingUnit: '5px',
+          borderRadius: '2px',
+        },
+        rules: {
+          '.Label': {
+            fontWeight: 'bold',
+            fontSize: '16px',
+          },
+          '.Input': {
+            boxShadow: 'none',
+            borderColor: '#D2D5D9',
+            marginTop: '9px',
+          },
         },
       },
-    },
-  };
+    }),
+    [amount, currency],
+  );
 
   return (
     <Form form={form} onSubmit={onSubmit}>