@graphcommerce/magento-cart-pickup 3.0.36 → 3.1.2

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # Change Log
 
+## 3.1.2
+
+### Patch Changes
+
+- Updated dependencies [[`e167992df`](https://github.com/graphcommerce-org/graphcommerce/commit/e167992dfdc6964a392af719667f8a188626ab1b), [`9c2504b4e`](https://github.com/graphcommerce-org/graphcommerce/commit/9c2504b4ed75f41d3003c4d3339814010e85e37e)]:
+  - @graphcommerce/next-ui@4.15.0
+  - @graphcommerce/magento-cart-shipping-method@3.5.2
+  - @graphcommerce/magento-store@4.2.20
+
+## 3.1.1
+
+### Patch Changes
+
+- Updated dependencies [[`01f1588c9`](https://github.com/graphcommerce-org/graphcommerce/commit/01f1588c9200bb39dd61146e260bfa2b32060612)]:
+  - @graphcommerce/graphql@3.4.3
+  - @graphcommerce/magento-store@4.2.19
+  - @graphcommerce/magento-cart-shipping-method@3.5.1
+
+## 3.1.0
+
+### Minor Changes
+
+- [#1553](https://github.com/graphcommerce-org/graphcommerce/pull/1553) [`db5d485a2`](https://github.com/graphcommerce-org/graphcommerce/commit/db5d485a23b6b90cfabc9a1320d3c05acbaeb8e2) Thanks [@NickdeK](https://github.com/NickdeK)! - Pickup in store functionality added to checkout
+
+### Patch Changes
+
+- Updated dependencies [[`1afc6a547`](https://github.com/graphcommerce-org/graphcommerce/commit/1afc6a5473d6e31f47b5d0188801803b31865290), [`4a4579bb2`](https://github.com/graphcommerce-org/graphcommerce/commit/4a4579bb2f7da378f3fcc504405caf2560dc10f6), [`db5d485a2`](https://github.com/graphcommerce-org/graphcommerce/commit/db5d485a23b6b90cfabc9a1320d3c05acbaeb8e2), [`afcd8e4bf`](https://github.com/graphcommerce-org/graphcommerce/commit/afcd8e4bfb7010da4d5faeed85b61991ed7975f4), [`02e1988e5`](https://github.com/graphcommerce-org/graphcommerce/commit/02e1988e5f361c6f66ae30d3bbee38ef2ac062df), [`323fdee4b`](https://github.com/graphcommerce-org/graphcommerce/commit/323fdee4b15ae23e0e84dd0588cb2c6446dcfd50)]:
+  - @graphcommerce/graphql@3.4.2
+  - @graphcommerce/react-hook-form@3.3.1
+  - @graphcommerce/magento-cart-shipping-method@3.5.0
+  - @graphcommerce/next-ui@4.14.0
+  - @graphcommerce/magento-store@4.2.18
+
 ## 3.0.36
 
 ### Patch Changes

package/components/PickupLocationActionCard.tsx

@@ -0,0 +1,66 @@
+import { ActionCard, ActionCardItemRenderProps } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/react'
+import { Box, Button } from '@mui/material'
+import { GetPickupLocationsForProductsQuery } from '../graphql/GetPickupLocationsForProducts.gql'
+
+export type Location = NonNullable<
+  NonNullable<NonNullable<GetPickupLocationsForProductsQuery['pickupLocations']>['items']>[number]
+>
+
+export function PickupLocationActionCard(props: ActionCardItemRenderProps<Location>) {
+  const { onReset, name, contact_name, street, postcode, city, description, ...cardProps } = props
+
+  return (
+    <ActionCard
+      {...cardProps}
+      title={
+        <>
+          {name} {contact_name}
+        </>
+      }
+      details={
+        <>
+          <div>{`${street}, ${postcode} ${city}`}</div>
+          {cardProps.selected && description && (
+            // eslint-disable-next-line react/no-danger
+            <Box
+              dangerouslySetInnerHTML={{ __html: description }}
+              sx={(theme) => ({
+                '& table': {
+                  border: '0 transparent',
+                  width: 'auto!important',
+                  maxWidth: '100%',
+
+                  '& td': {
+                    width: 'auto!important',
+                    padding: `0 ${theme.spacings.xl}`,
+
+                    '&:first-of-type': {
+                      paddingLeft: 0,
+                    },
+                    '&:last-of-child': {
+                      paddingRight: 0,
+                    },
+                  },
+                },
+                '& p': {
+                  margin: 0,
+                },
+              })}
+            />
+          )}
+        </>
+      }
+      action={
+        <Button disableRipple variant='inline' color='secondary'>
+          <Trans id='Select' />
+        </Button>
+      }
+      reset={
+        <Button disableRipple variant='inline' color='secondary' onClick={onReset}>
+          <Trans id='Change' />
+        </Button>
+      }
+    />
+  )
+}

package/components/PickupLocationSelector.tsx

@@ -0,0 +1,120 @@
+import {
+  ApolloErrorAlert,
+  useFormAutoSubmit,
+  useFormCompose,
+  UseFormComposeOptions,
+} from '@graphcommerce/ecommerce-ui'
+import { useLazyQuery, useQuery } from '@graphcommerce/graphql'
+import { ProductInfoInput } from '@graphcommerce/graphql-mesh'
+import { useShippingMethod } from '@graphcommerce/magento-cart-shipping-method'
+import { GetShippingMethodsDocument } from '@graphcommerce/magento-cart-shipping-method/components/ShippingMethodForm/GetShippingMethods.gql'
+import { useCartQuery, useFormGqlMutationCart } from '@graphcommerce/magento-cart/hooks'
+import { ActionCardItemBase, ActionCardListForm, FormRow } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/react'
+import { debounce, TextField } from '@mui/material'
+import { useCallback, useEffect, useMemo } from 'react'
+import { GetPickupLocationsForProductsDocument } from '../graphql/GetPickupLocationsForProducts.gql'
+import {
+  SetPickupLocationOnCartDocument,
+  SetPickupLocationOnCartMutation,
+  SetPickupLocationOnCartMutationVariables,
+} from '../graphql/SetPickupLocationOnCart.gql'
+import { PickupLocationActionCard, Location } from './PickupLocationActionCard'
+
+type PickupProps = Pick<UseFormComposeOptions, 'step'>
+
+function nonNullable<T>(value: T): value is NonNullable<T> {
+  return value !== null && value !== undefined
+}
+
+export function PickupLocationSelector(props: PickupProps) {
+  const { step } = props
+  const currentShippingMethod = useShippingMethod()
+
+  const availableMethods = useCartQuery(GetShippingMethodsDocument, { fetchPolicy: 'cache-only' })
+  const productInput = (availableMethods.data?.cart?.items ?? [])?.map<ProductInfoInput>((i) =>
+    i?.__typename === 'ConfigurableCartItem'
+      ? { sku: i.configured_variant.sku ?? '' }
+      : { sku: i?.product.sku ?? '' },
+  )
+  const shippingAddress = availableMethods.data?.cart?.shipping_addresses?.[0]
+
+  const isAvailable = currentShippingMethod === 'instore-pickup' && productInput.length > 0
+
+  const form = useFormGqlMutationCart<
+    SetPickupLocationOnCartMutation,
+    SetPickupLocationOnCartMutationVariables & { searchTerm?: string }
+  >(SetPickupLocationOnCartDocument, {
+    mode: 'onChange',
+    defaultValues: {
+      searchTerm: shippingAddress?.pickup_location_code
+        ? undefined
+        : shippingAddress?.postcode ?? undefined,
+      pickupLocationCode: shippingAddress?.pickup_location_code ?? undefined,
+    },
+    onBeforeSubmit: ({ cartId, pickupLocationCode }) => ({
+      cartId,
+      pickupLocationCode,
+      pickupLocationAddress: {
+        firstname: shippingAddress?.firstname ?? '',
+        lastname: shippingAddress?.lastname ?? '',
+        city: '_',
+        country_code: shippingAddress?.country.code ?? '',
+        street: ['_'],
+        telephone: shippingAddress?.telephone ?? '_',
+        postcode: '_',
+      },
+    }),
+  })
+
+  const { control, handleSubmit, muiRegister } = form
+  const submit = handleSubmit(() => {})
+
+  useFormCompose({ form, step, submit, key: 'PickupLocationForm' })
+
+  const searchTerm = form.watch('searchTerm') ?? ''
+  const locationsQuery = useQuery(GetPickupLocationsForProductsDocument, {
+    variables: {
+      productInput,
+      searchTerm: `${searchTerm.length < 4 ? '' : searchTerm}:${shippingAddress?.country.code}`,
+    },
+  })
+
+  const locationData = locationsQuery.data ?? locationsQuery.previousData
+  const locations = useMemo(
+    () => (locationData?.pickupLocations?.items ?? []).filter(nonNullable),
+    [locationData?.pickupLocations?.items],
+  )
+
+  const selected = form.watch('pickupLocationCode')
+
+  // What to do when shippingForm is pickup but there aren't any available pickup locations?
+  if (!isAvailable) return null
+
+  return (
+    <form onSubmit={submit} noValidate>
+      {!selected && (
+        <FormRow>
+          <TextField
+            label={<Trans id='Zip code or city' />}
+            type='text'
+            {...muiRegister('searchTerm', { required: false, minLength: 4 })}
+          />
+        </FormRow>
+      )}
+
+      <ActionCardListForm<Location & ActionCardItemBase>
+        control={control}
+        name='pickupLocationCode'
+        errorMessage='Please select a pickup location'
+        items={locations.map((location) => ({
+          ...location,
+          value: String(location?.pickup_location_code),
+        }))}
+        render={PickupLocationActionCard}
+      />
+
+      <ApolloErrorAlert error={availableMethods.error} />
+    </form>
+  )
+}

package/graphql/GetPickupLocationsForProducts.graphql

@@ -0,0 +1,32 @@
+query GetPickupLocationsForProducts(
+  $searchTerm: String!
+  $radiusKm: Int = 100
+  $productInput: [ProductInfoInput!]!
+  $currentPage: Int = 1
+) {
+  pickupLocations(
+    area: { search_term: $searchTerm, radius: $radiusKm }
+    sort: { distance: ASC }
+    productsInfo: $productInput
+    pageSize: 20
+    currentPage: $currentPage
+  ) {
+    items {
+      city
+      pickup_location_code
+      contact_name
+      country_id
+      description
+      email
+      fax
+      latitude
+      longitude
+      name
+      phone
+      postcode
+      region
+      region_id
+      street
+    }
+  }
+}

package/graphql/PickupLocationItems.graphql

@@ -0,0 +1,26 @@
+fragment PickupLocationitems on Cart @inject(into: ["AvailableShippingMethods"]) {
+  items {
+    __typename
+    uid
+    ... on ConfigurableCartItem {
+      configured_variant {
+        uid
+        sku
+      }
+    }
+    product {
+      uid
+      sku
+    }
+  }
+  shipping_addresses {
+    pickup_location_code
+    firstname
+    lastname
+    telephone
+    postcode
+    country {
+      code
+    }
+  }
+}

package/graphql/SetPickupLocationOnCart.graphql

@@ -0,0 +1,24 @@
+mutation SetPickupLocationOnCart(
+  $cartId: String!
+  $pickupLocationCode: String!
+  $pickupLocationAddress: CartAddressInput!
+) {
+  setShippingAddressesOnCart(
+    input: {
+      cart_id: $cartId
+      shipping_addresses: {
+        pickup_location_code: $pickupLocationCode
+        address: $pickupLocationAddress
+      }
+    }
+  ) {
+    cart {
+      id
+      __typename
+      ...ShippingAddress
+      shipping_addresses {
+        pickup_location_code
+      }
+    }
+  }
+}

package/index.ts

@@ -1 +1 @@
-export {}
+export * from './components/PickupLocationSelector'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-cart-pickup",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "3.0.36",
+  "version": "3.1.2",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -18,16 +18,16 @@
     "@playwright/test": "^1.21.1"
   },
   "dependencies": {
-    "@graphcommerce/graphql": "3.4.1",
+    "@graphcommerce/graphql": "3.4.3",
     "@graphcommerce/image": "3.1.7",
-    "@graphcommerce/magento-cart-shipping-method": "3.4.0",
-    "@graphcommerce/magento-store": "4.2.17",
-    "@graphcommerce/next-ui": "4.13.1",
-    "@graphcommerce/react-hook-form": "3.3.0"
+    "@graphcommerce/magento-cart-shipping-method": "3.5.2",
+    "@graphcommerce/magento-store": "4.2.20",
+    "@graphcommerce/next-ui": "4.15.0",
+    "@graphcommerce/react-hook-form": "3.3.1"
   },
   "peerDependencies": {
-    "@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",

package/PickupLocationForm/PickupLocationForm.graphql

@@ -1,13 +0,0 @@
-mutation PickupLocationForm($cartId: String!, $pickupLocationCode: String!) {
-  setShippingAddressesOnCart(
-    input: { cart_id: $cartId, shipping_addresses: [{ pickup_location_code: $pickupLocationCode }] }
-  ) {
-    cart {
-      shipping_addresses {
-        ...CartAddress
-        pickup_location_code
-      }
-      ...ShippingAddress
-    }
-  }
-}

package/PickupLocationsQuery/PickupLocationsQuery.graphql

@@ -1,21 +0,0 @@
-query PickupLocationsQuery($searchTerm: String!) {
-  pickupLocations(area: { search_term: $searchTerm, radius: 100 }, pageSize: 1000) {
-    items {
-      city
-      pickup_location_code
-      contact_name
-      country_id
-      description
-      email
-      fax
-      latitude
-      longitude
-      name
-      phone
-      postcode
-      region
-      region_id
-      street
-    }
-  }
-}