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

package/components/CustomerForms/useCustomerUpdateForm.ts

@@ -0,0 +1,122 @@
+import {
+  AttributesValueArray_to_CustomAttributesFormField,
+  CustomAttributesField_to_AttributeValueInputs,
+  useAttributesForm,
+  type CustomAttributeMetadata,
+  type CustomAttributesFormValues,
+  type UseAttributesFormConfig,
+} from '@graphcommerce/magento-store'
+import { useFormGqlMutation, type UseFormGraphQlOptions } from '@graphcommerce/react-hook-form'
+import type { MutationHookOptions } from '@apollo/client'
+import type { OmitDeep } from 'type-fest'
+import type { CustomerInfoFragment } from '../../hooks'
+import {
+  UseCustomerUpdateFormDocument,
+  type UseCustomerUpdateFormMutation,
+  type UseCustomerUpdateFormMutationVariables,
+} from './UseCustomerUpdateForm.gql'
+
+export type UpdateCustomerFormValues = OmitDeep<
+  UseCustomerUpdateFormMutationVariables,
+  | 'input.dob'
+  | 'input.date_of_birth'
+  | 'input.prefix'
+  | 'input.middlename'
+  | 'input.firstname'
+  | 'input.lastname'
+  | 'input.suffix'
+  | 'input.gender'
+> &
+  CustomAttributesFormValues<
+    Record<
+      'dob' | 'prefix' | 'firstname' | 'middlename' | 'lastname' | 'suffix' | 'gender',
+      string | undefined
+    >
+  >
+
+/** Used for values prop of useFormGqlMutation */
+export function CustomerInfo_to_UpdateCustomerFormValues(
+  attributes: CustomAttributeMetadata<'CustomerAttributeMetadata'>[],
+  customer: CustomerInfoFragment,
+): UpdateCustomerFormValues {
+  const { date_of_birth, prefix, firstname, middlename, lastname, suffix, gender } = customer
+
+  return {
+    input: {},
+    custom_attributes: {
+      ...AttributesValueArray_to_CustomAttributesFormField(attributes, customer.custom_attributes),
+      dob: date_of_birth ?? undefined,
+      prefix: prefix ?? undefined,
+      firstname: firstname ?? undefined,
+      middlename: middlename ?? undefined,
+      lastname: lastname ?? undefined,
+      suffix: suffix ?? undefined,
+      gender: gender ? String(gender) : undefined,
+    },
+  }
+}
+
+/** SUsed for onBeforeSubmit of useFormGqlMutation */
+export function UpdateCustomerFormValues_to_UpdateCustomerVariables(
+  attributes: CustomAttributeMetadata<'CustomerAttributeMetadata'>[],
+  values: UpdateCustomerFormValues,
+): UseCustomerUpdateFormMutationVariables {
+  const { dob, firstname, middlename, gender, lastname, prefix, suffix, ...custom_attributes } =
+    values.custom_attributes ?? {}
+
+  return {
+    input: {
+      ...values.input,
+      firstname,
+      middlename,
+      lastname,
+      prefix,
+      suffix,
+      date_of_birth: dob,
+      gender: gender ? Number(gender) : undefined,
+      custom_attributes: [
+        ...(values.input.custom_attributes ?? []),
+        ...CustomAttributesField_to_AttributeValueInputs(attributes, custom_attributes),
+      ],
+    },
+  }
+}
+
+export type UseCustomerUpdateFormConfig = { customer: CustomerInfoFragment } & Omit<
+  UseAttributesFormConfig<'CustomerAttributeMetadata'>,
+  'formCode' | 'typename'
+>
+
+export function useCustomerUpdateForm(
+  config: UseCustomerUpdateFormConfig,
+  useFormGqlOptions?: UseFormGraphQlOptions<
+    UseCustomerUpdateFormMutation,
+    UpdateCustomerFormValues
+  >,
+  mutationOptions?: MutationHookOptions<UseCustomerUpdateFormMutation, UpdateCustomerFormValues>,
+) {
+  const { customer, ...attributeFormConfig } = config
+  const attributes = useAttributesForm({
+    formCode: 'customer_account_edit',
+    exclude: ['email'],
+    typename: 'CustomerAttributeMetadata',
+    ...attributeFormConfig,
+  })
+
+  // console.log(customer, CustomerInfo_to_UpdateCustomerFormValues(attributes, customer))
+  const form = useFormGqlMutation<UseCustomerUpdateFormMutation, UpdateCustomerFormValues>(
+    UseCustomerUpdateFormDocument,
+    {
+      values: CustomerInfo_to_UpdateCustomerFormValues(attributes, customer),
+      onBeforeSubmit: async (values, f) => {
+        const result = (await useFormGqlOptions?.onBeforeSubmit?.(values, f)) ?? values
+        if (result === false) return false
+        return UpdateCustomerFormValues_to_UpdateCustomerVariables(attributes, values)
+      },
+      ...useFormGqlOptions,
+    },
+    mutationOptions,
+  )
+
+  return { ...form, attributes }
+}

package/components/GuestOrderOverview/GuestOrderOverviewForm.tsx

@@ -1,14 +1,19 @@
 import { EmailElement, TextFieldElement } from '@graphcommerce/ecommerce-ui'
-import { Button, FormActions, FormRow, useUrlQuery } from '@graphcommerce/next-ui'
+import {
+  Button,
+  FormActions,
+  FormRow,
+  FullPageMessage,
+  iconBox,
+  IconSvg,
+  useUrlQuery,
+} from '@graphcommerce/next-ui'
 import { useFormGqlQuery } from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/macro'
 import { Box, Typography } from '@mui/material'
 import { useMemo } from 'react'
 import { ApolloCustomerErrorAlert } from '../ApolloCustomerError'
-import { OrderDetails } from '../OrderDetails/OrderDetails'
-import { OrderTotals } from '../OrderDetails/OrderTotals'
-import { OrderItems } from '../OrderItems/OrderItems'
-import { OrderStateLabel } from '../OrderStateLabel/OrderStateLabel'
+import { OrderDetails, OrderItems, OrderStateLabel, OrderTotals } from '../Order'
 import type { GuestOrderQueryVariables } from './GuestOrder.gql'
 import { GuestOrderDocument } from './GuestOrder.gql'
 
@@ -84,12 +89,24 @@ export function GuestOrderOverviewForm() {
         </Box>
       ) : (
         <>
-          <Typography sx={(theme) => ({ textAlign: 'center', mb: theme.spacings.lg })}>
-            <OrderStateLabel {...orderData.guestOrder} />
-          </Typography>
-          <OrderDetails {...orderData?.guestOrder} />
-          <OrderItems {...orderData?.guestOrder} />
-          <OrderTotals {...orderData?.guestOrder} />
+          {!orderData?.guestOrder && (
+            <FullPageMessage
+              title={<Trans>Order not found</Trans>}
+              icon={<IconSvg src={iconBox} size='xxl' />}
+            />
+          )}
+
+          {orderData?.guestOrder && (
+            <>
+              <Typography sx={(theme) => ({ textAlign: 'center', mb: theme.spacings.lg })}>
+                <OrderStateLabel {...orderData.guestOrder} />
+              </Typography>
+              <OrderDetails order={orderData.guestOrder} />
+              <OrderItems order={orderData.guestOrder} />
+              <OrderTotals order={orderData.guestOrder} />
+              {/* <OrderAdditional order={order} /> */}
+            </>
+          )}
         </>
       )}
     </>

package/components/Invoice/Invoice.graphql

@@ -0,0 +1,13 @@
+fragment Invoice on Invoice {
+  id
+  number
+  items {
+    ...InvoiceItem
+  }
+  total {
+    ...InvoiceTotal
+  }
+  comments {
+    ...SalesCommentItem
+  }
+}

package/components/Invoice/InvoiceCard.graphql

@@ -0,0 +1,9 @@
+fragment InvoiceCard on Invoice {
+  id
+  number
+  total {
+    grand_total {
+      ...Money
+    }
+  }
+}

package/components/Invoice/InvoiceCard.tsx

@@ -0,0 +1,66 @@
+import { Money } from '@graphcommerce/magento-store'
+import { breakpointVal, iconChevronRight, IconSvg, NextLink, sxx } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/macro'
+import type { SxProps, Theme } from '@mui/material'
+import { Box, lighten } from '@mui/material'
+import type { InvoiceCardFragment } from './InvoiceCard.gql'
+
+export type InvoiceCardProps = {
+  orderNumber: string
+  invoice: InvoiceCardFragment
+  sx?: SxProps<Theme>
+}
+
+export function InvoiceCard(props: InvoiceCardProps) {
+  const { invoice, sx = [], orderNumber } = props
+  const { number, total } = invoice
+
+  return (
+    <Box
+      component={NextLink}
+      href={`/account/orders/invoice?orderNumber=${orderNumber}&invoiceNumber=${number}`}
+      sx={sxx(
+        (theme) => ({
+          textDecoration: 'none',
+          color: 'text.primary',
+          px: theme.spacings.xxs,
+          py: theme.spacings.xxs,
+          gap: theme.spacings.sm,
+          background:
+            theme.palette.mode === 'light'
+              ? theme.palette.background.default
+              : lighten(theme.palette.background.default, 0.15),
+          ...breakpointVal(
+            'borderRadius',
+            theme.shape.borderRadius * 2,
+            theme.shape.borderRadius * 3,
+            theme.breakpoints.values,
+          ),
+          '&:hover': {
+            backgroundColor: theme.palette.action.hover,
+          },
+          display: 'grid',
+          gridTemplate: `
+            "number total action" / 1fr auto auto
+          `,
+          rowGap: 0.5,
+          columnGap: 1,
+        }),
+        sx,
+      )}
+    >
+      <Box sx={{ gridArea: 'number', typography: 'body1' }}>
+        <Trans>Invoice #{number}</Trans>
+      </Box>
+      <Box sx={{ gridArea: 'total', alignSelf: 'center' }}>
+        <Money {...total?.grand_total} />
+      </Box>
+
+      <IconSvg
+        src={iconChevronRight}
+        size='medium'
+        sx={{ gridArea: 'action', alignSelf: 'center' }}
+      />
+    </Box>
+  )
+}

package/components/Invoice/InvoiceDetails.tsx

@@ -0,0 +1,94 @@
+import {
+  breakpointVal,
+  DateTimeFormat,
+  extendableComponent,
+  SectionContainer,
+} from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/macro'
+import type { SxProps, Theme } from '@mui/material'
+import { Box, lighten, Typography } from '@mui/material'
+import type { InvoiceFragment } from './Invoice.gql'
+
+export type InvoiceDetailsProps = {
+  invoice: InvoiceFragment
+  sx?: SxProps<Theme>
+}
+
+const componentName = 'InvoiceDetails'
+const parts = [
+  'sectionContainer',
+  'invoiceDetailTitle',
+  'invoiceDetailContainer',
+  'invoiceDetailRow',
+] as const
+const { classes } = extendableComponent(componentName, parts)
+
+export function InvoiceDetails(props: InvoiceDetailsProps) {
+  const { invoice, sx = [] } = props
+  const { number, id } = invoice
+
+  return (
+    <SectionContainer
+      labelLeft={<Trans>Invoice details</Trans>}
+      sx={[
+        (theme) => ({
+          padding: theme.spacings.sm,
+          marginBottom: theme.spacings.md,
+          background:
+            theme.palette.mode === 'light'
+              ? theme.palette.background.default
+              : lighten(theme.palette.background.default, 0.15),
+          ...breakpointVal(
+            'borderRadius',
+            theme.shape.borderRadius * 2,
+            theme.shape.borderRadius * 3,
+            theme.breakpoints.values,
+          ),
+          '& .SectionHeader-root': {
+            mt: 0,
+            mb: theme.spacings.xs,
+          },
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
+      <Box
+        className={classes.invoiceDetailContainer}
+        sx={[
+          (theme) => ({
+            gridColumnGap: theme.spacings.xxl,
+            gridRowGap: theme.spacings.md,
+            display: 'grid',
+            [theme.breakpoints.up('sm')]: {
+              gridTemplateColumns: '1fr 1fr',
+              marginTop: theme.spacings.xxs,
+            },
+          }),
+          ...(Array.isArray(sx) ? sx : [sx]),
+        ]}
+      >
+        <Box className={classes.invoiceDetailRow}>
+          <SectionContainer
+            variantLeft='h5'
+            labelLeft={<Trans>Invoice number</Trans>}
+            className={classes.invoiceDetailTitle}
+            sx={{ '& .SectionHeader-root': { marginTop: 0, paddingBottom: '4px' } }}
+          >
+            <Typography>{number}</Typography>
+          </SectionContainer>
+        </Box>
+
+        <Box className={classes.invoiceDetailRow}>
+          {/* <SectionContainer
+            variantLeft='h5'
+            labelLeft={<Trans>Invoice ID</Trans>}
+            className={classes.invoiceDetailTitle}
+            sx={{ '& .SectionHeader-root': { marginTop: 0, paddingBottom: '4px' } }}
+          >
+            <Typography>{id}</Typography>
+          </SectionContainer> */}
+        </Box>
+      </Box>
+    </SectionContainer>
+  )
+}

package/components/Invoice/InvoiceItem.graphql

@@ -0,0 +1,25 @@
+fragment InvoiceItem on InvoiceItemInterface {
+  __typename
+  id
+  discounts {
+    amount {
+      ...Money
+    }
+    label
+  }
+  product_name
+  product_sale_price {
+    ...Money
+  }
+  product_sku
+  quantity_invoiced
+  order_item {
+    id
+    product {
+      uid
+      thumbnail {
+        ...ProductImage
+      }
+    }
+  }
+}

package/components/Invoice/InvoiceItem.tsx

@@ -0,0 +1,125 @@
+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 { InvoiceItemFragment } from './InvoiceItem.gql'
+
+export type InvoiceItemProps = Omit<ActionCardProps, 'value' | 'image' | 'title'> & {
+  item: InvoiceItemFragment
+  priceModifiers?: PriceModifier[]
+}
+
+export function InvoiceItem(props: InvoiceItemProps) {
+  const { item, priceModifiers, size = 'responsive', ...rest } = props
+  const {
+    product_name,
+    product_sku,
+    quantity_invoiced,
+    product_sale_price,
+    discounts,
+    order_item,
+    id,
+  } = 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}
+      action={<>&nbsp;</>}
+      price={
+        <Money
+          currency={product_sale_price.currency}
+          value={(product_sale_price.value ?? 0) * (quantity_invoiced ?? 1)}
+        />
+      }
+      secondaryAction={
+        <>
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              color: 'text.secondary',
+              mt: 1,
+              gap: '10px',
+              justifyContent: 'start',
+            }}
+          >
+            {quantity_invoiced}
+            {' ⨉ '}
+            <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/Invoice/InvoiceItems.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 { InvoiceFragment } from './Invoice.gql'
+import { InvoiceItem } from './InvoiceItem'
+
+export type InvoiceItemsProps = {
+  invoice: InvoiceFragment
+  sx?: SxProps<Theme>
+  layout?: 'list' | 'grid'
+  size?: 'small' | 'medium' | 'large'
+}
+
+const componentName = 'InvoiceItems'
+const parts = ['root', 'items', 'actionCard'] as const
+const { classes } = extendableComponent(componentName, parts)
+
+export function InvoiceItems(props: InvoiceItemsProps) {
+  const { invoice, sx = [], layout = 'list', size } = props
+
+  const items = (invoice.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>Invoiced 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) => (
+            <InvoiceItem key={item.id} item={item} size={size} layout={layout} variant='default' />
+          ))}
+        </ActionCardLayout>
+      </SectionContainer>
+    </Box>
+  )
+}

package/components/Invoice/InvoiceTotal.graphql

@@ -0,0 +1,29 @@
+fragment InvoiceTotal on InvoiceTotal {
+  subtotal {
+    ...Money
+  }
+  shipping_handling {
+    ...ShippingHandling
+  }
+  total_shipping {
+    ...Money
+  }
+  discounts {
+    amount {
+      ...Money
+    }
+    label
+  }
+  base_grand_total {
+    ...Money
+  }
+  grand_total {
+    ...Money
+  }
+  taxes {
+    ...TaxItem
+  }
+  total_tax {
+    ...Money
+  }
+}