chore: address review comments

regen-network · Aug 7, 2024 · d490238 · d490238
1 parent 2c1202c
commit d490238
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 36 deletions.
diff --git 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
@@ -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}>