Merge pull request #1579 from graphcommerce-org/feature/formcomponents

Feature/formcomponents

.changeset/angry-masks-remember.md

@@ -0,0 +1,7 @@
+---
+'@graphcommerce/ecommerce-ui': minor
+'@graphcommerce/magento-cart-shipping-address': patch
+'@graphcommerce/magento-customer': patch
+---
+
+New FormComponents added which combines react-hook-form and mui's form components for easier form handling

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

@@ -34,7 +34,7 @@ import {
 } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/react'
-import { Box, CircularProgress, Container, Dialog, Divider } from '@mui/material'
+import { CircularProgress, Container, Dialog, Typography } from '@mui/material'
 import { LayoutMinimal, LayoutMinimalProps } from '../../components'
 import { LayoutDocument } from '../../components/Layout/Layout.gql'
 import { DefaultPageDocument } from '../../graphql/DefaultPage.gql'
@@ -103,6 +103,13 @@ function PaymentPage() {
                 </FullPageMessage>
               </Dialog>
 
+              <Typography
+                variant='h4'
+                sx={(theme) => ({ mt: theme.spacings.lg, mb: theme.spacings.sm })}
+              >
+                <Trans id='Payment method' />
+              </Typography>
+
               <PaymentMethodContextProvider
                 modules={{
                   braintree_local_payment,
@@ -111,25 +118,21 @@ function PaymentPage() {
                   ...mollie_methods,
                 }}
               >
-                <Box sx={(theme) => ({ mt: theme.spacings.lg })}>
-                  <PaymentMethodActionCardListForm step={3} />
-                </Box>
+                <PaymentMethodActionCardListForm step={3} />
 
-                <CartSummary editable key='cart-summary'>
-                  <Divider />
-                  <CartTotals sx={{ typography: 'body1' }} />
+                <CartSummary editable>
+                  <CartTotals />
                 </CartSummary>
 
-                <CouponAccordion key='coupon' />
+                <CouponAccordion />
 
-                <CartAgreementsForm step={2} key='agreements' />
+                <CartAgreementsForm step={2} />
 
-                <PaymentMethodPlaceOrder key='placeorder' step={4} />
+                <PaymentMethodPlaceOrder step={4} />
 
                 <FormActions>
                   <PaymentMethodButton
                     id='place-order'
-                    key='button'
                     type='submit'
                     color='secondary'
                     button={{ variant: 'pill', size: 'large' }}

packages/ecommerce-ui/components/FormComponents/index.ts

@@ -0,0 +1,2 @@
+export { TextFieldElement, SelectElement } from 'react-hook-form-mui'
+export type { TextFieldElementProps, SelectElementProps } from 'react-hook-form-mui'

packages/ecommerce-ui/components/index.ts

@@ -1,3 +1,4 @@
 export * from './ComposedSubmitButton'
 export * from './ApolloError'
 export * from './WaitForQueries'
+export * from './FormComponents'

packages/ecommerce-ui/package.json

@@ -12,10 +12,12 @@
     }
   },
   "dependencies": {
-    "@graphcommerce/framer-utils": "3.2.0",
+    "@graphcommerce/graphql": "3.4.8",
     "@graphcommerce/next-ui": "4.23.1",
     "@graphcommerce/react-hook-form": "3.3.2",
-    "@graphcommerce/graphql": "3.4.8"
+    "@mui/icons-material": "^5.10.3",
+    "@mui/x-date-pickers": "^5.0.0",
+    "react-hook-form-mui": "^5.7.1"
   },
   "devDependencies": {
     "@graphcommerce/eslint-config-pwa": "^4.1.10",
@@ -24,9 +26,9 @@
     "@playwright/test": "^1.21.1"
   },
   "peerDependencies": {
-    "@mui/material": "5.5.3",
-    "@lingui/react": "^3.13.2",
     "@lingui/core": "^3.13.2",
+    "@lingui/react": "^3.13.2",
+    "@mui/material": "5.5.3",
     "framer-motion": "^6.2.4",
     "next": "^12.1.2",
     "react": "^18.0.0",

packages/magento-cart-checkout/queries/BillingPage.graphql

@@ -5,5 +5,6 @@ query BillingPage($cartId: String!) {
     email
     ...BillingAddress
     ...ShippingAddress
+    ...Coupon
   }
 }

packages/magento-cart-shipping-address/components/ShippingAddressForm/ShippingAddressForm.tsx

@@ -1,23 +1,29 @@
+import {
+  phonePattern,
+  useFormAutoSubmit,
+  useFormCompose,
+  UseFormComposeOptions,
+  useFormPersist,
+  TextFieldElement,
+} from '@graphcommerce/ecommerce-ui'
 import { useQuery } from '@graphcommerce/graphql'
 import {
   ApolloCartErrorAlert,
   useCartQuery,
   useFormGqlMutationCart,
 } from '@graphcommerce/magento-cart'
 import { CartAddressFragment } from '@graphcommerce/magento-cart/components/CartAddress/CartAddress.gql'
-import { AddressFields, CustomerDocument, NameFields } from '@graphcommerce/magento-customer'
+import {
+  AddressFields,
+  CustomerDocument,
+  NameFields,
+  useCustomerQuery,
+} from '@graphcommerce/magento-customer'
 import { CountryRegionsDocument, StoreConfigDocument } from '@graphcommerce/magento-store'
 import { Form, FormRow, InputCheckmark } from '@graphcommerce/next-ui'
-import {
-  phonePattern,
-  useFormAutoSubmit,
-  useFormCompose,
-  UseFormComposeOptions,
-  useFormPersist,
-} from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/react'
-import { SxProps, TextField, Theme } from '@mui/material'
+import { SxProps, Theme } from '@mui/material'
 import React from 'react'
 import { isSameAddress } from '../../utils/isSameAddress'
 import { GetAddressesDocument } from './GetAddresses.gql'
@@ -35,7 +41,7 @@ export const ShippingAddressForm = React.memo<ShippingAddressFormProps>((props)
   const { data: cartQuery } = useCartQuery(GetAddressesDocument)
   const { data: config } = useQuery(StoreConfigDocument)
   const { data: countriesData } = useQuery(CountryRegionsDocument)
-  const { data: customerQuery } = useQuery(CustomerDocument, { fetchPolicy: 'cache-only' })
+  const { data: customerQuery } = useCustomerQuery(CustomerDocument)
 
   const shopCountry = config?.storeConfig?.locale?.split('_')?.[1].toUpperCase()
 
@@ -103,7 +109,7 @@ export const ShippingAddressForm = React.memo<ShippingAddressFormProps>((props)
       }
     },
   })
-  const { muiRegister, handleSubmit, valid, formState, required, error } = form
+  const { handleSubmit, valid, formState, required, error } = form
   const submit = handleSubmit(() => {})
 
   useFormPersist({ form, name: 'ShippingAddressForm' })
@@ -121,17 +127,16 @@ export const ShippingAddressForm = React.memo<ShippingAddressFormProps>((props)
       <NameFields form={form} key='name' readOnly={readOnly} />
       <AddressFields form={form} key='addressfields' readOnly={readOnly} />
       <FormRow key='telephone'>
-        <TextField
+        <TextFieldElement
+          control={form.control}
+          name='telephone'
           variant='outlined'
           type='text'
-          error={!!formState.errors.telephone}
           required={required.telephone}
-          label={<Trans id='Telephone' />}
-          {...muiRegister('telephone', {
-            required: required.telephone,
+          validation={{
             pattern: { value: phonePattern, message: i18n._(/* i18n */ 'Invalid phone number') },
-          })}
-          helperText={formState.isSubmitted && formState.errors.telephone?.message}
+          }}
+          label={<Trans id='Telephone' />}
           InputProps={{
             readOnly,
             endAdornment: <InputCheckmark show={valid.telephone} />,

packages/magento-cart-shipping-address/package.json

@@ -18,13 +18,13 @@
     "@playwright/test": "^1.21.1"
   },
   "dependencies": {
+    "@graphcommerce/ecommerce-ui": "1.2.3",
     "@graphcommerce/graphql": "3.4.8",
     "@graphcommerce/image": "3.1.9",
     "@graphcommerce/magento-cart": "4.7.4",
     "@graphcommerce/magento-customer": "4.10.4",
     "@graphcommerce/magento-store": "4.2.32",
-    "@graphcommerce/next-ui": "4.23.1",
-    "@graphcommerce/react-hook-form": "3.3.2"
+    "@graphcommerce/next-ui": "4.23.1"
   },
   "peerDependencies": {
     "@lingui/react": "^3.13.2",

packages/magento-cart-shipping-method/components/ShippingMethodForm/ShippingMethodActionCard.tsx

@@ -19,21 +19,15 @@ export function ShippingMethodActionCard(props: ShippingMethodActionCardProps) {
     onReset,
     ...cardProps
   } = props
-  let { hidden = false } = props
 
   const isFree = amount && amount.value === 0
 
-  if (carrier_code !== 'freeshipping') hidden = !available ? true : hidden
-
-  if (hidden) return false
-
   const title =
     carrier_title === 'Free Shipping' ? carrier_title : `${carrier_title} ${method_title}`
 
   return (
     <ActionCard
       {...cardProps}
-      hidden={hidden}
       title={title}
       details={error_message}
       action={

packages/magento-cart-shipping-method/components/ShippingMethodForm/ShippingMethodForm.tsx

@@ -52,6 +52,10 @@ export function ShippingMethodForm(props: ShippingMethodFormProps) {
       availableMethods
         // Move disabled items to the bottom
         .sort((a, b) => (a.available ? -1 : 1))
+        .filter((m) => {
+          if (m.carrier_code === 'freeshipping') return m.available === true
+          return m.method_code
+        })
         .map((method) => ({
           ...method,
           disabled: !method?.available,

packages/magento-cart/components/CartSummary/CartSummary.tsx

@@ -89,15 +89,15 @@ export function CartSummary(props: CartSummaryProps) {
           <SectionContainer
             variantLeft='h5'
             labelLeft={<Trans id='Confirmation + Track & trace' />}
-            sx={{ '& .SectionHeader': { marginTop: 0, paddingBottom: '8px' } }}
+            sx={{ '& .SectionHeader-root': { marginTop: 0, paddingBottom: '8px' } }}
           />
           <Typography variant='body1'>{email || ''}</Typography>
         </Box>
         <Box>
           <SectionContainer
             variantLeft='h5'
             labelLeft={<Trans id='Shipping method' />}
-            sx={{ '& .SectionHeader': { marginTop: 0, paddingBottom: '8px' } }}
+            sx={{ '& .SectionHeader-root': { marginTop: 0, paddingBottom: '8px' } }}
           />
           <Typography variant='body1'>
             {shipping_addresses?.[0]?.selected_shipping_method?.carrier_title}