bigcommerce · chanceaclark · Dec 10, 2024 · Dec 10, 2024
@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": minor
+---
+
+Removed ReCaptcha validation when you are logged in and making account changes. We have already validated a customer is human at the loggin screen.
@@ -10,12 +10,9 @@ import { graphql } from '~/client/graphql';
 import { State } from '../../settings/change-password/_actions/change-password';
 
 const DeleteCustomerAddressMutation = graphql(`
-  mutation DeleteCustomerAddressMutation(
-    $reCaptcha: ReCaptchaV2Input
-    $input: DeleteCustomerAddressInput!
-  ) {
+  mutation DeleteCustomerAddressMutation($input: DeleteCustomerAddressInput!) {
     customer {
-      deleteCustomerAddress(reCaptchaV2: $reCaptcha, input: $input) {
+      deleteCustomerAddress(input: $input) {
         errors {
           __typename
           ... on CustomerAddressDeletionError {

@@ -9,12 +9,9 @@ import { graphql, VariablesOf } from '~/client/graphql';
 import { parseAccountFormData } from '~/components/form-fields/shared/parse-fields';
 
 const AddCustomerAddressMutation = graphql(`
-  mutation AddCustomerAddressMutation(
-    $input: AddCustomerAddressInput!
-    $reCaptchaV2: ReCaptchaV2Input
-  ) {
+  mutation AddCustomerAddressMutation($input: AddCustomerAddressInput!) {
     customer {
-      addCustomerAddress(input: $input, reCaptchaV2: $reCaptchaV2) {
+      addCustomerAddress(input: $input) {
         errors {
           ... on CustomerAddressCreationError {
             message
@@ -48,13 +45,7 @@ const isAddCustomerAddressInput = (data: unknown): data is AddCustomerAddressInp
   return false;
 };
 
-export const addAddress = async ({
-  formData,
-  reCaptchaToken,
-}: {
-  formData: FormData;
-  reCaptchaToken?: string;
-}) => {
+export const addAddress = async (formData: FormData) => {
   const t = await getTranslations('Account.Addresses.Add.Form');
   const customerAccessToken = await getSessionCustomerAccessToken();
 
@@ -74,7 +65,6 @@ export const addAddress = async ({
       fetchOptions: { cache: 'no-store' },
       variables: {
         input: parsed,
-        ...(reCaptchaToken && { reCaptchaV2: { token: reCaptchaToken } }),
       },
     });
 

@@ -3,7 +3,6 @@
 import { useTranslations } from 'next-intl';
 import { MouseEvent, useEffect, useRef, useState } from 'react';
 import { useFormStatus } from 'react-dom';
-import ReCaptcha from 'react-google-recaptcha';
 
 import {
   Checkboxes,
@@ -32,7 +31,7 @@ import {
 } from '~/components/form-fields/shared/field-handlers';
 import { Link } from '~/components/link';
 import { Button } from '~/components/ui/button';
-import { Field, Form, FormSubmit } from '~/components/ui/form';
+import { Form, FormSubmit } from '~/components/ui/form';
 import { Message } from '~/components/ui/message';
 import { useRouter } from '~/i18n/routing';
 
@@ -89,26 +88,14 @@ interface AddAddressProps {
     code: CountryCode;
     states: CountryStates;
   };
-  reCaptchaSettings?: {
-    isEnabledOnStorefront: boolean;
-    siteKey: string;
-  };
 }
 
-export const AddAddressForm = ({
-  addressFields,
-  countries,
-  defaultCountry,
-  reCaptchaSettings,
-}: AddAddressProps) => {
+export const AddAddressForm = ({ addressFields, countries, defaultCountry }: AddAddressProps) => {
   const form = useRef<HTMLFormElement>(null);
   const [formStatus, setFormStatus] = useState<FormStatus | null>(null);
 
-  const reCaptchaRef = useRef<ReCaptcha>(null);
   const router = useRouter();
   const t = useTranslations('Account.Addresses.Add.Form');
-  const [reCaptchaToken, setReCaptchaToken] = useState('');
-  const [isReCaptchaValid, setReCaptchaValid] = useState(true);
 
   const [textInputValid, setTextInputValid] = useState<Record<string, boolean>>({});
   const [numbersInputValid, setNumbersInputValid] = useState<Record<string, boolean>>({});
@@ -162,26 +149,8 @@ export const AddAddressForm = ({
     }
   };
 
-  const onReCaptchaChange = (token: string | null) => {
-    if (!token) {
-      setReCaptchaValid(false);
-
-      return;
-    }
-
-    setReCaptchaToken(token);
-    setReCaptchaValid(true);
-  };
   const onSubmit = async (formData: FormData) => {
-    if (reCaptchaSettings?.isEnabledOnStorefront && !reCaptchaToken) {
-      setReCaptchaValid(false);
-
-      return;
-    }
-
-    setReCaptchaValid(true);
-
-    const submit = await addAddress({ formData, reCaptchaToken });
+    const submit = await addAddress(formData);
 
     if (submit.status === 'success') {
       setAccountState({
@@ -359,21 +328,6 @@ export const AddAddressForm = ({
                 return null;
             }
           })}
-
-          {reCaptchaSettings?.isEnabledOnStorefront && (
-            <Field className="relative col-span-full max-w-full space-y-2 pb-7" name="ReCAPTCHA">
-              <ReCaptcha
-                onChange={onReCaptchaChange}
-                ref={reCaptchaRef}
-                sitekey={reCaptchaSettings.siteKey}
-              />
-              {!isReCaptchaValid && (
-                <span className="absolute inset-x-0 bottom-0 inline-flex w-full text-xs font-normal text-error">
-                  {t('recaptchaText')}
-                </span>
-              )}
-            </Field>
-          )}
         </div>
 
         <div className="mt-8 flex flex-col justify-stretch gap-2 md:flex-row md:justify-start md:gap-6">

@@ -4,7 +4,6 @@ import { getSessionCustomerAccessToken } from '~/auth';
 import { client } from '~/client';
 import { graphql, ResultOf } from '~/client/graphql';
 import { FormFieldsFragment } from '~/components/form-fields/fragment';
-import { bypassReCaptcha } from '~/lib/bypass-recaptcha';
 
 import { AddAddressForm } from './_components/add-address-form';
 
@@ -20,10 +19,6 @@ const CustomerNewAdressQuery = graphql(
           contact {
             country
           }
-          reCaptcha {
-            isEnabledOnStorefront
-            siteKey
-          }
           formFields {
             shippingAddress(filters: $shippingFilters, sortBy: $shippingSorting) {
               ...FormFieldsFragment
@@ -90,16 +85,13 @@ export default async function AddPage() {
     statesOrProvinces: defaultCountryStates = FALLBACK_COUNTRY.states,
   } = countries?.find(({ name: country }) => country === defaultCountry) || {};
 
-  const recaptchaSettings = await bypassReCaptcha(data.site.settings?.reCaptcha);
-
   return (
     <div className="mx-auto mb-14 lg:w-2/3">
       <h1 className="mb-8 text-3xl font-black lg:text-4xl">{t('heading')}</h1>
       <AddAddressForm
         addressFields={addressFields}
         countries={countries || []}
         defaultCountry={{ id: entityId, code, states: defaultCountryStates }}
-        reCaptchaSettings={recaptchaSettings}
       />
     </div>
   );

@@ -9,12 +9,9 @@ import { graphql, VariablesOf } from '~/client/graphql';
 import { parseAccountFormData } from '~/components/form-fields/shared/parse-fields';
 
 const UpdateCustomerAddressMutation = graphql(`
-  mutation UpdateCustomerAddressMutation(
-    $input: UpdateCustomerAddressInput!
-    $reCaptchaV2: ReCaptchaV2Input
-  ) {
+  mutation UpdateCustomerAddressMutation($input: UpdateCustomerAddressInput!) {
     customer {
-      updateCustomerAddress(input: $input, reCaptchaV2: $reCaptchaV2) {
+      updateCustomerAddress(input: $input) {
         errors {
           __typename
           ... on AddressDoesNotExistError {
@@ -54,15 +51,7 @@ const isUpdateCustomerAddressInput = (
   return false;
 };
 
-export const updateAddress = async ({
-  addressId,
-  formData,
-  reCaptchaToken,
-}: {
-  addressId: number;
-  formData: FormData;
-  reCaptchaToken?: string;
-}) => {
+export const updateAddress = async (formData: FormData, addressId: number) => {
   const t = await getTranslations('Account.Addresses.Edit.Form');
   const customerAccessToken = await getSessionCustomerAccessToken();
 
@@ -85,7 +74,6 @@ export const updateAddress = async ({
           addressEntityId: addressId,
           data: parsed,
         },
-        ...(reCaptchaToken && { reCaptchaV2: { token: reCaptchaToken } }),
       },
     });
 

@@ -3,7 +3,6 @@
 import { useTranslations } from 'next-intl';
 import { MouseEvent, useEffect, useRef, useState } from 'react';
 import { useFormStatus } from 'react-dom';
-import ReCaptcha from 'react-google-recaptcha';
 
 import {
   Checkboxes,
@@ -33,7 +32,7 @@ import {
 } from '~/components/form-fields/shared/field-handlers';
 import { Link } from '~/components/link';
 import { Button } from '~/components/ui/button';
-import { Field, Form, FormSubmit } from '~/components/ui/form';
+import { Form, FormSubmit } from '~/components/ui/form';
 import { Message } from '~/components/ui/message';
 import { useRouter } from '~/i18n/routing';
 
@@ -105,27 +104,19 @@ interface EditAddressProps {
   addressFields: AddressFields;
   countries: Countries;
   isAddressRemovable: boolean;
-  reCaptchaSettings?: {
-    isEnabledOnStorefront: boolean;
-    siteKey: string;
-  };
 }
 
 export const EditAddressForm = ({
   address,
   addressFields,
   countries,
   isAddressRemovable,
-  reCaptchaSettings,
 }: EditAddressProps) => {
   const form = useRef<HTMLFormElement>(null);
   const [formStatus, setFormStatus] = useState<FormStatus | null>(null);
   const t = useTranslations('Account.Addresses.Edit.Form');
 
-  const reCaptchaRef = useRef<ReCaptcha>(null);
   const router = useRouter();
-  const [reCaptchaToken, setReCaptchaToken] = useState('');
-  const [isReCaptchaValid, setReCaptchaValid] = useState(true);
   const { setAccountState } = useAccountStatusContext();
 
   useEffect(() => {
@@ -166,17 +157,6 @@ export const EditAddressForm = ({
     multiTextValid,
   );
 
-  const onReCaptchaChange = (token: string | null) => {
-    if (!token) {
-      setReCaptchaValid(false);
-
-      return;
-    }
-
-    setReCaptchaToken(token);
-    setReCaptchaValid(true);
-  };
-
   const validatePicklistFields = createPreSubmitPicklistValidationHandler(
     addressFields,
     setPicklistValid,
@@ -197,15 +177,7 @@ export const EditAddressForm = ({
   };
 
   const onSubmit = async (formData: FormData) => {
-    if (reCaptchaSettings?.isEnabledOnStorefront && !reCaptchaToken) {
-      setReCaptchaValid(false);
-
-      return;
-    }
-
-    setReCaptchaValid(true);
-
-    const submit = await updateAddress({ addressId: address.entityId, formData });
+    const submit = await updateAddress(formData, address.entityId);
 
     if (submit.status === 'success') {
       setAccountState({
@@ -425,21 +397,6 @@ export const EditAddressForm = ({
                 return null;
             }
           })}
-
-          {reCaptchaSettings?.isEnabledOnStorefront && (
-            <Field className="relative col-span-full max-w-full space-y-2 pb-7" name="ReCAPTCHA">
-              <ReCaptcha
-                onChange={onReCaptchaChange}
-                ref={reCaptchaRef}
-                sitekey={reCaptchaSettings.siteKey}
-              />
-              {!isReCaptchaValid && (
-                <span className="absolute inset-x-0 bottom-0 inline-flex w-full text-xs font-normal text-error">
-                  {t('recaptchaText')}
-                </span>
-              )}
-            </Field>
-          )}
         </div>
 
         <div className="mt-8 flex flex-col justify-stretch gap-2 md:flex-row md:justify-between md:gap-0">

@@ -8,7 +8,6 @@ import { FormFieldValuesFragment } from '~/client/fragments/form-fields-values';
 import { PaginationFragment } from '~/client/fragments/pagination';
 import { graphql, ResultOf } from '~/client/graphql';
 import { FormFieldsFragment } from '~/components/form-fields/fragment';
-import { bypassReCaptcha } from '~/lib/bypass-recaptcha';
 
 import { EditAddressForm } from './_components/edit-address-form';
 
@@ -57,10 +56,6 @@ const CustomerEditAddressQuery = graphql(
           contact {
             country
           }
-          reCaptcha {
-            isEnabledOnStorefront
-            siteKey
-          }
           formFields {
             shippingAddress(filters: $shippingFilters, sortBy: $shippingSorting) {
               ...FormFieldsFragment
@@ -131,8 +126,6 @@ export default async function Edit({ params }: Props) {
     return notFound();
   }
 
-  const reCaptchaSettings = await bypassReCaptcha(data.site.settings?.reCaptcha);
-
   return (
     <div className="mx-auto mb-14 lg:w-2/3">
       <h1 className="mb-8 text-3xl font-black lg:text-4xl">{t('heading')}</h1>
@@ -141,7 +134,6 @@ export default async function Edit({ params }: Props) {
         addressFields={addressFields}
         countries={countries || []}
         isAddressRemovable={addresses.length > 1}
-        reCaptchaSettings={reCaptchaSettings}
       />
     </div>
   );