@riosst100/pwa-marketplace 3.3.1 → 3.3.2
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/package.json +1 -1
- package/src/components/AboutUs/aboutUs.css +111 -0
- package/src/components/AboutUs/aboutUs.js +6 -2
- package/src/components/PrivacyPolicy/index.js +1 -0
- package/src/components/PrivacyPolicy/privacyPolicy.css +125 -0
- package/src/components/PrivacyPolicy/privacyPolicy.js +13 -0
- package/src/components/TermsOfUse/index.js +1 -0
- package/src/components/TermsOfUse/termsOfUse.css +113 -0
- package/src/components/TermsOfUse/termsOfUse.js +13 -0
- package/src/intercept.js +14 -0
- package/src/overwrites/venia-ui/lib/components/Footer/footer.js +2 -2
- package/src/overwrites/venia-ui/lib/components/ProductFullDetail/components/productFAQ.js +82 -0
- package/src/overwrites/venia-ui/lib/components/ProductFullDetail/productFullDetail.js +47 -39
- package/src/talons/ProductFAQ/productFaq.gql.js +39 -0
- package/src/talons/ProductFAQ/useProductFAQ.js +48 -0
- package/src/talons/RFQ/useRFQ.js +0 -2
package/package.json
CHANGED
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
.root {
|
|
2
|
+
/* Theme color variables mapped from tcg-theme-preset.js */
|
|
3
|
+
--tcg-color-text: #1B1B1B; /* textColor.colorDefault */
|
|
4
|
+
--tcg-color-link: #3d84ff; /* brand.base */
|
|
5
|
+
--tcg-color-link-hover: #f76b1c; /* brand.dark */
|
|
6
|
+
--tcg-color-border: #E6E9EA; /* gray.100 */
|
|
7
|
+
--tcg-color-table-head-bg: #F8F8F8; /* gray.50 */
|
|
8
|
+
--tcg-color-muted: #999999; /* gray.200 */
|
|
9
|
+
|
|
10
|
+
max-width: 1300px;
|
|
11
|
+
margin: 0 auto;
|
|
12
|
+
padding: 0 1rem;
|
|
13
|
+
color: var(--tcg-color-text);
|
|
14
|
+
}
|
|
15
|
+
@media (min-width: 768px) {
|
|
16
|
+
.root { padding: 0; }
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
/* Ensure CMS-injected wrapper classes are styled */
|
|
20
|
+
:global(.row-content){
|
|
21
|
+
max-width: 1300px;
|
|
22
|
+
width: 100%;
|
|
23
|
+
margin: 0 auto;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.root h1,
|
|
27
|
+
.root h2,
|
|
28
|
+
.root h3 {
|
|
29
|
+
margin: 1.25rem 0 0.75rem;
|
|
30
|
+
font-weight: 600;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.root p {
|
|
34
|
+
margin: 0.75rem 0;
|
|
35
|
+
line-height: 1.7;
|
|
36
|
+
color: var(--tcg-color-text);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.root ul,
|
|
40
|
+
.root ol {
|
|
41
|
+
margin: 0.75rem 0 0.75rem 1.25rem;
|
|
42
|
+
padding-left: 1.25rem;
|
|
43
|
+
}
|
|
44
|
+
.root ul { list-style: disc; }
|
|
45
|
+
.root ol { list-style: decimal; }
|
|
46
|
+
.root li { margin: 0.375rem 0; }
|
|
47
|
+
|
|
48
|
+
.root a {
|
|
49
|
+
color: var(--tcg-color-link);
|
|
50
|
+
text-decoration: underline;
|
|
51
|
+
text-underline-offset: 2px;
|
|
52
|
+
}
|
|
53
|
+
.root a:hover { color: var(--tcg-color-link-hover); }
|
|
54
|
+
|
|
55
|
+
.root img {
|
|
56
|
+
max-width: 100%;
|
|
57
|
+
height: auto;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
/* Headings scale */
|
|
61
|
+
.root h1 {
|
|
62
|
+
text-align: center;
|
|
63
|
+
font-size: 1.5rem;
|
|
64
|
+
line-height: 1.3;
|
|
65
|
+
margin: 1.5rem 0 0.75rem;
|
|
66
|
+
}
|
|
67
|
+
@media (min-width: 768px) {
|
|
68
|
+
.root h1 { font-size: 1.75rem; }
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.root h2 {
|
|
72
|
+
font-size: 1.125rem;
|
|
73
|
+
margin: 1.25rem 0 0.5rem;
|
|
74
|
+
}
|
|
75
|
+
@media (min-width: 768px) {
|
|
76
|
+
.root h2 { font-size: 1.25rem; }
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.root h3 {
|
|
80
|
+
font-size: 1rem;
|
|
81
|
+
margin: 1rem 0 0.5rem;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.root hr {
|
|
85
|
+
border: 0;
|
|
86
|
+
border-top: 1px solid var(--tcg-color-border);
|
|
87
|
+
margin: 2rem 0;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.root table {
|
|
91
|
+
width: 100%;
|
|
92
|
+
border-collapse: collapse;
|
|
93
|
+
margin: 1rem 0;
|
|
94
|
+
}
|
|
95
|
+
.root th,
|
|
96
|
+
.root td {
|
|
97
|
+
border: 1px solid var(--tcg-color-border);
|
|
98
|
+
padding: 0.5rem 0.75rem;
|
|
99
|
+
text-align: left;
|
|
100
|
+
}
|
|
101
|
+
.root thead th {
|
|
102
|
+
background: var(--tcg-color-table-head-bg);
|
|
103
|
+
font-weight: 600;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.root blockquote {
|
|
107
|
+
border-left: 3px solid var(--tcg-color-border);
|
|
108
|
+
padding-left: 1rem;
|
|
109
|
+
color: var(--tcg-color-muted);
|
|
110
|
+
margin: 1rem 0;
|
|
111
|
+
}
|
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import CMSPage from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/RootComponents/CMS/cms';
|
|
3
|
-
|
|
3
|
+
import classes from './aboutUs.css';
|
|
4
4
|
|
|
5
5
|
const AboutUs = () => {
|
|
6
|
-
return
|
|
6
|
+
return (
|
|
7
|
+
<div className={classes.root}>
|
|
8
|
+
<CMSPage identifier="about-us" />
|
|
9
|
+
</div>
|
|
10
|
+
);
|
|
7
11
|
}
|
|
8
12
|
|
|
9
13
|
export default AboutUs;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {default} from './privacyPolicy';
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
.root {
|
|
2
|
+
/* Theme color variables mapped from tcg-theme-preset.js */
|
|
3
|
+
--tcg-color-text: #1B1B1B; /* textColor.colorDefault */
|
|
4
|
+
--tcg-color-link: #3d84ff; /* brand.base */
|
|
5
|
+
--tcg-color-link-hover: #f76b1c; /* brand.dark */
|
|
6
|
+
--tcg-color-border: #E6E9EA; /* gray.100 */
|
|
7
|
+
--tcg-color-table-head-bg: #F8F8F8; /* gray.50 */
|
|
8
|
+
--tcg-color-muted: #999999; /* gray.200 */
|
|
9
|
+
|
|
10
|
+
max-width: 1300px;
|
|
11
|
+
margin: 0 auto;
|
|
12
|
+
padding: 0 1rem;
|
|
13
|
+
color: var(--tcg-color-text);
|
|
14
|
+
}
|
|
15
|
+
:global(.row-content){
|
|
16
|
+
max-width: 1300px;
|
|
17
|
+
width: 100%;
|
|
18
|
+
margin: 0 auto;
|
|
19
|
+
}
|
|
20
|
+
@media (min-width: 768px) {
|
|
21
|
+
.root { padding: 0; }
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.root h1,
|
|
25
|
+
.root h2,
|
|
26
|
+
.root h3 {
|
|
27
|
+
margin: 1.25rem 0 0.75rem;
|
|
28
|
+
font-weight: 600;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.root p {
|
|
32
|
+
margin: 0.75rem 0;
|
|
33
|
+
line-height: 1.7;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.root ul,
|
|
37
|
+
.root ol {
|
|
38
|
+
margin: 0.75rem 0 0.75rem 1.25rem;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.root a {
|
|
42
|
+
color: var(--tcg-color-link);
|
|
43
|
+
text-decoration: underline;
|
|
44
|
+
}
|
|
45
|
+
.root a:hover {
|
|
46
|
+
color: var(--tcg-color-link-hover);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.root img {
|
|
50
|
+
max-width: 100%;
|
|
51
|
+
height: auto;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
/* Enhanced typography & layout for CMS content */
|
|
55
|
+
.root > :first-child { margin-top: 0; }
|
|
56
|
+
.root > :last-child { margin-bottom: 0; }
|
|
57
|
+
|
|
58
|
+
.root h1 {
|
|
59
|
+
text-align: center;
|
|
60
|
+
font-size: 1.5rem;
|
|
61
|
+
line-height: 1.3;
|
|
62
|
+
margin: 1.5rem 0 0.75rem;
|
|
63
|
+
}
|
|
64
|
+
@media (min-width: 768px) {
|
|
65
|
+
.root h1 { font-size: 1.75rem; }
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.root h2 {
|
|
69
|
+
font-size: 1.125rem;
|
|
70
|
+
margin: 1.25rem 0 0.5rem;
|
|
71
|
+
}
|
|
72
|
+
@media (min-width: 768px) {
|
|
73
|
+
.root h2 { font-size: 1.25rem; }
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.root h3 {
|
|
77
|
+
font-size: 1rem;
|
|
78
|
+
margin: 1rem 0 0.5rem;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.root p {
|
|
82
|
+
color: var(--tcg-color-text);
|
|
83
|
+
line-height: 1.8;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.root ul,
|
|
87
|
+
.root ol {
|
|
88
|
+
padding-left: 1.25rem;
|
|
89
|
+
}
|
|
90
|
+
.root ul { list-style: disc; }
|
|
91
|
+
.root ol { list-style: decimal; }
|
|
92
|
+
.root li { margin: 0.375rem 0; }
|
|
93
|
+
|
|
94
|
+
.root a {
|
|
95
|
+
text-underline-offset: 2px;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.root hr {
|
|
99
|
+
border: 0;
|
|
100
|
+
border-top: 1px solid var(--tcg-color-border);
|
|
101
|
+
margin: 2rem 0;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.root table {
|
|
105
|
+
width: 100%;
|
|
106
|
+
border-collapse: collapse;
|
|
107
|
+
margin: 1rem 0;
|
|
108
|
+
}
|
|
109
|
+
.root th,
|
|
110
|
+
.root td {
|
|
111
|
+
border: 1px solid var(--tcg-color-border);
|
|
112
|
+
padding: 0.5rem 0.75rem;
|
|
113
|
+
text-align: left;
|
|
114
|
+
}
|
|
115
|
+
.root thead th {
|
|
116
|
+
background: var(--tcg-color-table-head-bg);
|
|
117
|
+
font-weight: 600;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.root blockquote {
|
|
121
|
+
border-left: 3px solid var(--tcg-color-border);
|
|
122
|
+
padding-left: 1rem;
|
|
123
|
+
color: var(--tcg-color-muted);
|
|
124
|
+
margin: 1rem 0;
|
|
125
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import CMSPage from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/RootComponents/CMS/cms';
|
|
3
|
+
import classes from './privacyPolicy.css';
|
|
4
|
+
|
|
5
|
+
const PrivacyPolicy = () => {
|
|
6
|
+
return (
|
|
7
|
+
<div className={classes.root}>
|
|
8
|
+
<CMSPage identifier="privacy-policy" />
|
|
9
|
+
</div>
|
|
10
|
+
);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
export default PrivacyPolicy;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {default} from './termsOfUse';
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
.root {
|
|
2
|
+
/* Theme color variables mapped from tcg-theme-preset.js */
|
|
3
|
+
--tcg-color-text: #1B1B1B; /* textColor.colorDefault */
|
|
4
|
+
--tcg-color-link: #3d84ff; /* brand.base */
|
|
5
|
+
--tcg-color-link-hover: #f76b1c; /* brand.dark */
|
|
6
|
+
--tcg-color-border: #E6E9EA; /* gray.100 */
|
|
7
|
+
--tcg-color-table-head-bg: #F8F8F8; /* gray.50 */
|
|
8
|
+
--tcg-color-muted: #999999; /* gray.200 */
|
|
9
|
+
|
|
10
|
+
max-width: 1300px;
|
|
11
|
+
margin: 0 auto;
|
|
12
|
+
padding: 0 1rem;
|
|
13
|
+
color: var(--tcg-color-text);
|
|
14
|
+
}
|
|
15
|
+
@media (min-width: 768px) {
|
|
16
|
+
.root { padding: 0; }
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
/* Ensure CMS-injected wrapper classes are styled */
|
|
20
|
+
:global(.row-content){
|
|
21
|
+
max-width: 1300px;
|
|
22
|
+
width: 100%;
|
|
23
|
+
margin: 0 auto;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.root h1,
|
|
27
|
+
.root h2,
|
|
28
|
+
.root h3 {
|
|
29
|
+
margin: 1.25rem 0 0.75rem;
|
|
30
|
+
font-weight: 600;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.root p {
|
|
34
|
+
margin: 0.75rem 0;
|
|
35
|
+
line-height: 1.7;
|
|
36
|
+
color: var(--tcg-color-text);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.root ul,
|
|
40
|
+
.root ol {
|
|
41
|
+
margin: 0.75rem 0 0.75rem 1.25rem;
|
|
42
|
+
padding-left: 1.25rem;
|
|
43
|
+
}
|
|
44
|
+
.root ul { list-style: disc; }
|
|
45
|
+
.root ol { list-style: decimal; }
|
|
46
|
+
.root li { margin: 0.375rem 0; }
|
|
47
|
+
|
|
48
|
+
.root a {
|
|
49
|
+
color: var(--tcg-color-link);
|
|
50
|
+
text-decoration: underline;
|
|
51
|
+
text-underline-offset: 2px;
|
|
52
|
+
}
|
|
53
|
+
.root a:hover {
|
|
54
|
+
color: var(--tcg-color-link-hover);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.root img {
|
|
58
|
+
max-width: 100%;
|
|
59
|
+
height: auto;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
/* Headings scale */
|
|
63
|
+
.root h1 {
|
|
64
|
+
text-align: center;
|
|
65
|
+
font-size: 1.5rem;
|
|
66
|
+
line-height: 1.3;
|
|
67
|
+
margin: 1.5rem 0 0.75rem;
|
|
68
|
+
}
|
|
69
|
+
@media (min-width: 768px) {
|
|
70
|
+
.root h1 { font-size: 1.75rem; }
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.root h2 {
|
|
74
|
+
font-size: 1.125rem;
|
|
75
|
+
margin: 1.25rem 0 0.5rem;
|
|
76
|
+
}
|
|
77
|
+
@media (min-width: 768px) {
|
|
78
|
+
.root h2 { font-size: 1.25rem; }
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.root h3 {
|
|
82
|
+
font-size: 1rem;
|
|
83
|
+
margin: 1rem 0 0.5rem;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.root hr {
|
|
87
|
+
border: 0;
|
|
88
|
+
border-top: 1px solid var(--tcg-color-border);
|
|
89
|
+
margin: 2rem 0;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.root table {
|
|
93
|
+
width: 100%;
|
|
94
|
+
border-collapse: collapse;
|
|
95
|
+
margin: 1rem 0;
|
|
96
|
+
}
|
|
97
|
+
.root th,
|
|
98
|
+
.root td {
|
|
99
|
+
border: 1px solid var(--tcg-color-border);
|
|
100
|
+
padding: 0.5rem 0.75rem;
|
|
101
|
+
text-align: left;
|
|
102
|
+
}
|
|
103
|
+
.root thead th {
|
|
104
|
+
background: var(--tcg-color-table-head-bg);
|
|
105
|
+
font-weight: 600;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.root blockquote {
|
|
109
|
+
border-left: 3px solid var(--tcg-color-border);
|
|
110
|
+
padding-left: 1rem;
|
|
111
|
+
color: var(--tcg-color-muted);
|
|
112
|
+
margin: 1rem 0;
|
|
113
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import CMSPage from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/RootComponents/CMS/cms';
|
|
3
|
+
import classes from './termsOfUse.css';
|
|
4
|
+
|
|
5
|
+
const TermsOfUse = () => {
|
|
6
|
+
return (
|
|
7
|
+
<div className={classes.root}>
|
|
8
|
+
<CMSPage identifier="terms-of-use" />
|
|
9
|
+
</div>
|
|
10
|
+
);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
export default TermsOfUse;
|
package/src/intercept.js
CHANGED
|
@@ -101,6 +101,20 @@ module.exports = targets => {
|
|
|
101
101
|
path: require.resolve("./components/AboutUs/index.js"),
|
|
102
102
|
authed: false,
|
|
103
103
|
},
|
|
104
|
+
{
|
|
105
|
+
exact: true,
|
|
106
|
+
name: "PrivacyPolicy",
|
|
107
|
+
pattern: "/privacy-policy",
|
|
108
|
+
path: require.resolve("./components/PrivacyPolicy/index.js"),
|
|
109
|
+
authed: false,
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
exact: true,
|
|
113
|
+
name: "TermsOfUse",
|
|
114
|
+
pattern: "/terms-of-use",
|
|
115
|
+
path: require.resolve("./components/TermsOfUse/index.js"),
|
|
116
|
+
authed: false,
|
|
117
|
+
},
|
|
104
118
|
{
|
|
105
119
|
exact: true,
|
|
106
120
|
name: "HelpCenterQuestionDetail",
|
|
@@ -130,7 +130,7 @@ const Footer = props => {
|
|
|
130
130
|
<p className="text-colorDefault">{copyrightText || null}</p>
|
|
131
131
|
<ul className="flex flex-row gap-x-2.5">
|
|
132
132
|
<li data-cy="Footer-terms" className={classes.terms}>
|
|
133
|
-
<Link to="/" className="text-colorDefault underline">
|
|
133
|
+
<Link to="/terms-of-use" className="text-colorDefault underline">
|
|
134
134
|
<FormattedMessage
|
|
135
135
|
id={'footer.termsText'}
|
|
136
136
|
defaultMessage={'Terms of Use'}
|
|
@@ -139,7 +139,7 @@ const Footer = props => {
|
|
|
139
139
|
</li>
|
|
140
140
|
<Divider className="w-[1px] !h-[20px]" />
|
|
141
141
|
<li data-cy="Footer-privacy" className={classes.privacy}>
|
|
142
|
-
<Link to="/" className="text-colorDefault underline">
|
|
142
|
+
<Link to="/privacy-policy" className="text-colorDefault underline">
|
|
143
143
|
<FormattedMessage
|
|
144
144
|
id={'footer.privacyText'}
|
|
145
145
|
defaultMessage={'Privacy Policy'}
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
import React, { useEffect, useMemo } from 'react';
|
|
2
|
+
import Collapsible from '@riosst100/pwa-marketplace/src/components/commons/Collapsible';
|
|
3
|
+
|
|
4
|
+
import useProductFAQ from '@riosst100/pwa-marketplace/src/talons/ProductFAQ/useProductFAQ';
|
|
5
|
+
|
|
6
|
+
const ProductFAQ = ({ productId }) => {
|
|
7
|
+
const { loadProductFaqList, productFaqListState } = useProductFAQ();
|
|
8
|
+
|
|
9
|
+
useEffect(() => {
|
|
10
|
+
if (productId) {
|
|
11
|
+
loadProductFaqList({ productId });
|
|
12
|
+
}
|
|
13
|
+
}, [productId, loadProductFaqList]);
|
|
14
|
+
|
|
15
|
+
const { data, loading, error } = productFaqListState || {};
|
|
16
|
+
const items = useMemo(() => {
|
|
17
|
+
const list = data?.productFaqList || [];
|
|
18
|
+
// Show only active items if status provided (1 = active)
|
|
19
|
+
return list.filter(it => it?.status === 1 || it?.status === '1' || it?.status === true || it?.status === 'true' || it?.status === undefined);
|
|
20
|
+
}, [data]);
|
|
21
|
+
|
|
22
|
+
if (loading) {
|
|
23
|
+
return <div className="p-4 text-sm text-gray-600">Loading FAQs…</div>;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
if (error) {
|
|
27
|
+
return (
|
|
28
|
+
<div className="p-4 text-sm text-red-600">
|
|
29
|
+
Failed to load FAQs. Please try again.
|
|
30
|
+
</div>
|
|
31
|
+
);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
if (!items.length) {
|
|
35
|
+
return (
|
|
36
|
+
<div className="p-4 text-sm text-gray-600">
|
|
37
|
+
No FAQs available for this product.
|
|
38
|
+
</div>
|
|
39
|
+
);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
return (
|
|
43
|
+
<div className="space-y-2">
|
|
44
|
+
{items.map((faq, idx) => {
|
|
45
|
+
const headerStyle = {
|
|
46
|
+
color: faq?.title_color || undefined,
|
|
47
|
+
background: faq?.title_background || undefined,
|
|
48
|
+
fontSize: faq?.title_size ? `${faq.title_size}px` : undefined,
|
|
49
|
+
borderColor: faq?.border_color || undefined,
|
|
50
|
+
borderWidth: faq?.border_width ? `${faq.border_width}px` : undefined,
|
|
51
|
+
borderRadius: faq?.border_radius ? `${faq.border_radius}px` : undefined,
|
|
52
|
+
marginBottom: faq?.margin_bottom ? `${faq.margin_bottom}px` : undefined,
|
|
53
|
+
marginLeft: faq?.margin_left ? `${faq.margin_left}px` : undefined
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
const bodyStyle = {
|
|
57
|
+
color: faq?.body_color || undefined,
|
|
58
|
+
background: faq?.body_background || undefined
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
const title = faq?.title || `Question ${idx + 1}`;
|
|
62
|
+
|
|
63
|
+
return (
|
|
64
|
+
<Collapsible
|
|
65
|
+
key={`${faq?.question_id || idx}`}
|
|
66
|
+
title={title}
|
|
67
|
+
rootClassName="border-b border-gray-100"
|
|
68
|
+
contentWrapperClassName="!mt-0"
|
|
69
|
+
titleStyle={headerStyle}
|
|
70
|
+
>
|
|
71
|
+
<div style={bodyStyle} className="p-3 text-sm leading-relaxed">
|
|
72
|
+
{faq?.answer || 'No answer provided.'}
|
|
73
|
+
</div>
|
|
74
|
+
</Collapsible>
|
|
75
|
+
);
|
|
76
|
+
})}
|
|
77
|
+
</div>
|
|
78
|
+
);
|
|
79
|
+
};
|
|
80
|
+
|
|
81
|
+
export default ProductFAQ;
|
|
82
|
+
|
|
@@ -30,6 +30,7 @@ import { Star1, Verify, Sms, Message, Shop, ArrowUp2 } from 'iconsax-react';
|
|
|
30
30
|
import { Link } from "react-router-dom";
|
|
31
31
|
import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
|
|
32
32
|
import { GET_PAYMENT_TYPES } from '@riosst100/pwa-marketplace/src/talons/ProductContent/productContent.gql.js';
|
|
33
|
+
import ProductFAQ from './components/productFAQ';
|
|
33
34
|
|
|
34
35
|
const WishlistButton = React.lazy(() => import('@magento/venia-ui/lib/components/Wishlist/AddToListButton'));
|
|
35
36
|
const Options = React.lazy(() => import('@magento/venia-ui/lib/components/ProductOptions'));
|
|
@@ -86,7 +87,7 @@ const ProductDetailsCollapsible = (props) => {
|
|
|
86
87
|
|
|
87
88
|
const ProductFullDetail = props => {
|
|
88
89
|
const { product } = props;
|
|
89
|
-
|
|
90
|
+
|
|
90
91
|
const history = useHistory();
|
|
91
92
|
|
|
92
93
|
const { search } = useLocation();
|
|
@@ -118,7 +119,7 @@ const ProductFullDetail = props => {
|
|
|
118
119
|
errorAddingProductToCart,
|
|
119
120
|
isAddProductLoading,
|
|
120
121
|
} = talonProps;
|
|
121
|
-
|
|
122
|
+
|
|
122
123
|
const [, { addToast }] = useToasts();
|
|
123
124
|
const [{ isSignedIn }] = useUserContext();
|
|
124
125
|
|
|
@@ -348,7 +349,7 @@ const ProductFullDetail = props => {
|
|
|
348
349
|
pagebuilder: pagebuilder
|
|
349
350
|
};
|
|
350
351
|
}, [productDetailsAttributes, productDetails.sku, formatMessage]);
|
|
351
|
-
|
|
352
|
+
|
|
352
353
|
const shortDescription = productDetails.shortDescription ? (
|
|
353
354
|
<RichText
|
|
354
355
|
rootClassName="px-0"
|
|
@@ -409,7 +410,7 @@ const ProductFullDetail = props => {
|
|
|
409
410
|
}, []),
|
|
410
411
|
[customAttributesDetails.list]
|
|
411
412
|
);
|
|
412
|
-
|
|
413
|
+
|
|
413
414
|
const ProductTNC = () => (
|
|
414
415
|
<div className={cn(contentContainerClass, classes.contentContainerTabOverride)}>
|
|
415
416
|
<p>{customAttributesList.map((data, index) => {
|
|
@@ -440,21 +441,7 @@ const ProductFullDetail = props => {
|
|
|
440
441
|
</div>
|
|
441
442
|
)
|
|
442
443
|
|
|
443
|
-
|
|
444
|
-
<div className={cn(contentContainerClass, classes.contentContainerTabOverride)}>
|
|
445
|
-
{customAttributesList.map((data, index) => {
|
|
446
|
-
if (data.code == "faq") {
|
|
447
|
-
return (
|
|
448
|
-
<RichText
|
|
449
|
-
rootClassName="px-0"
|
|
450
|
-
content={data.value}
|
|
451
|
-
/>
|
|
452
|
-
);
|
|
453
|
-
}
|
|
454
|
-
})}
|
|
455
|
-
|
|
456
|
-
</div>
|
|
457
|
-
)
|
|
444
|
+
|
|
458
445
|
|
|
459
446
|
|
|
460
447
|
const getAttributeValue = (customAttributesDetails, key, useSuffix = false) => {
|
|
@@ -474,11 +461,13 @@ const ProductFullDetail = props => {
|
|
|
474
461
|
return attr.entered_attribute_value?.value || "";
|
|
475
462
|
};
|
|
476
463
|
|
|
477
|
-
|
|
478
|
-
const
|
|
479
|
-
const
|
|
480
|
-
const
|
|
481
|
-
const
|
|
464
|
+
// Prefer preorder info from product props; fallback to productDetails if present
|
|
465
|
+
const preorderData = (product && product.preorder) || (productDetails && productDetails.preorder) || null;
|
|
466
|
+
const preOrder = preorderData;
|
|
467
|
+
const preOrderDate = preorderData?.pre_order_date || "";
|
|
468
|
+
const preOrderDeposite = preorderData?.pre_order_deposit || "";
|
|
469
|
+
const preOrderNote = preorderData?.pre_order_notes || "";
|
|
470
|
+
const preOrderPaymentType = preorderData?.pre_order_payment_type || "";
|
|
482
471
|
const releaseDate = getAttributeValue(productCardDetailsAttributes, "release_date", true);
|
|
483
472
|
const setNameValue = getAttributeValue(productCardDetailsAttributes, "card_set", true);
|
|
484
473
|
const cardNameValue = getAttributeValue(productCardDetailsAttributes, "card_name", true);
|
|
@@ -509,6 +498,17 @@ const ProductFullDetail = props => {
|
|
|
509
498
|
preOrderClosingDateObj !== null &&
|
|
510
499
|
new Date().getTime() > preOrderClosingDateObj.getTime();
|
|
511
500
|
|
|
501
|
+
// Ensure payment type is only set for preorder products
|
|
502
|
+
useEffect(() => {
|
|
503
|
+
if (isPreOrderProduct) {
|
|
504
|
+
if (preOrderPaymentType) {
|
|
505
|
+
setSelectedPaymentType(preOrderPaymentType);
|
|
506
|
+
}
|
|
507
|
+
} else {
|
|
508
|
+
setSelectedPaymentType(null);
|
|
509
|
+
}
|
|
510
|
+
}, [isPreOrderProduct, preOrderPaymentType]);
|
|
511
|
+
|
|
512
512
|
const cartCallToActionText =
|
|
513
513
|
isPreOrderClosed
|
|
514
514
|
? (
|
|
@@ -680,7 +680,11 @@ const ProductFullDetail = props => {
|
|
|
680
680
|
{
|
|
681
681
|
id: 'product-faq',
|
|
682
682
|
title: 'FAQ',
|
|
683
|
-
content:
|
|
683
|
+
content: (
|
|
684
|
+
<div className={cn(contentContainerClass, classes.contentContainerTabOverride)}>
|
|
685
|
+
<ProductFAQ productId={product?.id} />
|
|
686
|
+
</div>
|
|
687
|
+
)
|
|
684
688
|
},
|
|
685
689
|
{
|
|
686
690
|
id: 'product-reviews',
|
|
@@ -740,7 +744,7 @@ const ProductFullDetail = props => {
|
|
|
740
744
|
};
|
|
741
745
|
|
|
742
746
|
let preorderPayload;
|
|
743
|
-
if (selectedPaymentType) {
|
|
747
|
+
if (isPreOrderProduct && selectedPaymentType) {
|
|
744
748
|
preorderPayload = {
|
|
745
749
|
pre_order_payment_type: selectedPaymentType
|
|
746
750
|
};
|
|
@@ -753,9 +757,11 @@ const ProductFullDetail = props => {
|
|
|
753
757
|
}
|
|
754
758
|
|
|
755
759
|
const nextValues = {
|
|
756
|
-
...formValues
|
|
757
|
-
preorder: preorderPayload
|
|
760
|
+
...formValues
|
|
758
761
|
};
|
|
762
|
+
if (preorderPayload) {
|
|
763
|
+
nextValues.preorder = preorderPayload;
|
|
764
|
+
}
|
|
759
765
|
await originalHandleAddToCart(nextValues);
|
|
760
766
|
} catch (e) {
|
|
761
767
|
addToast({
|
|
@@ -948,17 +954,19 @@ const ProductFullDetail = props => {
|
|
|
948
954
|
/>
|
|
949
955
|
</Suspense>
|
|
950
956
|
</div>
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
957
|
+
{isPreOrderProduct && (
|
|
958
|
+
<PreorderDetail
|
|
959
|
+
preOrder={preOrder}
|
|
960
|
+
preOrderDate={preOrderDate}
|
|
961
|
+
preOrderDeposite={preOrderDeposite}
|
|
962
|
+
preOrderNote={preOrderNote}
|
|
963
|
+
preOrderPaymentType={preOrderPaymentType}
|
|
964
|
+
releaseDate={releaseDate}
|
|
965
|
+
className={'preorder_detail-container'}
|
|
966
|
+
paymentTypeOptions={paymentTypeOptions}
|
|
967
|
+
onPaymentTypeChange={setSelectedPaymentType}
|
|
968
|
+
/>
|
|
969
|
+
)}
|
|
962
970
|
<div className='product_actions-wrapper'>
|
|
963
971
|
{cartActionContent}
|
|
964
972
|
</div>
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { gql } from '@apollo/client';
|
|
2
|
+
|
|
3
|
+
export const GET_PRODUCT_FAQ_LIST_QUERY = gql`
|
|
4
|
+
query getProductFaqList($productId: Int!) {
|
|
5
|
+
productFaqList(product_id: $productId) {
|
|
6
|
+
question_id
|
|
7
|
+
seller_id
|
|
8
|
+
customer_name
|
|
9
|
+
customer_email
|
|
10
|
+
category_id
|
|
11
|
+
store_id
|
|
12
|
+
title
|
|
13
|
+
title_size
|
|
14
|
+
title_color
|
|
15
|
+
title_background
|
|
16
|
+
border_width
|
|
17
|
+
border_color
|
|
18
|
+
border_radius
|
|
19
|
+
body_color
|
|
20
|
+
body_background
|
|
21
|
+
margin_bottom
|
|
22
|
+
margin_left
|
|
23
|
+
icon
|
|
24
|
+
answer
|
|
25
|
+
status
|
|
26
|
+
position
|
|
27
|
+
creation_time
|
|
28
|
+
update_time
|
|
29
|
+
meta_keywords
|
|
30
|
+
meta_description
|
|
31
|
+
page_title
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
`;
|
|
35
|
+
|
|
36
|
+
export default {
|
|
37
|
+
getProductFaqListQuery: GET_PRODUCT_FAQ_LIST_QUERY,
|
|
38
|
+
};
|
|
39
|
+
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { useLazyQuery } from '@apollo/client';
|
|
2
|
+
import { useCallback } from 'react';
|
|
3
|
+
|
|
4
|
+
import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
|
|
5
|
+
import DEFAULT_OPERATIONS from './productFaq.gql';
|
|
6
|
+
|
|
7
|
+
export const useProductFAQ = props => {
|
|
8
|
+
const operations = mergeOperations(DEFAULT_OPERATIONS, props?.operations);
|
|
9
|
+
const { getProductFaqListQuery } = operations;
|
|
10
|
+
|
|
11
|
+
const [fetchProductFaqList, productFaqListState] = useLazyQuery(
|
|
12
|
+
getProductFaqListQuery,
|
|
13
|
+
{
|
|
14
|
+
fetchPolicy: 'network-only',
|
|
15
|
+
nextFetchPolicy: 'cache-first',
|
|
16
|
+
notifyOnNetworkStatusChange: true,
|
|
17
|
+
errorPolicy: 'all'
|
|
18
|
+
}
|
|
19
|
+
);
|
|
20
|
+
|
|
21
|
+
const loadProductFaqList = useCallback(
|
|
22
|
+
variables => {
|
|
23
|
+
const id = variables && variables.productId;
|
|
24
|
+
const parsedId = typeof id === 'number' ? id : parseInt(id, 10);
|
|
25
|
+
if (isNaN(parsedId)) {
|
|
26
|
+
return Promise.resolve(null);
|
|
27
|
+
}
|
|
28
|
+
return fetchProductFaqList({ variables: { productId: parsedId } });
|
|
29
|
+
},
|
|
30
|
+
[fetchProductFaqList]
|
|
31
|
+
);
|
|
32
|
+
|
|
33
|
+
return {
|
|
34
|
+
loadProductFaqList,
|
|
35
|
+
productFaqListState,
|
|
36
|
+
startPolling:
|
|
37
|
+
productFaqListState && productFaqListState.startPolling
|
|
38
|
+
? productFaqListState.startPolling
|
|
39
|
+
: undefined,
|
|
40
|
+
stopPolling:
|
|
41
|
+
productFaqListState && productFaqListState.stopPolling
|
|
42
|
+
? productFaqListState.stopPolling
|
|
43
|
+
: undefined
|
|
44
|
+
};
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
export default useProductFAQ;
|
|
48
|
+
|
package/src/talons/RFQ/useRFQ.js
CHANGED