@graphcommerce/magento-product-configurable 4.0.8 → 4.0.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.md +54 -0
  2. package/ConfigurableOptions/ConfigurableOptions.tsx +4 -1
  3. package/ConfigurableProductAddToCart/ConfigurableProductAddToCart.tsx +2 -0
  4. package/SwatchList.tsx +2 -2
  5. package/Swatches/TextSwatchData.tsx +30 -34
  6. package/package.json +17 -16
  7. package/test/addConfigurableProductToCart.playwright.ts +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,59 @@
1
1
  # Change Log
2
2
 
3
+ ## 4.0.11
4
+
5
+ ### Patch Changes
6
+
7
+ - [#1399](https://github.com/graphcommerce-org/graphcommerce/pull/1399) [`fb277d8e1`](https://github.com/graphcommerce-org/graphcommerce/commit/fb277d8e1e3612c5e9cf890a30d19cfd1ff70542) Thanks [@paales](https://github.com/paales)! - Now using [@graphql-yoga](https://github.com/dotansimha/graphql-yoga) for GraphQL which has full support for [envelop](https://www.envelop.dev/) plugins.
8
+
9
+ * [#1399](https://github.com/graphcommerce-org/graphcommerce/pull/1399) [`fb277d8e1`](https://github.com/graphcommerce-org/graphcommerce/commit/fb277d8e1e3612c5e9cf890a30d19cfd1ff70542) Thanks [@paales](https://github.com/paales)! - Added a new @graphcommerce/cli package to generate the mesh so it can be generated _inside_ the @graphcommerce/graphql-mesh package to allow for better future extensibility.
10
+
11
+ - [#1399](https://github.com/graphcommerce-org/graphcommerce/pull/1399) [`da0ae7d02`](https://github.com/graphcommerce-org/graphcommerce/commit/da0ae7d0236e4908ba0bf0fa16656be516e841d4) Thanks [@paales](https://github.com/paales)! - Updated dependencies
12
+
13
+ - Updated dependencies [[`fb277d8e1`](https://github.com/graphcommerce-org/graphcommerce/commit/fb277d8e1e3612c5e9cf890a30d19cfd1ff70542), [`fb277d8e1`](https://github.com/graphcommerce-org/graphcommerce/commit/fb277d8e1e3612c5e9cf890a30d19cfd1ff70542), [`da0ae7d02`](https://github.com/graphcommerce-org/graphcommerce/commit/da0ae7d0236e4908ba0bf0fa16656be516e841d4)]:
14
+ - @graphcommerce/graphql@3.1.0
15
+ - @graphcommerce/graphql-mesh@4.1.0
16
+ - @graphcommerce/magento-cart@4.2.6
17
+ - @graphcommerce/magento-customer@4.2.4
18
+ - @graphcommerce/magento-product@4.1.7
19
+ - @graphcommerce/magento-store@4.1.7
20
+ - @graphcommerce/next-ui@4.6.1
21
+ - @graphcommerce/react-hook-form@3.1.1
22
+ - @graphcommerce/image@3.1.5
23
+ - @graphcommerce/magento-cart-items@3.0.10
24
+ - @graphcommerce/magento-category@4.0.10
25
+ - @graphcommerce/magento-product-simple@4.0.9
26
+
27
+ ## 4.0.10
28
+
29
+ ### Patch Changes
30
+
31
+ - Updated dependencies [[`4169b8c68`](https://github.com/graphcommerce-org/graphcommerce/commit/4169b8c686f682ff6e981b029f13abd87fd5f52a)]:
32
+ - @graphcommerce/magento-customer@4.2.3
33
+ - @graphcommerce/magento-cart@4.2.5
34
+ - @graphcommerce/magento-cart-items@3.0.9
35
+ - @graphcommerce/magento-product@4.1.6
36
+ - @graphcommerce/magento-product-simple@4.0.8
37
+ - @graphcommerce/magento-category@4.0.9
38
+
39
+ ## 4.0.9
40
+
41
+ ### Patch Changes
42
+
43
+ - [#1388](https://github.com/graphcommerce-org/graphcommerce/pull/1388) [`3192fab82`](https://github.com/graphcommerce-org/graphcommerce/commit/3192fab82560e2211dfcacadc3b0b305260527d8) Thanks [@mikekeehnen](https://github.com/mikekeehnen)! - ConfigurableOptions size=small didn't render correctly when label were to large. The buttons will now just wrap instead of trying to be on a grid when the size=small.
44
+
45
+ - Updated dependencies [[`3c801f45c`](https://github.com/graphcommerce-org/graphcommerce/commit/3c801f45c7df55131acf30ae2fe0d2344830d480), [`b8d04130a`](https://github.com/graphcommerce-org/graphcommerce/commit/b8d04130a1b1cb8fc85308939235140288744465), [`3192fab82`](https://github.com/graphcommerce-org/graphcommerce/commit/3192fab82560e2211dfcacadc3b0b305260527d8), [`104abd14e`](https://github.com/graphcommerce-org/graphcommerce/commit/104abd14e1585ef0d8de77937d25156b8fa1e201), [`0e425e85e`](https://github.com/graphcommerce-org/graphcommerce/commit/0e425e85ee8fed280349317ee0440c7bceea5823), [`2a125b1f9`](https://github.com/graphcommerce-org/graphcommerce/commit/2a125b1f98bb9272d96c3577f21d6c984caad892), [`8a354d1cd`](https://github.com/graphcommerce-org/graphcommerce/commit/8a354d1cd4757497ddfc9b1969a0addbc8ff616b), [`9b3488c6a`](https://github.com/graphcommerce-org/graphcommerce/commit/9b3488c6a03cc09a647f43f6a8b36d96e97e5bb8)]:
46
+ - @graphcommerce/next-ui@4.6.0
47
+ - @graphcommerce/magento-cart@4.2.4
48
+ - @graphcommerce/react-hook-form@3.1.0
49
+ - @graphcommerce/image@3.1.4
50
+ - @graphcommerce/magento-product@4.1.5
51
+ - @graphcommerce/magento-cart-items@3.0.8
52
+ - @graphcommerce/magento-category@4.0.8
53
+ - @graphcommerce/magento-customer@4.2.2
54
+ - @graphcommerce/magento-store@4.1.6
55
+ - @graphcommerce/magento-product-simple@4.0.7
56
+
3
57
  ## 4.0.8
4
58
 
5
59
  ### Patch Changes
package/ConfigurableOptions/ConfigurableOptions.tsx CHANGED
@@ -6,7 +6,7 @@ import {
6
6
  extendableComponent,
7
7
  } from '@graphcommerce/next-ui'
8
8
  import { Controller, FieldErrors, UseControllerProps } from '@graphcommerce/react-hook-form'
9
- import { BaseTextFieldProps, FormHelperText } from '@mui/material'
9
+ import { BaseTextFieldProps, FormHelperText, SxProps } from '@mui/material'
10
10
  import React from 'react'
11
11
  import { Selected, useConfigurableContext } from '../ConfigurableContext/ConfigurableContext'
12
12
  import { ColorSwatchData } from '../Swatches/ColorSwatchData'
@@ -18,6 +18,7 @@ export type ConfigurableOptionsInputProps = {
18
18
  sku: string
19
19
  errors?: FieldErrors
20
20
  size?: SwatchSize
21
+ sx?: SxProps
21
22
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
22
23
  } & UseControllerProps<any> &
23
24
  Pick<BaseTextFieldProps, 'FormHelperTextProps' | 'helperText'> & {
@@ -40,6 +41,7 @@ export function ConfigurableOptionsInput(props: ConfigurableOptionsInputProps) {
40
41
  helperText,
41
42
  optionEndLabels,
42
43
  size = 'large',
44
+ sx,
43
45
  ...controlProps
44
46
  } = props
45
47
 
@@ -81,6 +83,7 @@ export function ConfigurableOptionsInput(props: ConfigurableOptionsInputProps) {
81
83
  value={value}
82
84
  className={classes.buttonGroup}
83
85
  size={size}
86
+ sx={sx}
84
87
  >
85
88
  {option?.values?.map((val) => {
86
89
  if (!val?.uid || !option.attribute_code) return null
package/ConfigurableProductAddToCart/ConfigurableProductAddToCart.tsx CHANGED
@@ -74,6 +74,7 @@ export function ConfigurableProductAddToCart(props: ConfigurableProductAddToCart
74
74
  optionEndLabels={optionEndLabels}
75
75
  {...optionsProps}
76
76
  />
77
+
77
78
  <TextInputNumber
78
79
  variant='outlined'
79
80
  error={formState.isSubmitted && !!formState.errors.quantity}
@@ -137,6 +138,7 @@ export function ConfigurableProductAddToCart(props: ConfigurableProductAddToCart
137
138
  action={
138
139
  <PageLink href='/cart' passHref>
139
140
  <Button
141
+ id='view-shopping-cart-button'
140
142
  size='medium'
141
143
  variant='pill'
142
144
  color='secondary'
package/SwatchList.tsx CHANGED
@@ -1,7 +1,7 @@
1
- import { Maybe } from '@graphcommerce/graphql'
1
+ import type { Maybe } from '@graphcommerce/graphql-mesh'
2
2
  import { RenderType } from '@graphcommerce/next-ui'
3
3
  import React from 'react'
4
- import { ProductListItemConfigurableFragment } from './ProductListItemConfigurable.gql'
4
+ import type { ProductListItemConfigurableFragment } from './ProductListItemConfigurable.gql'
5
5
  import { ColorSwatchData } from './Swatches/ColorSwatchData'
6
6
  import { ImageSwatchData } from './Swatches/ImageSwatchData'
7
7
  import { TextSwatchData } from './Swatches/TextSwatchData'
package/Swatches/TextSwatchData.tsx CHANGED
@@ -8,7 +8,7 @@ type TextSwatchDataProps = TextSwatchDataFragment & SwatchDataProps & { sx?: SxP
8
8
 
9
9
  type OwnerState = Pick<SwatchDataProps, 'size'>
10
10
  const name = 'TextSwatchData' as const
11
- const parts = ['root', 'value', 'price', 'label', 'storeLabel'] as const
11
+ const parts = ['root', 'value', 'price', 'label', 'storeLabel', 'content'] as const
12
12
  const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
13
13
 
14
14
  export function TextSwatchData(props: TextSwatchDataProps) {
@@ -19,51 +19,47 @@ export function TextSwatchData(props: TextSwatchDataProps) {
19
19
  return (
20
20
  <Box
21
21
  className={classes.root}
22
- sx={[
23
- (theme) => ({
24
- display: 'grid',
25
- width: '100%',
26
- textAlign: 'start',
27
- gridColumnGap: theme.spacings.sm,
28
-
29
- '&:not(.sizeSmall)': {
30
- gridTemplateAreas: `
31
- "label value"
32
- "delivery delivery"
33
- `,
34
- },
35
- }),
36
- ...(Array.isArray(sx) ? sx : [sx]),
37
- ]}
22
+ sx={[{ width: '100%', height: '100%' }, ...(Array.isArray(sx) ? sx : [sx])]}
38
23
  >
39
24
  {size !== 'small' ? (
40
25
  <>
41
26
  <Box
42
- className={classes.label}
43
- sx={{
44
- typography: 'subtitle2',
45
- gridArea: 'label',
46
- }}
47
- >
48
- {value}
49
- </Box>
50
- <Box
51
- className={classes.value}
52
- sx={{
53
- typography: 'body2',
54
- gridArea: 'value',
55
- justifySelf: 'end',
56
- margin: 'auto 0',
27
+ style={{
28
+ display: 'flex',
29
+ flex: 1,
30
+ justifyContent: 'space-between',
31
+ alignItems: 'center',
32
+ flexWrap: 'wrap',
57
33
  }}
58
34
  >
59
- <Money {...price} />
35
+ <Box
36
+ className={classes.label}
37
+ sx={{
38
+ typography: 'subtitle2',
39
+ marginRight: '5px',
40
+ }}
41
+ >
42
+ {value}
43
+ </Box>
44
+
45
+ <Box
46
+ className={classes.value}
47
+ sx={{
48
+ typography: 'body2',
49
+ justifySelf: 'end',
50
+ margin: 'auto 0',
51
+ }}
52
+ >
53
+ <Money {...price} />
54
+ </Box>
60
55
  </Box>
56
+
61
57
  {size === 'large' && store_label !== value && (
62
58
  <Box
63
59
  className={classes.storeLabel}
64
60
  sx={{
65
61
  typography: 'body2',
66
- gridArea: 'delivery',
62
+ textAlign: 'left',
67
63
  color: 'text.disabled',
68
64
  }}
69
65
  >
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@graphcommerce/magento-product-configurable",
3
3
  "homepage": "https://www.graphcommerce.org/",
4
4
  "repository": "github:graphcommerce-org/graphcommerce",
5
- "version": "4.0.8",
5
+ "version": "4.0.11",
6
6
  "sideEffects": false,
7
7
  "prettier": "@graphcommerce/prettier-config-pwa",
8
8
  "eslintConfig": {
@@ -12,24 +12,25 @@
12
12
  }
13
13
  },
14
14
  "devDependencies": {
15
- "@graphcommerce/eslint-config-pwa": "^4.1.4",
16
- "@graphcommerce/prettier-config-pwa": "^4.0.5",
15
+ "@graphcommerce/eslint-config-pwa": "^4.1.5",
16
+ "@graphcommerce/prettier-config-pwa": "^4.0.6",
17
17
  "@graphcommerce/typescript-config-pwa": "^4.0.2",
18
- "@playwright/test": "^1.20.1",
19
- "type-fest": "2.12.1"
18
+ "@playwright/test": "^1.21.1",
19
+ "type-fest": "^2.12.2"
20
20
  },
21
21
  "dependencies": {
22
- "@graphcommerce/graphql": "3.0.7",
23
- "@graphcommerce/image": "3.1.3",
24
- "@graphcommerce/magento-cart": "4.2.3",
25
- "@graphcommerce/magento-cart-items": "3.0.7",
26
- "@graphcommerce/magento-category": "4.0.7",
27
- "@graphcommerce/magento-customer": "4.2.1",
28
- "@graphcommerce/magento-product": "4.1.4",
29
- "@graphcommerce/magento-product-simple": "4.0.6",
30
- "@graphcommerce/magento-store": "4.1.5",
31
- "@graphcommerce/next-ui": "4.5.1",
32
- "@graphcommerce/react-hook-form": "3.0.7"
22
+ "@graphcommerce/graphql": "3.1.0",
23
+ "@graphcommerce/graphql-mesh": "4.1.0",
24
+ "@graphcommerce/image": "3.1.5",
25
+ "@graphcommerce/magento-cart": "4.2.6",
26
+ "@graphcommerce/magento-cart-items": "3.0.10",
27
+ "@graphcommerce/magento-category": "4.0.10",
28
+ "@graphcommerce/magento-customer": "4.2.4",
29
+ "@graphcommerce/magento-product": "4.1.7",
30
+ "@graphcommerce/magento-product-simple": "4.0.9",
31
+ "@graphcommerce/magento-store": "4.1.7",
32
+ "@graphcommerce/next-ui": "4.6.1",
33
+ "@graphcommerce/react-hook-form": "3.1.1"
33
34
  },
34
35
  "peerDependencies": {
35
36
  "@lingui/macro": "^3.13.2",
package/test/addConfigurableProductToCart.playwright.ts CHANGED
@@ -8,6 +8,6 @@ test('add configurable to cart', async ({ page, productURL }) => {
8
8
 
9
9
  expect(await page.waitForSelector('text=has been added to your shopping cart')).toBeDefined()
10
10
 
11
- await Promise.all([page.waitForNavigation(), page.locator('text=View shopping cart').click()])
11
+ await Promise.all([page.waitForNavigation(), page.locator('#view-shopping-cart-button').click()])
12
12
  expect(await page.locator('h1:has-text("Cart Total")').innerText()).toBeDefined()
13
13
  })