@graphcommerce/magento-review 2.108.5 → 2.110.0
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.
- package/CHANGELOG.md +40 -0
- package/components/CreateProductReviewForm/index.tsx +2 -1
- package/components/ProductReviewChip/ProductReviewSummaryChip.graphql +4 -0
- package/components/ProductReviewChip/index.tsx +1 -21
- package/components/{ProductReviewChip → ProductReviewSummary}/ProductReviewSummary.graphql +0 -0
- package/components/ProductReviewSummary/index.tsx +63 -0
- package/components/index.ts +3 -1
- package/package.json +10 -11
- package/tsconfig.json +5 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,46 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [2.110.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-review@2.109.1...@graphcommerce/magento-review@2.110.0) (2021-11-22)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* allow styling from parent ([ed1b4dc](https://github.com/ho-nl/m2-pwa/commit/ed1b4dc446fa19244cc73f87063256809b914d15))
|
|
12
|
+
* cleanup ([7937ac5](https://github.com/ho-nl/m2-pwa/commit/7937ac5c6163a4ffe10d8a8d61847fcc86e82a9d))
|
|
13
|
+
* make stylable ([54aea4c](https://github.com/ho-nl/m2-pwa/commit/54aea4c177c708de07df9ef9c590da6bff43aea8))
|
|
14
|
+
* remove styles ([fabde1f](https://github.com/ho-nl/m2-pwa/commit/fabde1f1dba9f75dea60bb2c7c69d4793c6197cd))
|
|
15
|
+
* rename summary chip fragment ([bb23dfc](https://github.com/ho-nl/m2-pwa/commit/bb23dfc8bb82e99832196b4080d2c4c9f269cc5d))
|
|
16
|
+
* revert to SvgImageSimple ([b247c6b](https://github.com/ho-nl/m2-pwa/commit/b247c6b96979bc313e597a8ffe1275b73f38bd6a))
|
|
17
|
+
* review form size large ([9f45336](https://github.com/ho-nl/m2-pwa/commit/9f45336d310b120088fe6440dd95a51944ff77cb))
|
|
18
|
+
* use fragment types ([0a06309](https://github.com/ho-nl/m2-pwa/commit/0a0630916e191c59eed402904b9ace6b87831bd8))
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
### Features
|
|
22
|
+
|
|
23
|
+
* add ReviewSummary component ([b823669](https://github.com/ho-nl/m2-pwa/commit/b823669d32e92238d05cac181c3453a13da49601))
|
|
24
|
+
* use Rating component ([ec54f45](https://github.com/ho-nl/m2-pwa/commit/ec54f4522adb2d330bbdecc2ce032f86f13fb7a6))
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
# [2.109.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-review@2.108.6...@graphcommerce/magento-review@2.109.0) (2021-11-12)
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
### Bug Fixes
|
|
34
|
+
|
|
35
|
+
* even more translations ([1a1f988](https://github.com/ho-nl/m2-pwa/commit/1a1f98837c704b978f6b42b619d9c52f540b2d48))
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
### Features
|
|
39
|
+
|
|
40
|
+
* added tons of translations ([9bb0ac7](https://github.com/ho-nl/m2-pwa/commit/9bb0ac709b58df6ea6141e92e4923a5ca9ae2963))
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
|
|
6
46
|
# [2.108.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-review@2.107.21...@graphcommerce/magento-review@2.108.0) (2021-11-09)
|
|
7
47
|
|
|
8
48
|
|
|
@@ -119,7 +119,7 @@ export default function CreateProductReviewForm(props: CreateProductReviewFormPr
|
|
|
119
119
|
variant='outlined'
|
|
120
120
|
type='text'
|
|
121
121
|
error={!!formState.errors.nickname || !!error}
|
|
122
|
-
label={
|
|
122
|
+
label={<Trans>Name</Trans>}
|
|
123
123
|
required={required.nickname}
|
|
124
124
|
{...muiRegister('nickname', { required: required.nickname })}
|
|
125
125
|
helperText={formState.errors.nickname?.message}
|
|
@@ -139,6 +139,7 @@ export default function CreateProductReviewForm(props: CreateProductReviewFormPr
|
|
|
139
139
|
{prrvm && (
|
|
140
140
|
<StarRatingField
|
|
141
141
|
id={prrvm?.id ?? ''}
|
|
142
|
+
size='large'
|
|
142
143
|
onChange={(id, value) => {
|
|
143
144
|
const productReviewRatingInputValue =
|
|
144
145
|
data.productReviewRatingsMetadata.items.find((meta) => meta?.id === id)?.values[
|
|
@@ -6,30 +6,10 @@ export type ProductReviewChipProps = {
|
|
|
6
6
|
rating?: number
|
|
7
7
|
reviewSectionId?: string
|
|
8
8
|
max?: number
|
|
9
|
-
shapeOnly?: boolean
|
|
10
9
|
} & ChipProps
|
|
11
10
|
|
|
12
11
|
const useStyles = makeStyles(
|
|
13
12
|
(theme: Theme) => ({
|
|
14
|
-
ratingContainer: {
|
|
15
|
-
width: '100%',
|
|
16
|
-
position: 'relative',
|
|
17
|
-
},
|
|
18
|
-
rating: {
|
|
19
|
-
position: 'absolute',
|
|
20
|
-
overflow: 'hidden',
|
|
21
|
-
'& > img': {
|
|
22
|
-
display: 'inline',
|
|
23
|
-
},
|
|
24
|
-
zIndex: 1,
|
|
25
|
-
},
|
|
26
|
-
maxRating: {
|
|
27
|
-
opacity: 0.4,
|
|
28
|
-
'& > img': {
|
|
29
|
-
display: 'inline',
|
|
30
|
-
filter: 'grayscale(100%)',
|
|
31
|
-
},
|
|
32
|
-
},
|
|
33
13
|
iconStar: {
|
|
34
14
|
stroke: '#FFDA1C',
|
|
35
15
|
fill: '#FFDA1C',
|
|
@@ -39,7 +19,7 @@ const useStyles = makeStyles(
|
|
|
39
19
|
)
|
|
40
20
|
|
|
41
21
|
export default function ProductReviewChip(props: ProductReviewChipProps) {
|
|
42
|
-
const { rating, reviewSectionId = '',
|
|
22
|
+
const { rating, reviewSectionId = '', max = 5, ...chipProps } = props
|
|
43
23
|
const classes = useStyles()
|
|
44
24
|
|
|
45
25
|
if (!rating) return null
|
|
File without changes
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import { SvgImageSimple, iconStar, responsiveVal, UseStyles } from '@graphcommerce/next-ui'
|
|
2
|
+
import { makeStyles, Theme } from '@material-ui/core'
|
|
3
|
+
import { ProductReviewSummaryFragment } from './ProductReviewSummary.gql'
|
|
4
|
+
import React from 'react'
|
|
5
|
+
|
|
6
|
+
export type ProductReviewSummaryProps = ProductReviewSummaryFragment & UseStyles<typeof useStyles>
|
|
7
|
+
|
|
8
|
+
const useStyles = makeStyles(
|
|
9
|
+
(theme: Theme) => ({
|
|
10
|
+
root: {
|
|
11
|
+
width: 'max-content',
|
|
12
|
+
position: 'relative',
|
|
13
|
+
'& > div': {
|
|
14
|
+
lineHeight: 0,
|
|
15
|
+
},
|
|
16
|
+
},
|
|
17
|
+
rating: {
|
|
18
|
+
position: 'absolute',
|
|
19
|
+
top: 0,
|
|
20
|
+
overflow: 'hidden',
|
|
21
|
+
'& > div': {
|
|
22
|
+
whiteSpace: 'nowrap',
|
|
23
|
+
},
|
|
24
|
+
},
|
|
25
|
+
iconStar: {
|
|
26
|
+
stroke: 'none',
|
|
27
|
+
fill: '#FFDA1C',
|
|
28
|
+
},
|
|
29
|
+
iconStarDisabled: {
|
|
30
|
+
stroke: 'none',
|
|
31
|
+
fill: theme.palette.grey[300],
|
|
32
|
+
},
|
|
33
|
+
}),
|
|
34
|
+
{ name: 'ProductListReviewSummary' },
|
|
35
|
+
)
|
|
36
|
+
|
|
37
|
+
export default function ProductReviewSummary(props: ProductReviewSummaryProps) {
|
|
38
|
+
const { rating_summary } = props
|
|
39
|
+
const classes = useStyles(props)
|
|
40
|
+
|
|
41
|
+
if (!rating_summary) return null
|
|
42
|
+
|
|
43
|
+
return (
|
|
44
|
+
<div className={classes.root}>
|
|
45
|
+
<div>
|
|
46
|
+
<SvgImageSimple src={iconStar} size='xs' className={classes.iconStarDisabled} />
|
|
47
|
+
<SvgImageSimple src={iconStar} size='xs' className={classes.iconStarDisabled} />
|
|
48
|
+
<SvgImageSimple src={iconStar} size='xs' className={classes.iconStarDisabled} />
|
|
49
|
+
<SvgImageSimple src={iconStar} size='xs' className={classes.iconStarDisabled} />
|
|
50
|
+
<SvgImageSimple src={iconStar} size='xs' className={classes.iconStarDisabled} />
|
|
51
|
+
</div>
|
|
52
|
+
<div className={classes.rating} style={{ width: `${rating_summary}%` }}>
|
|
53
|
+
<div>
|
|
54
|
+
<SvgImageSimple src={iconStar} size='xs' className={classes.iconStar} />
|
|
55
|
+
<SvgImageSimple src={iconStar} size='xs' className={classes.iconStar} />
|
|
56
|
+
<SvgImageSimple src={iconStar} size='xs' className={classes.iconStar} />
|
|
57
|
+
<SvgImageSimple src={iconStar} size='xs' className={classes.iconStar} />
|
|
58
|
+
<SvgImageSimple src={iconStar} size='xs' className={classes.iconStar} />
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|
|
61
|
+
</div>
|
|
62
|
+
)
|
|
63
|
+
}
|
package/components/index.ts
CHANGED
|
@@ -3,11 +3,13 @@ export { default as CreateProductReviewForm } from './CreateProductReviewForm'
|
|
|
3
3
|
export { default as CustomerReview } from './CustomerReview'
|
|
4
4
|
export { default as ProductReviews } from './ProductReviews'
|
|
5
5
|
export { default as ProductReviewChip } from './ProductReviewChip'
|
|
6
|
+
export { default as ProductReviewSummary } from './ProductReviewSummary'
|
|
6
7
|
|
|
7
8
|
export * from './AccountReviews/AccountReviews.gql'
|
|
8
9
|
export * from './ProductReviews'
|
|
9
10
|
export * from './CustomerReview/CustomerReview.gql'
|
|
10
|
-
export * from './
|
|
11
|
+
export * from './ProductReviewSummary/ProductReviewSummary.gql'
|
|
12
|
+
export * from './ProductReviewChip/ProductReviewSummaryChip.gql'
|
|
11
13
|
export * from './ProductReviews/ProductReviewProductName.gql'
|
|
12
14
|
export * from './CreateProductReviewForm/CreateProductReview.gql'
|
|
13
15
|
export * from './CreateProductReviewForm/ProductReviewRatingsMetadata.gql'
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@graphcommerce/magento-review",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.110.0",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"prettier": "@graphcommerce/prettier-config-pwa",
|
|
6
6
|
"browserslist": [
|
|
@@ -14,21 +14,20 @@
|
|
|
14
14
|
},
|
|
15
15
|
"devDependencies": {
|
|
16
16
|
"@graphcommerce/browserslist-config-pwa": "^3.0.2",
|
|
17
|
-
"@graphcommerce/eslint-config-pwa": "^3.1.
|
|
17
|
+
"@graphcommerce/eslint-config-pwa": "^3.1.5",
|
|
18
18
|
"@graphcommerce/prettier-config-pwa": "^3.0.4",
|
|
19
19
|
"@graphcommerce/typescript-config-pwa": "^3.1.1",
|
|
20
20
|
"@playwright/test": "^1.16.2"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
23
|
"@apollo/client": "^3.4.16",
|
|
24
|
-
"@graphcommerce/graphql": "^2.105.
|
|
25
|
-
"@graphcommerce/image": "^2.105.
|
|
26
|
-
"@graphcommerce/magento-customer": "^3.
|
|
27
|
-
"@graphcommerce/magento-product": "^3.
|
|
28
|
-
"@graphcommerce/magento-store": "^3.2
|
|
29
|
-
"@graphcommerce/next-ui": "^3.
|
|
30
|
-
"@graphcommerce/react-hook-form": "^2.
|
|
31
|
-
"@graphql-typed-document-node/core": "^3.1.0",
|
|
24
|
+
"@graphcommerce/graphql": "^2.105.5",
|
|
25
|
+
"@graphcommerce/image": "^2.105.4",
|
|
26
|
+
"@graphcommerce/magento-customer": "^3.6.2",
|
|
27
|
+
"@graphcommerce/magento-product": "^3.6.2",
|
|
28
|
+
"@graphcommerce/magento-store": "^3.3.2",
|
|
29
|
+
"@graphcommerce/next-ui": "^3.18.0",
|
|
30
|
+
"@graphcommerce/react-hook-form": "^2.104.0",
|
|
32
31
|
"@lingui/macro": "^3.12.1",
|
|
33
32
|
"@material-ui/core": "^4.12.3",
|
|
34
33
|
"@material-ui/lab": "^4.0.0-alpha.60",
|
|
@@ -38,5 +37,5 @@
|
|
|
38
37
|
"react-dom": "^17.0.2",
|
|
39
38
|
"schema-dts": "^1.0.0"
|
|
40
39
|
},
|
|
41
|
-
"gitHead": "
|
|
40
|
+
"gitHead": "033692947ca401d23791b3fcb9d65dc8c4e32bbc"
|
|
42
41
|
}
|