Merge pull request #2305 from graphcommerce-org/feature/GCOM-1426

Feature/gcom 1426

.changeset/friendly-cheetahs-cry.md

@@ -0,0 +1,10 @@
+---
+"@graphcommerce/magento-cart-shipping-address": minor
+"@graphcommerce/magento-cart-billing-address": minor
+"@graphcommerce/magento-graphcms": minor
+"@graphcommerce/magento-customer": minor
+"@graphcommerce/next-config": minor
+"@graphcommerce/magento-cart": minor
+---
+
+Add company and vat fields to shipping and billing forms

.changeset/purple-bags-behave.md

@@ -0,0 +1,14 @@
+---
+"@graphcommerce/magento-cart-shipping-address": patch
+"@graphcommerce/magento-payment-multisafepay": patch
+"@graphcommerce/magento-cart-payment-method": patch
+"@graphcommerce/mollie-magento-payment": patch
+"@graphcommerce/magento-payment-adyen": patch
+"@graphcommerce/magento-newsletter": patch
+"@graphcommerce/magento-customer": patch
+"@graphcommerce/magento-compare": patch
+"@graphcommerce/react-hook-form": patch
+"@graphcommerce/magento-cart": patch
+---
+
+Fix bug with persist not applying saved changes by moving <FromPersist/> below the form components

docs/framework/config.md

@@ -169,6 +169,12 @@ Determines if, after adding a cross-sell item to the cart, the user should be re
 
 Default: 'false'
 
+#### customerCompanyFieldsEnable: boolean
+
+Enables company fields inside the checkout:
+- Company name
+- VAT ID
+
 #### dataLayer: [DatalayerConfig](#DatalayerConfig)
 
 #### debug: [GraphCommerceDebugConfig](#GraphCommerceDebugConfig)
@@ -374,6 +380,12 @@ Examples:
 
 Due to a limitation of the GraphQL API it is not possible to determine if a cart should be displayed including or excluding tax.
 
+#### customerCompanyFieldsEnable: boolean
+
+Enables company fields inside the checkout:
+- Company name
+- VAT ID
+
 #### defaultLocale: boolean
 
 There can only be one entry with defaultLocale set to true.

examples/magento-graphcms/locales/de.po

@@ -13,6 +13,10 @@ msgstr ""
 "Language-Team: \n"
 "Plural-Forms: \n"
 
+#. js-lingui-generated-id
+msgid "Business"
+msgstr "Geschäftlich"
+
 msgid "<0>{name}</0> has been added to your comparison!"
 msgstr "<0>{name}</0> wurde zu Ihrer Vergleichsliste hinzugefügt!"
 
@@ -142,6 +146,9 @@ msgstr "Alle Filter löschen"
 msgid "Close"
 msgstr "Schließen"
 
+msgid "Company name"
+msgstr "Name des Unternehmens"
+
 msgid "Compare"
 msgstr "Vergleichen"
 
@@ -754,6 +761,9 @@ msgstr "Versuchen Sie ein anderes Produkt"
 msgid "Try a different search"
 msgstr "Versuchen Sie eine andere Suche"
 
+msgid "VAT Number"
+msgstr "USt-IdNr."
+
 msgid "View Product"
 msgstr "Produkt ansehen"
 
@@ -916,6 +926,10 @@ msgstr "zurückgesandt"
 msgid "shipped"
 msgstr "versandt"
 
+#. js-lingui-generated-id
+msgid "Private"
+msgstr "Privat"
+
 msgid "{count} Per page"
 msgstr "{count} pro Seite"
 

examples/magento-graphcms/locales/en.po

@@ -13,6 +13,10 @@ msgstr ""
 "Language-Team: \n"
 "Plural-Forms: \n"
 
+#. js-lingui-generated-id
+msgid "Business"
+msgstr "Business"
+
 msgid "<0>{name}</0> has been added to your comparison!"
 msgstr "<0>{name}</0> has been added to your comparison!"
 
@@ -142,6 +146,9 @@ msgstr "Clear all filters"
 msgid "Close"
 msgstr "Close"
 
+msgid "Company name"
+msgstr "Company name"
+
 msgid "Compare"
 msgstr "Compare"
 
@@ -754,6 +761,9 @@ msgstr "Try a different product"
 msgid "Try a different search"
 msgstr "Try a different search"
 
+msgid "VAT Number"
+msgstr "VAT Number"
+
 msgid "View Product"
 msgstr "View Product"
 
@@ -916,6 +926,10 @@ msgstr "returned"
 msgid "shipped"
 msgstr "shipped"
 
+#. js-lingui-generated-id
+msgid "Private"
+msgstr "Private"
+
 msgid "{count} Per page"
 msgstr "{count} Per page"
 

examples/magento-graphcms/locales/es.po

@@ -13,6 +13,10 @@ msgstr ""
 "Language-Team: \n"
 "Plural-Forms: \n"
 
+#. js-lingui-generated-id
+msgid "Business"
+msgstr "Negocio"
+
 msgid "<0>{name}</0> has been added to your comparison!"
 msgstr "¡<0>{name}</0> ha sido añadido a tu comparación!"
 
@@ -142,6 +146,9 @@ msgstr "Borrar todos los filtros"
 msgid "Close"
 msgstr "Cerrar"
 
+msgid "Company name"
+msgstr "Nombre de la empresa"
+
 msgid "Compare"
 msgstr "Comparar"
 
@@ -754,6 +761,9 @@ msgstr "Pruebe un producto diferente"
 msgid "Try a different search"
 msgstr "Pruebe una búsqueda diferente"
 
+msgid "VAT Number"
+msgstr "Número de IVA"
+
 msgid "View Product"
 msgstr "Ver producto "
 
@@ -916,6 +926,10 @@ msgstr "devuelto"
 msgid "shipped"
 msgstr "enviado"
 
+#. js-lingui-generated-id
+msgid "Private"
+msgstr "Privado"
+
 msgid "{count} Per page"
 msgstr "{count} Por página"
 

examples/magento-graphcms/locales/fr.po

@@ -13,6 +13,10 @@ msgstr ""
 "Language-Team: \n"
 "Plural-Forms: \n"
 
+#. js-lingui-generated-id
+msgid "Business"
+msgstr "Entreprise"
+
 msgid "<0>{name}</0> has been added to your comparison!"
 msgstr "<0>{name}</0> a été ajouté à votre comparatif !"
 
@@ -142,6 +146,9 @@ msgstr "Effacer tous les filtres"
 msgid "Close"
 msgstr "Fermer"
 
+msgid "Company name"
+msgstr "Nom de l'entreprise"
+
 msgid "Compare"
 msgstr "Comparez"
 
@@ -754,6 +761,9 @@ msgstr "Essayez un autre produit"
 msgid "Try a different search"
 msgstr "Essayez une autre recherche"
 
+msgid "VAT Number"
+msgstr "Numéro de TVA"
+
 msgid "View Product"
 msgstr "Voir le produit"
 
@@ -916,6 +926,10 @@ msgstr "retournée"
 msgid "shipped"
 msgstr "expédiée"
 
+#. js-lingui-generated-id
+msgid "Private"
+msgstr "Privé"
+
 msgid "{count} Per page"
 msgstr "{count} Par page"
 

examples/magento-graphcms/locales/it.po

@@ -13,6 +13,10 @@ msgstr ""
 "Language-Team: \n"
 "Plural-Forms: \n"
 
+#. js-lingui-generated-id
+msgid "Business"
+msgstr "Business"
+
 msgid "<0>{name}</0> has been added to your comparison!"
 msgstr "<0>{name}</0> è stato aggiunto al confronto!"
 
@@ -142,6 +146,9 @@ msgstr "Cancella tutti i filtri"
 msgid "Close"
 msgstr "Chiudi"
 
+msgid "Company name"
+msgstr "Nome della società"
+
 msgid "Compare"
 msgstr "Confronta"
 
@@ -754,6 +761,9 @@ msgstr "Prova un altro prodotto"
 msgid "Try a different search"
 msgstr "Prova una ricerca differente"
 
+msgid "VAT Number"
+msgstr "Partita IVA"
+
 msgid "View Product"
 msgstr "Visualizza prodotto"
 
@@ -916,6 +926,10 @@ msgstr "restituito"
 msgid "shipped"
 msgstr "spedito"
 
+#. js-lingui-generated-id
+msgid "Private"
+msgstr "Privato"
+
 msgid "{count} Per page"
 msgstr "{count} Per pagina"
 

examples/magento-graphcms/locales/nl.po

@@ -13,6 +13,10 @@ msgstr ""
 "Language-Team: \n"
 "Plural-Forms: \n"
 
+#. js-lingui-generated-id
+msgid "Business"
+msgstr "Zakelijk"
+
 msgid "<0>{name}</0> has been added to your comparison!"
 msgstr "<0>{name}</0> is toegevoegd aan je vergelijking!"
 
@@ -142,6 +146,9 @@ msgstr "Alle filters wissen"
 msgid "Close"
 msgstr "Sluiten"
 
+msgid "Company name"
+msgstr "Bedrijfsnaam"
+
 msgid "Compare"
 msgstr "Vergelijk"
 
@@ -754,6 +761,9 @@ msgstr "Probeer een ander product"
 msgid "Try a different search"
 msgstr "Probeer een andere zoekopdracht"
 
+msgid "VAT Number"
+msgstr "BTW-nummer"
+
 msgid "View Product"
 msgstr "Bekijk product"
 
@@ -916,6 +926,10 @@ msgstr "terug gestuurd"
 msgid "shipped"
 msgstr "verzonden"
 
+#. js-lingui-generated-id
+msgid "Private"
+msgstr "Privé"
+
 msgid "{count} Per page"
 msgstr "{count} Per pagina"
 

examples/magento-graphcms/pages/checkout/index.tsx

@@ -97,7 +97,7 @@ function ShippingPage() {
               <>
                 {(customerAddresses.data?.customer?.addresses?.length ?? 0) >= 1 ? (
                   <CustomerAddressForm step={2} sx={(theme) => ({ mt: theme.spacings.lg })}>
-                    <ShippingAddressForm ignoreCache step={3} />
+                    <ShippingAddressForm step={3} />
                   </CustomerAddressForm>
                 ) : (
                   <>

packages/magento-cart-billing-address/components/EditBillingAddressForm/EditBillingAddressForm.tsx

@@ -2,18 +2,18 @@ import { TextFieldElement } from '@graphcommerce/ecommerce-ui'
 import { useHistoryGo } from '@graphcommerce/framer-next-pages'
 import { useQuery } from '@graphcommerce/graphql'
 import { useCartQuery, useFormGqlMutationCart } from '@graphcommerce/magento-cart'
-import { SetBillingAddressDocument } from '@graphcommerce/magento-cart-shipping-address/components/ShippingAddressForm/SetBillingAddress.gql'
+import { SetBillingAddressDocument } from '@graphcommerce/magento-cart-shipping-address'
 import {
   AddressFields,
   ApolloCustomerErrorAlert,
+  CompanyFields,
   NameFields,
 } from '@graphcommerce/magento-customer'
 import { CountryRegionsDocument } from '@graphcommerce/magento-store'
 import { Button, Form, FormActions, FormDivider, FormRow } from '@graphcommerce/next-ui'
 import { phonePattern } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/react'
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { SxProps, Theme } from '@mui/material'
 import { GetBillingAddressDocument } from './GetBillingAddress.gql'
 
@@ -38,13 +38,21 @@ export function EditBillingAddressForm(props: EditBillingAddressFormProps) {
       telephone: address?.telephone,
       houseNumber: address?.street?.[1] ?? '',
       addition: address?.street?.[2] ?? '',
+      company: address?.company ?? '',
+      vatId: address?.vat_id ?? '',
+      isCompany: Boolean(address?.company || !!address?.vat_id),
       saveInAddressBook: true,
     },
     onBeforeSubmit: (variables) => {
       const regionId = countries
         ?.find((country) => country?.two_letter_abbreviation === variables.countryCode)
         ?.available_regions?.find((region) => region?.id === variables.regionId)?.id
 
+      if (!variables.isCompany) {
+        variables.company = ''
+        variables.vatId = ''
+      }
+
       return {
         ...variables,
         telephone: variables.telephone || '000 - 000 0000',
@@ -62,6 +70,7 @@ export function EditBillingAddressForm(props: EditBillingAddressFormProps) {
   return (
     <>
       <Form onSubmit={submitHandler} noValidate sx={sx}>
+        <CompanyFields form={form} />
         <NameFields form={form} prefix />
         <AddressFields form={form} />
 

packages/magento-cart-payment-method/PaymentMethodActionCardList/PaymentMethodActionCardListForm.tsx

@@ -109,7 +109,6 @@ export function PaymentMethodActionCardListForm(props: PaymentMethodActionCardLi
 
   return (
     <>
-      <FormPersist form={form} name='PaymentMethodActionCardList' />
       <ActionCardListForm<PaymentOptionsProps & ActionCardProps, FormFields>
         control={control}
         name='paymentMethod'
@@ -126,6 +125,7 @@ export function PaymentMethodActionCardListForm(props: PaymentMethodActionCardLi
         }))}
         render={PaymentMethodActionCard}
       />
+      <FormPersist form={form} name='PaymentMethodActionCardList' />
     </>
   )
 }

packages/magento-cart-payment-method/PaymentMethodToggles/PaymentMethodToggles.tsx

@@ -90,7 +90,6 @@ export function PaymentMethodToggles(props: PaymentMethodTogglesProps) {
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}
     >
-      <FormPersist form={form} name='PaymentMethodToggles' />
       <input type='hidden' {...register('code', { required: true })} required />
       <FormRow className={classes.root} sx={{ position: 'relative', padding: 0 }}>
         <ScrollerProvider scrollSnapAlign='center'>
@@ -215,6 +214,7 @@ export function PaymentMethodToggles(props: PaymentMethodTogglesProps) {
           </Box>
         </ScrollerProvider>
       </FormRow>
+      <FormPersist form={form} name='PaymentMethodToggles' />
     </Form>
   )
 }