@graphcommerce/magento-product-configurable 4.0.6 → 4.0.9

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 +56 -0
  2. package/ConfigurableOptions/ConfigurableOptions.tsx +4 -1
  3. package/ConfigurableProductAddToCart/ConfigurableProductAddToCart.tsx +2 -0
  4. package/Swatches/TextSwatchData.tsx +30 -34
  5. package/package.json +18 -19
  6. package/{_playwright/addConfigurableProductToCart.spec.ts → test/addConfigurableProductToCart.playwright.ts} +5 -1
  7. package/{_playwright → test}/addConfigurableProductToCart.ts +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,61 @@
1
1
  # Change Log
2
2
 
3
+ ## 4.0.9
4
+
5
+ ### Patch Changes
6
+
7
+ - [#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.
8
+
9
+ - 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)]:
10
+ - @graphcommerce/next-ui@4.6.0
11
+ - @graphcommerce/magento-cart@4.2.4
12
+ - @graphcommerce/react-hook-form@3.1.0
13
+ - @graphcommerce/image@3.1.4
14
+ - @graphcommerce/magento-product@4.1.5
15
+ - @graphcommerce/magento-cart-items@3.0.8
16
+ - @graphcommerce/magento-category@4.0.8
17
+ - @graphcommerce/magento-customer@4.2.2
18
+ - @graphcommerce/magento-store@4.1.6
19
+ - @graphcommerce/magento-product-simple@4.0.7
20
+
21
+ ## 4.0.8
22
+
23
+ ### Patch Changes
24
+
25
+ - [#1378](https://github.com/graphcommerce-org/graphcommerce/pull/1378) [`b610a6e40`](https://github.com/graphcommerce-org/graphcommerce/commit/b610a6e4049e8c9e8b5d2aeff31b8e1bfc24abe5) Thanks [@paales](https://github.com/paales)! - Pin all versions internally so we can’t end up in an unfixable state for the user
26
+
27
+ - Updated dependencies [[`b610a6e40`](https://github.com/graphcommerce-org/graphcommerce/commit/b610a6e4049e8c9e8b5d2aeff31b8e1bfc24abe5), [`22ff9df16`](https://github.com/graphcommerce-org/graphcommerce/commit/22ff9df1677742ae8e07d9b7e5b12fbb487580dc)]:
28
+ - @graphcommerce/graphql@3.0.7
29
+ - @graphcommerce/image@3.1.3
30
+ - @graphcommerce/magento-cart@4.2.3
31
+ - @graphcommerce/magento-cart-items@3.0.7
32
+ - @graphcommerce/magento-category@4.0.7
33
+ - @graphcommerce/magento-customer@4.2.1
34
+ - @graphcommerce/magento-product@4.1.4
35
+ - @graphcommerce/magento-product-simple@4.0.6
36
+ - @graphcommerce/magento-store@4.1.5
37
+ - @graphcommerce/next-ui@4.5.1
38
+ - @graphcommerce/react-hook-form@3.0.7
39
+
40
+ ## 4.0.7
41
+
42
+ ### Patch Changes
43
+
44
+ - [#1369](https://github.com/graphcommerce-org/graphcommerce/pull/1369) [`ae6449502`](https://github.com/graphcommerce-org/graphcommerce/commit/ae64495024a455bbe5188588604368c1542840c9) Thanks [@paales](https://github.com/paales)! - Upgraded dependencies
45
+
46
+ - Updated dependencies [[`892018809`](https://github.com/graphcommerce-org/graphcommerce/commit/8920188093d0422ec50580e408dc28ac5f93e46a), [`892018809`](https://github.com/graphcommerce-org/graphcommerce/commit/8920188093d0422ec50580e408dc28ac5f93e46a), [`ae6449502`](https://github.com/graphcommerce-org/graphcommerce/commit/ae64495024a455bbe5188588604368c1542840c9), [`892018809`](https://github.com/graphcommerce-org/graphcommerce/commit/8920188093d0422ec50580e408dc28ac5f93e46a), [`892018809`](https://github.com/graphcommerce-org/graphcommerce/commit/8920188093d0422ec50580e408dc28ac5f93e46a), [`6213f0b0f`](https://github.com/graphcommerce-org/graphcommerce/commit/6213f0b0f5f53d622b993d9f7ea96cbbeb5bd670), [`892018809`](https://github.com/graphcommerce-org/graphcommerce/commit/8920188093d0422ec50580e408dc28ac5f93e46a)]:
47
+ - @graphcommerce/graphql@3.0.6
48
+ - @graphcommerce/next-ui@4.5.0
49
+ - @graphcommerce/image@3.1.2
50
+ - @graphcommerce/magento-cart@4.2.2
51
+ - @graphcommerce/magento-cart-items@3.0.6
52
+ - @graphcommerce/magento-category@4.0.6
53
+ - @graphcommerce/magento-customer@4.2.0
54
+ - @graphcommerce/magento-product@4.1.3
55
+ - @graphcommerce/magento-product-simple@4.0.5
56
+ - @graphcommerce/magento-store@4.1.4
57
+ - @graphcommerce/react-hook-form@3.0.6
58
+
3
59
  ## 4.0.6
4
60
 
5
61
  ### 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/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.6",
5
+ "version": "4.0.9",
6
6
  "sideEffects": false,
7
7
  "prettier": "@graphcommerce/prettier-config-pwa",
8
8
  "eslintConfig": {
@@ -12,31 +12,30 @@
12
12
  }
13
13
  },
14
14
  "devDependencies": {
15
- "@graphcommerce/eslint-config-pwa": "^4.0.5",
16
- "@graphcommerce/prettier-config-pwa": "^4.0.3",
15
+ "@graphcommerce/eslint-config-pwa": "^4.1.4",
16
+ "@graphcommerce/prettier-config-pwa": "^4.0.5",
17
17
  "@graphcommerce/typescript-config-pwa": "^4.0.2",
18
- "@playwright/test": "^1.19.2",
19
- "react": "^17.0.1"
18
+ "@playwright/test": "^1.20.1",
19
+ "type-fest": "2.12.1"
20
20
  },
21
21
  "dependencies": {
22
- "@graphcommerce/graphql": "^3.0.4",
23
- "@graphcommerce/image": "^3.1.1",
24
- "@graphcommerce/magento-cart": "^4.1.4",
25
- "@graphcommerce/magento-cart-items": "^3.0.5",
26
- "@graphcommerce/magento-category": "^4.0.4",
27
- "@graphcommerce/magento-customer": "^4.1.4",
28
- "@graphcommerce/magento-product": "^4.0.6",
29
- "@graphcommerce/magento-product-simple": "^4.0.4",
30
- "@graphcommerce/magento-store": "^4.1.2",
31
- "@graphcommerce/next-ui": "^4.2.4",
32
- "@graphcommerce/react-hook-form": "^3.0.4",
33
- "type-fest": "^2.12.0"
22
+ "@graphcommerce/graphql": "3.0.7",
23
+ "@graphcommerce/image": "3.1.4",
24
+ "@graphcommerce/magento-cart": "4.2.4",
25
+ "@graphcommerce/magento-cart-items": "3.0.8",
26
+ "@graphcommerce/magento-category": "4.0.8",
27
+ "@graphcommerce/magento-customer": "4.2.2",
28
+ "@graphcommerce/magento-product": "4.1.5",
29
+ "@graphcommerce/magento-product-simple": "4.0.7",
30
+ "@graphcommerce/magento-store": "4.1.6",
31
+ "@graphcommerce/next-ui": "4.6.0",
32
+ "@graphcommerce/react-hook-form": "3.1.0"
34
33
  },
35
34
  "peerDependencies": {
36
35
  "@lingui/macro": "^3.13.2",
37
- "@mui/material": "^5.4.1",
36
+ "@mui/material": "5.5.3",
38
37
  "framer-motion": "^6.2.4",
39
- "next": "^12.0.10",
38
+ "next": "12.1.2",
40
39
  "react": "^17.0.2",
41
40
  "react-dom": "^17.0.2"
42
41
  }
package/{_playwright/addConfigurableProductToCart.spec.ts → test/addConfigurableProductToCart.playwright.ts} RENAMED
@@ -1,9 +1,13 @@
1
- import { test } from '@graphcommerce/magento-product/_playwright/productURL.fixture'
1
+ import { test } from '@graphcommerce/magento-product/test/productURL.fixture'
2
2
  import { expect } from '@playwright/test'
3
3
  import { addConfigurableProductToCart } from './addConfigurableProductToCart'
4
4
 
5
5
  test('add configurable to cart', async ({ page, productURL }) => {
6
6
  expect(productURL.ConfigurableProduct).toBeDefined()
7
7
  await addConfigurableProductToCart(page, productURL.ConfigurableProduct)
8
+
8
9
  expect(await page.waitForSelector('text=has been added to your shopping cart')).toBeDefined()
10
+
11
+ await Promise.all([page.waitForNavigation(), page.locator('#view-shopping-cart-button').click()])
12
+ expect(await page.locator('h1:has-text("Cart Total")').innerText()).toBeDefined()
9
13
  })
package/{_playwright → test}/addConfigurableProductToCart.ts RENAMED
@@ -1,4 +1,4 @@
1
- import { waitForGraphQlResponse } from '@graphcommerce/graphql/_playwright/apolloClient.fixture'
1
+ import { waitForGraphQlResponse } from '@graphcommerce/graphql/test/apolloClient.fixture'
2
2
  import { CreateEmptyCartDocument } from '@graphcommerce/magento-cart/hooks/CreateEmptyCart.gql'
3
3
  import { Page, expect } from '@playwright/test'
4
4
  import { ConfigurableProductAddToCartDocument } from '../ConfigurableProductAddToCart/ConfigurableProductAddToCart.gql'