@graphcommerce/magento-customer 9.1.0-canary.18 → 9.1.0-canary.20

package/components/Shipment/ShipmentItem.tsx

@@ -0,0 +1,117 @@
+import { Image } from '@graphcommerce/image'
+import { Money, PriceModifiersList, type PriceModifier } from '@graphcommerce/magento-store'
+import { ActionCard, actionCardImageSizes, type ActionCardProps } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/react'
+import { Box } from '@mui/material'
+import type { ShipmentItemFragment } from './ShipmentItem.gql'
+
+export type ShipmentItemProps = Omit<ActionCardProps, 'value' | 'image' | 'title'> & {
+  item: ShipmentItemFragment
+  priceModifiers?: PriceModifier[]
+}
+
+export function ShipmentItem(props: ShipmentItemProps) {
+  const { item, priceModifiers, size = 'responsive', ...rest } = props
+  const { product_name, product_sku, quantity_shipped, product_sale_price, id, order_item } = item
+
+  return (
+    <ActionCard
+      {...rest}
+      value={id}
+      sx={(theme) => ({
+        '&.ActionCard-root': {
+          px: 0,
+          py: theme.spacings.xs,
+        },
+        '& .ActionCard-rootInner': {
+          justifyContent: 'space-between',
+          alignItems: 'stretch',
+        },
+        '&.sizeSmall': {
+          px: 0,
+        },
+        '&.sizeResponsive': {
+          [theme.breakpoints.down('md')]: { px: 0 },
+        },
+        '& .ActionCard-end': {
+          justifyContent: 'space-between',
+        },
+        '& .ActionCard-action': {
+          pr: 0,
+        },
+        '& .ActionCard-image': {
+          alignSelf: 'flex-start',
+        },
+        '& .ActionCard-secondaryAction': {
+          display: 'grid',
+          rowGap: theme.spacings.xs,
+          justifyItems: 'start',
+        },
+        '& .ActionCard-price': {
+          pr: 0,
+          mb: { xs: 0.5, sm: 0 },
+        },
+      })}
+      size={size}
+      image={
+        order_item?.product?.thumbnail?.url && (
+          <Image
+            layout='fill'
+            src={order_item.product.thumbnail.url}
+            alt={order_item.product.thumbnail?.label ?? ''}
+            sx={{
+              width: actionCardImageSizes[size],
+              height: actionCardImageSizes[size],
+              display: 'block',
+              borderRadius: 1,
+              objectFit: 'contain',
+              backgroundColor: 'background.image',
+            }}
+            sizes={actionCardImageSizes[size]}
+          />
+        )
+      }
+      title={product_name}
+      price={
+        <Money
+          currency={product_sale_price.currency}
+          value={(product_sale_price.value ?? 0) * (quantity_shipped ?? 1)}
+        />
+      }
+      action={<>&nbsp;</>}
+      secondaryAction={
+        <>
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              color: 'text.secondary',
+              mt: 1,
+              gap: '10px',
+              justifyContent: 'start',
+            }}
+          >
+            {quantity_shipped}
+            {' ⨉ '}
+            <Money {...product_sale_price} />
+          </Box>
+
+          {rest.secondaryAction}
+        </>
+      }
+      details={
+        <>
+          {priceModifiers && priceModifiers.length > 0 && (
+            <PriceModifiersList
+              label={<Trans id='Base Price'>Base price</Trans>}
+              modifiers={[...priceModifiers]}
+              total={product_sale_price.value ?? 0}
+              currency={product_sale_price.currency}
+            />
+          )}
+          {rest.details}
+        </>
+      }
+    />
+  )
+}

package/components/Shipment/ShipmentItems.tsx

@@ -0,0 +1,72 @@
+import {
+  ActionCardLayout,
+  breakpointVal,
+  extendableComponent,
+  nonNullable,
+  SectionContainer,
+} from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/macro'
+import type { SxProps, Theme } from '@mui/material'
+import { Box } from '@mui/material'
+import type { ShipmentFragment } from './Shipment.gql'
+import { ShipmentItem } from './ShipmentItem'
+
+export type ShipmentItemsProps = {
+  shipment: ShipmentFragment
+  sx?: SxProps<Theme>
+  layout?: 'list' | 'grid'
+  size?: 'small' | 'medium' | 'large'
+}
+
+const componentName = 'ShipmentItems'
+const parts = ['root', 'items', 'actionCard'] as const
+const { classes } = extendableComponent(componentName, parts)
+
+export function ShipmentItems(props: ShipmentItemsProps) {
+  const { shipment, sx = [], layout = 'list', size } = props
+
+  const items = (shipment.items ?? []).filter(nonNullable)
+  if (!items.length) return null
+
+  return (
+    <Box
+      className={classes.root}
+      sx={[
+        (theme) => ({
+          my: theme.spacings.md,
+          padding: `${theme.spacings.sm} ${theme.spacings.sm}`,
+          border: `1px ${theme.palette.divider} solid`,
+          ...breakpointVal(
+            'borderRadius',
+            theme.shape.borderRadius * 2,
+            theme.shape.borderRadius * 3,
+            theme.breakpoints.values,
+          ),
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
+      <SectionContainer
+        sx={{ '& .SectionHeader-root': { mt: 0 } }}
+        labelLeft={<Trans>Shipped items</Trans>}
+        variantLeft='h6'
+        className={classes.items}
+      >
+        <ActionCardLayout
+          sx={(theme) => ({
+            marginBottom: theme.spacings.md,
+            '&.layoutStack': {
+              gap: 0,
+            },
+          })}
+          className={classes.actionCard}
+          layout={layout}
+        >
+          {items.map((item) => (
+            <ShipmentItem key={item.id} item={item} size={size} layout={layout} variant='default' />
+          ))}
+        </ActionCardLayout>
+      </SectionContainer>
+    </Box>
+  )
+}

package/components/Shipment/index.ts

@@ -0,0 +1,7 @@
+export * from './Shipment.gql'
+export * from './ShipmentCard'
+export * from './ShipmentCard.gql'
+export * from './ShipmentDetails'
+export * from './ShipmentItem.gql'
+export * from './ShipmentItem'
+export * from './ShipmentItems'

package/components/SignUpForm/SignUpForm.tsx

@@ -1,19 +1,17 @@
-import { PasswordRepeatElement, SwitchElement } from '@graphcommerce/ecommerce-ui'
+import { FormPersist, PasswordRepeatElement, SwitchElement } from '@graphcommerce/ecommerce-ui'
 import { useQuery } from '@graphcommerce/graphql'
-import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
-import { StoreConfigDocument } from '@graphcommerce/magento-store'
+import { AttributesFormAutoLayout, StoreConfigDocument } from '@graphcommerce/magento-store'
 import { Button, FormActions, FormRow } from '@graphcommerce/next-ui'
 import type { UseFormClearErrors, UseFormSetError } from '@graphcommerce/react-hook-form'
-import { FormPersist, useFormGqlMutation } from '@graphcommerce/react-hook-form'
-import { t } from '@lingui/macro'
-import { Trans } from '@lingui/react'
+import { t, Trans } from '@lingui/macro'
 import { Alert } from '@mui/material'
 import { useSignInForm } from '../../hooks/useSignInForm'
 import { ApolloCustomerErrorSnackbar } from '../ApolloCustomerError/ApolloCustomerErrorSnackbar'
+import { CustomerAttributeField } from '../CustomerForms/CustomerAttributeField'
+import { nameFieldset } from '../CustomerForms/nameFieldset'
+import { useCustomerCreateForm } from '../CustomerForms/useCustomerCreateForm'
 import { NameFields } from '../NameFields/NameFields'
 import { ValidatedPasswordElement } from '../ValidatedPasswordElement/ValidatedPasswordElement'
-import type { SignUpMutation, SignUpMutationVariables } from './SignUp.gql'
-import { SignUpDocument } from './SignUp.gql'
 
 type SignUpFormProps = {
   email?: string
@@ -21,17 +19,15 @@ type SignUpFormProps = {
   clearErrors: UseFormClearErrors<{ email?: string; requestedMode?: 'signin' | 'signup' }>
 }
 
-type SignUpFormValues = SignUpMutationVariables & { confirmPassword?: string }
-
 export function SignUpForm(props: SignUpFormProps) {
   const { email, setError, clearErrors } = props
 
   const storeConfig = useQuery(StoreConfigDocument)
+
   const signIn = useSignInForm({ email })
-  const form = useFormGqlMutation<SignUpMutation, SignUpFormValues>(
-    SignUpDocument,
+  const form = useCustomerCreateForm(
+    { exclude: ['email'] },
     {
-      defaultValues: { email },
       onBeforeSubmit: (values) => {
         if (!email) {
           // eslint-disable-next-line @typescript-eslint/no-use-before-define
@@ -40,35 +36,37 @@ export function SignUpForm(props: SignUpFormProps) {
         }
         // eslint-disable-next-line @typescript-eslint/no-use-before-define
         clearErrors()
-        return { ...values, email: email ?? '' }
+
+        values.input.email = email
+        return values
       },
       onComplete: async (result, variables) => {
-        if (!result.errors && !storeConfig.data?.storeConfig?.create_account_confirmation) {
-          signIn.setValue('email', variables.email)
-          signIn.setValue('password', variables.password)
+        if (
+          !result.errors &&
+          !storeConfig.data?.storeConfig?.create_account_confirmation &&
+          variables.input.password
+        ) {
+          signIn.setValue('email', variables.input.email)
+          signIn.setValue('password', variables.input.password)
           await signIn.handleSubmit(() => {})()
         }
       },
     },
     { errorPolicy: 'all' },
   )
-
-  const { handleSubmit, required, formState, error, control } = form
-  const [remainingError, inputError] = graphqlErrorByCategory({ category: 'graphql-input', error })
-
+  const { handleSubmit, formState, error, control, attributes } = form
   const submitHandler = handleSubmit(() => {})
 
   if (
     storeConfig.data?.storeConfig?.create_account_confirmation &&
     !error &&
-    form.formState.isSubmitSuccessful
+    formState.isSubmitSuccessful
   ) {
     return (
       <Alert>
-        <Trans
-          id='Registration successful. Please check your inbox to confirm your email address ({email})'
-          values={{ email }}
-        />
+        <Trans id='Registration successful. Please check your inbox to confirm your email address ({email})'>
+          Registration successful. Please check your inbox to confirm your email address ({email})
+        </Trans>
       </Alert>
     )
   }
@@ -78,39 +76,50 @@ export function SignUpForm(props: SignUpFormProps) {
       <FormRow>
         <ValidatedPasswordElement
           control={control}
-          name='password'
+          name='input.password'
           variant='outlined'
-          error={!!formState.errors.password || !!inputError}
-          label={<Trans id='Password' />}
+          label={<Trans id='Password'>Password</Trans>}
           autoFocus={!!email}
           autoComplete='new-password'
-          required={required.password}
-          disabled={formState.isSubmitting}
-          helperText={inputError?.message}
+          required
         />
         <PasswordRepeatElement
           control={control}
           name='confirmPassword'
-          passwordFieldName='password'
+          passwordFieldName='input.password'
           variant='outlined'
-          error={!!formState.errors.confirmPassword || !!inputError}
-          label={<Trans id='Confirm password' />}
+          label={<Trans id='Confirm password'>Confirm password</Trans>}
           autoComplete='new-password'
           required
-          disabled={formState.isSubmitting}
         />
       </FormRow>
 
-      <NameFields form={form} prefix />
+      {import.meta.graphCommerce.magentoVersion < 247 ? (
+        <NameFields
+          form={form}
+          names={{
+            firstname: 'input.firstname',
+            lastname: 'input.lastname',
+            prefix: 'input.prefix',
+          }}
+        />
+      ) : (
+        <AttributesFormAutoLayout
+          attributes={attributes}
+          control={control}
+          render={CustomerAttributeField}
+          fieldsets={[nameFieldset(attributes)]}
+        />
+      )}
 
       <SwitchElement
         control={control}
-        name='isSubscribed'
+        name='input.is_subscribed'
         disabled={formState.isSubmitting}
-        label={<Trans id='Subscribe to newsletter' />}
+        label={<Trans id='Subscribe to newsletter'>Subscribe to newsletter</Trans>}
       />
 
-      <ApolloCustomerErrorSnackbar error={remainingError} />
+      <ApolloCustomerErrorSnackbar error={error} />
 
       <FormActions>
         <Button
@@ -121,14 +130,10 @@ export function SignUpForm(props: SignUpFormProps) {
           size='large'
           loading={formState.isSubmitting}
         >
-          <Trans id='Create Account' />
+          <Trans id='Create Account'>Create Account</Trans>
         </Button>
       </FormActions>
-      <FormPersist<SignUpFormValues>
-        form={form}
-        name='SignUp'
-        exclude={['password', 'confirmPassword']}
-      />
+      <FormPersist form={form} name='SignUp' exclude={['input.password', 'confirmPassword']} />
     </form>
   )
 }

package/components/WaitForCustomer/WaitForCustomer.tsx

@@ -12,6 +12,7 @@ import { ApolloCustomerErrorFullPage } from '../ApolloCustomerError/ApolloCustom
 export type WaitForCustomerProps = SetOptional<WaitForQueriesProps, 'waitFor'> &
   SetOptional<FullPageMessageProps, 'title' | 'icon'> & {
     unauthenticated?: React.ReactNode
+    allowError?: boolean
   }
 
 export function nonNullable<T>(value: T): value is NonNullable<T> {
@@ -41,7 +42,14 @@ export function nonNullable<T>(value: T): value is NonNullable<T> {
  * ```
  */
 export function WaitForCustomer(props: WaitForCustomerProps) {
-  const { waitFor = [], children, fallback, unauthenticated, ...rest } = props
+  const {
+    waitFor = [],
+    children,
+    fallback,
+    unauthenticated,
+    allowError: ignoreError,
+    ...rest
+  } = props
 
   const session = useCustomerSession()
   const queries = Array.isArray(waitFor) ? waitFor : [waitFor]
@@ -49,6 +57,7 @@ export function WaitForCustomer(props: WaitForCustomerProps) {
     queries.map((query) => (typeof query === 'boolean' ? null : query.error)).filter(nonNullable),
   )
 
+  const hasError = error && !ignoreError
   return (
     <WaitForQueries
       waitFor={!session.loggedIn ? session.query : queries}
@@ -81,8 +90,8 @@ export function WaitForCustomer(props: WaitForCustomerProps) {
             {...rest}
           />
         ))}
-      {session.loggedIn && error && <ApolloCustomerErrorFullPage error={error} />}
-      {session.loggedIn && !error && children}
+      {session.loggedIn && hasError && <ApolloCustomerErrorFullPage error={error} />}
+      {session.loggedIn && !hasError && children}
     </WaitForQueries>
   )
 }

package/components/index.ts

@@ -19,25 +19,22 @@ export * from './CompanyFields'
 export * from './ConfirmCustomer/ConfirmCustomerForm'
 export * from './ContactForm/ContactForm'
 export * from './CreateCustomerAddressForm/CreateCustomerAddressForm'
+export * from './CreditMemo'
 export * from './CustomerFab/CustomerFab'
+export * from './CustomerForms'
 export * from './CustomerMenuFabItem/CustomerMenuFabItem'
 export * from './DeleteCustomerAddressForm/DeleteCustomerAddressForm'
 export * from './EditAddressForm/EditAddressForm'
 export * from './ForgotPasswordForm/ForgotPassword.gql'
 export * from './ForgotPasswordForm/ForgotPasswordForm'
 export * from './GuestOrderOverview/GuestOrderOverviewForm'
+export * from './Invoice'
 export * from './NameFields/NameFields'
 export * from './NoOrdersFound/NoOrdersFound'
-export * from './OrderCard/OrderCard'
-export * from './OrderDetails/OrderDetails'
-export * from './OrderDetails/OrderDetails.gql'
-export * from './OrderDetails/OrderTotals'
-export * from './OrderItem/OrderItem'
-export * from './OrderItems/OrderItems'
-export * from './OrderStateLabel/OrderStateLabel'
-export * from './OrderStateLabel/OrderStateLabelInline'
+export * from './Order'
 export * from './ReorderItems/ReorderItems'
 export * from './ResetPasswordForm/ResetPasswordForm'
+export * from './Shipment'
 export * from './SignInForm/SignIn.gql'
 export * from './SignInForm/SignInForm'
 export * from './SignInForm/SignInFormInline'

package/graphql/{AccountDashboardQueryFragment.graphql → fragments/AccountDashboardQueryFragment.graphql}

@@ -9,12 +9,17 @@ fragment AccountDashboardQueryFragment on Query {
       sort: { sort_direction: DESC, sort_field: CREATED_AT }
       scope: GLOBAL
     ) {
-      items {
-        ...OrderCard
-      }
+      total_count
       page_info {
+        current_page
+        page_size
         total_pages
       }
+      items {
+        number
+        order_date
+        ...OrderStateLabel
+      }
     }
     ...AccountAddresses
   }

package/graphql/index.ts

@@ -0,0 +1,10 @@
+export * from './fragments/AccountDashboardQueryFragment.gql'
+export * from './queries/AccountDashboard.gql'
+export * from './queries/AccountDashboardAddresses.gql'
+export * from './queries/AccountDashboardCustomer.gql'
+export * from './queries/AccountDashboardOrders.gql'
+export * from './queries/CreditMemoDetailPage.gql'
+export * from './queries/InvoiceDetailPage.gql'
+export * from './queries/OrderDetailPage.gql'
+export * from './queries/ShipmentDetailPage.gql'
+export * from './inject/CustomerStoreConfig.gql'

package/graphql/queries/CreditMemoDetailPage.graphql

@@ -0,0 +1,14 @@
+query CreditMemoDetailPage($orderNumber: String!) {
+  customer {
+    orders(filter: { number: { eq: $orderNumber } }, scope: GLOBAL) {
+      items {
+        ...OrderDetails
+        id
+        number
+        credit_memos {
+          ...CreditMemo
+        }
+      }
+    }
+  }
+}

package/graphql/queries/InvoiceDetailPage.graphql

@@ -0,0 +1,14 @@
+query InvoiceDetailPage($orderNumber: String!) {
+  customer {
+    orders(filter: { number: { eq: $orderNumber } }, scope: GLOBAL) {
+      items {
+        ...OrderDetails
+        id
+        number
+        invoices {
+          ...Invoice
+        }
+      }
+    }
+  }
+}

package/graphql/queries/OrderDetailPage.graphql

@@ -0,0 +1,14 @@
+query OrderDetailPage($orderNumber: String) {
+  customer {
+    orders(filter: { number: { eq: $orderNumber } }, scope: GLOBAL) {
+      items {
+        id
+        ...OrderStateLabel
+        ...OrderDetails
+        ...OrderItems
+        ...OrderTotals
+        ...OrderAdditional
+      }
+    }
+  }
+}

package/graphql/queries/ShipmentDetailPage.graphql

@@ -0,0 +1,12 @@
+query ShipmentDetailPage($orderNumber: String!) {
+  customer {
+    orders(filter: { number: { eq: $orderNumber } }, scope: GLOBAL) {
+      items {
+        ...OrderDetails
+        shipments {
+          ...Shipment
+        }
+      }
+    }
+  }
+}

package/hooks/CustomerInfo.graphql

@@ -6,16 +6,16 @@ fragment CustomerInfo on Customer {
     ...CustomerAddress
   }
   email
-
   prefix
   firstname
   middlename
   lastname
   suffix
   gender
-
   is_subscribed
-
   date_of_birth
   taxvat
+  custom_attributes {
+    ...AttributeValueFragment
+  }
 }

package/index.ts

@@ -1,8 +1,5 @@
 export * from './components'
-export * from './graphql/AccountDashboard.gql'
-export * from './graphql/AccountDashboardAddresses.gql'
-export * from './graphql/AccountDashboardOrders.gql'
-export * from './graphql/OrderDetailPage.gql'
 export * from './hooks'
 export * from './typePolicies'
 export * from './utils'
+export * from './graphql'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-customer",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.1.0-canary.18",
+  "version": "9.1.0-canary.20",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,19 +12,19 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^9.1.0-canary.18",
-    "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.18",
-    "@graphcommerce/framer-next-pages": "^9.1.0-canary.18",
-    "@graphcommerce/framer-utils": "^9.1.0-canary.18",
-    "@graphcommerce/graphql": "^9.1.0-canary.18",
-    "@graphcommerce/graphql-mesh": "^9.1.0-canary.18",
-    "@graphcommerce/image": "^9.1.0-canary.18",
-    "@graphcommerce/magento-graphql": "^9.1.0-canary.18",
-    "@graphcommerce/magento-store": "^9.1.0-canary.18",
-    "@graphcommerce/next-ui": "^9.1.0-canary.18",
-    "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.18",
-    "@graphcommerce/react-hook-form": "^9.1.0-canary.18",
-    "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.18",
+    "@graphcommerce/ecommerce-ui": "^9.1.0-canary.20",
+    "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.20",
+    "@graphcommerce/framer-next-pages": "^9.1.0-canary.20",
+    "@graphcommerce/framer-utils": "^9.1.0-canary.20",
+    "@graphcommerce/graphql": "^9.1.0-canary.20",
+    "@graphcommerce/graphql-mesh": "^9.1.0-canary.20",
+    "@graphcommerce/image": "^9.1.0-canary.20",
+    "@graphcommerce/magento-graphql": "^9.1.0-canary.20",
+    "@graphcommerce/magento-store": "^9.1.0-canary.20",
+    "@graphcommerce/next-ui": "^9.1.0-canary.20",
+    "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.20",
+    "@graphcommerce/react-hook-form": "^9.1.0-canary.20",
+    "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.20",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",

package/utils/orderState.ts

@@ -1,6 +1,5 @@
 import { filterNonNullableKeys } from '@graphcommerce/next-ui'
-import type { OrderDetailsFragment } from '../components/OrderDetails/OrderDetails.gql'
-import type { OrderStateLabelFragment } from '../components/OrderStateLabel/OrderStateLabel.gql'
+import type { OrderDetailsFragment, OrderStateLabelFragment } from '../components/Order'
 
 export type OrderState = 'pending' | 'processing' | 'complete' | 'closed'
 

package/components/OrderCard/OrderCard.graphql

@@ -1,29 +0,0 @@
-fragment OrderCard on CustomerOrder {
-  number
-  shipments {
-    id
-    tracking {
-      ...TrackingLink
-    }
-  }
-
-  total {
-    grand_total {
-      ...Money
-    }
-  }
-  items {
-    ...OrderCardItem
-  }
-  ...OrderStateLabel
-  order_date
-  shipping_address {
-    city
-    postcode
-    firstname
-    lastname
-    street
-    country_code
-    region_id
-  }
-}