@faststore/core 2.0.105-alpha.0 → 2.0.107-alpha.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/.turbo/turbo-build.log +8 -8
- package/CHANGELOG.md +12 -0
- package/package.json +4 -4
- package/src/components/common/Navbar/navlinks.module.scss +1 -1
- package/src/components/region/RegionButton/RegionButton.tsx +0 -1
- package/src/components/region/{RegionInput/RegionInput.tsx → RegionModal/RegionModal.tsx} +15 -25
- package/src/components/region/RegionModal/index.ts +1 -2
- package/src/components/sections/Newsletter/Newsletter.tsx +3 -7
- package/src/components/region/Region.stories.mdx +0 -199
- package/src/components/region/RegionInput/index.ts +0 -1
- package/src/components/region/RegionModal/RegionalizationModal.stories.mdx +0 -174
- package/src/components/region/RegionModal/RegionalizationModal.tsx +0 -12
- package/src/components/region/RegionModal/RegionalizationModalContent.tsx +0 -42
- package/src/components/region/RegionModal/regionalization-modal-body.module.scss +0 -25
package/.turbo/turbo-build.log
CHANGED
|
@@ -22,18 +22,18 @@ info - Generating static pages (13/13)
|
|
|
22
22
|
info - Finalizing page optimization...
|
|
23
23
|
|
|
24
24
|
Route (pages) Size First Load JS
|
|
25
|
-
┌ ● / 8.
|
|
25
|
+
┌ ● / 8.58 kB 117 kB
|
|
26
26
|
├ └ css/43d61b402f41569b.css 1.84 kB
|
|
27
|
-
├ /_app 0 B 96.
|
|
27
|
+
├ /_app 0 B 96.6 kB
|
|
28
28
|
├ ● /[...slug] 9.48 kB 122 kB
|
|
29
29
|
├ └ css/8ea129ea90e49e98.css 1.83 kB
|
|
30
|
-
├ ● /[slug]/p 16.
|
|
30
|
+
├ ● /[slug]/p 16.8 kB 125 kB
|
|
31
31
|
├ └ css/8d4cc2151b8e3693.css 1.99 kB
|
|
32
32
|
├ ○ /404 431 B 102 kB
|
|
33
33
|
├ ○ /500 439 B 102 kB
|
|
34
34
|
├ ○ /account 383 B 102 kB
|
|
35
|
-
├ λ /api/graphql 0 B 96.
|
|
36
|
-
├ λ /api/preview 0 B 96.
|
|
35
|
+
├ λ /api/graphql 0 B 96.6 kB
|
|
36
|
+
├ λ /api/preview 0 B 96.6 kB
|
|
37
37
|
├ ○ /checkout 371 B 102 kB
|
|
38
38
|
├ ○ /login 385 B 102 kB
|
|
39
39
|
└ ○ /s 895 B 113 kB
|
|
@@ -41,9 +41,9 @@ Route (pages) Size First Load JS
|
|
|
41
41
|
+ First Load JS shared by all 120 kB
|
|
42
42
|
├ chunks/framework-dfd14d7ce6600b03.js 45.3 kB
|
|
43
43
|
├ chunks/main-9746772201fe3ac1.js 23.9 kB
|
|
44
|
-
├ chunks/pages/_app-
|
|
45
|
-
├ chunks/webpack-
|
|
46
|
-
└ css/
|
|
44
|
+
├ chunks/pages/_app-4656b49f263e86d4.js 25.3 kB
|
|
45
|
+
├ chunks/webpack-3587f79b2eaad6ba.js 2.16 kB
|
|
46
|
+
└ css/1024849ea6421e1e.css 23.1 kB
|
|
47
47
|
|
|
48
48
|
λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
|
|
49
49
|
○ (Static) automatically rendered as static HTML (uses no initial props)
|
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,18 @@
|
|
|
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.0.107-alpha.0](https://github.com/vtex/faststore/compare/v2.0.106-alpha.0...v2.0.107-alpha.0) (2023-04-17)
|
|
7
|
+
|
|
8
|
+
### Chores
|
|
9
|
+
|
|
10
|
+
- Removes `Form` component ([#1717](https://github.com/vtex/faststore/issues/1717)) ([ffe1c2e](https://github.com/vtex/faststore/commit/ffe1c2ec93f261e24bf3c5a295cf359cf53bcc63))
|
|
11
|
+
|
|
12
|
+
## [2.0.106-alpha.0](https://github.com/vtex/faststore/compare/v2.0.105-alpha.0...v2.0.106-alpha.0) (2023-04-12)
|
|
13
|
+
|
|
14
|
+
### Features
|
|
15
|
+
|
|
16
|
+
- Adds `RegionModal` component ([#1710](https://github.com/vtex/faststore/issues/1710)) ([d3b6c36](https://github.com/vtex/faststore/commit/d3b6c36af3fe3d9c826884654c8708d4a1d14d2d))
|
|
17
|
+
|
|
6
18
|
## [2.0.105-alpha.0](https://github.com/vtex/faststore/compare/v2.0.104-alpha.0...v2.0.105-alpha.0) (2023-04-12)
|
|
7
19
|
|
|
8
20
|
**Note:** Version bump only for package @faststore/core
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@faststore/core",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.107-alpha.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"browserslist": "supports es6-module and not dead",
|
|
6
6
|
"scripts": {
|
|
@@ -30,10 +30,10 @@
|
|
|
30
30
|
"@envelop/parser-cache": "^2.2.0",
|
|
31
31
|
"@envelop/validation-cache": "^2.2.0",
|
|
32
32
|
"@faststore/api": "^2.0.105-alpha.0",
|
|
33
|
-
"@faststore/components": "^2.0.
|
|
33
|
+
"@faststore/components": "^2.0.106-alpha.0",
|
|
34
34
|
"@faststore/graphql-utils": "^2.0.3-alpha.0",
|
|
35
35
|
"@faststore/sdk": "^2.0.3-alpha.0",
|
|
36
|
-
"@faststore/ui": "^2.0.
|
|
36
|
+
"@faststore/ui": "^2.0.107-alpha.0",
|
|
37
37
|
"@types/react": "^18.0.14",
|
|
38
38
|
"@vtex/client-cms": "^0.2.12",
|
|
39
39
|
"autoprefixer": "^10.4.0",
|
|
@@ -108,5 +108,5 @@
|
|
|
108
108
|
"msw": {
|
|
109
109
|
"workerDirectory": "public"
|
|
110
110
|
},
|
|
111
|
-
"gitHead": "
|
|
111
|
+
"gitHead": "bfb1fcf0da77eedf9a9664563c3c426dd014b5c4"
|
|
112
112
|
}
|
|
@@ -1,13 +1,9 @@
|
|
|
1
1
|
import { useRef, useState } from 'react'
|
|
2
|
-
import {
|
|
2
|
+
import { RegionModal as UIRegionModal } from '@faststore/ui'
|
|
3
3
|
|
|
4
4
|
import { sessionStore, useSession, validateSession } from 'src/sdk/session'
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
closeModal: () => void
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
function RegionInput({ closeModal }: Props) {
|
|
6
|
+
function RegionModal() {
|
|
11
7
|
const inputRef = useRef<HTMLInputElement>(null)
|
|
12
8
|
const { isValidating, ...session } = useSession()
|
|
13
9
|
const [errorMessage, setErrorMessage] = useState<string>('')
|
|
@@ -31,31 +27,25 @@ function RegionInput({ closeModal }: Props) {
|
|
|
31
27
|
const validatedSession = await validateSession(newSession)
|
|
32
28
|
|
|
33
29
|
sessionStore.set(validatedSession ?? newSession)
|
|
34
|
-
|
|
35
|
-
closeModal()
|
|
36
30
|
} catch (error) {
|
|
37
31
|
setErrorMessage('You entered an invalid Postal Code')
|
|
38
32
|
}
|
|
39
33
|
}
|
|
40
34
|
|
|
41
35
|
return (
|
|
42
|
-
<
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
onSubmit={handleSubmit}
|
|
55
|
-
onClear={() => setInput('')}
|
|
56
|
-
/>
|
|
57
|
-
</div>
|
|
36
|
+
<UIRegionModal
|
|
37
|
+
inputRef={inputRef}
|
|
38
|
+
inputValue={input}
|
|
39
|
+
errorMessage={errorMessage}
|
|
40
|
+
onInput={(e) => {
|
|
41
|
+
errorMessage !== '' && setErrorMessage('')
|
|
42
|
+
setInput(e.currentTarget.value)
|
|
43
|
+
}}
|
|
44
|
+
onSubmit={handleSubmit}
|
|
45
|
+
fadeOutOnSubmit={true}
|
|
46
|
+
onClear={() => setInput('')}
|
|
47
|
+
/>
|
|
58
48
|
)
|
|
59
49
|
}
|
|
60
50
|
|
|
61
|
-
export default
|
|
51
|
+
export default RegionModal
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
export { default } from './
|
|
2
|
-
export { default as RegionalizationModalContent } from './RegionalizationModalContent'
|
|
1
|
+
export { default } from './RegionModal'
|
|
@@ -1,8 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
Button as UIButton,
|
|
3
|
-
Form,
|
|
4
|
-
InputField as UIInputField,
|
|
5
|
-
} from '@faststore/ui'
|
|
1
|
+
import { Button as UIButton, InputField as UIInputField } from '@faststore/ui'
|
|
6
2
|
import type { ComponentPropsWithRef, FormEvent, ReactNode } from 'react'
|
|
7
3
|
import { forwardRef, useRef } from 'react'
|
|
8
4
|
|
|
@@ -79,7 +75,7 @@ const Newsletter = forwardRef<HTMLFormElement, NewsletterProps>(
|
|
|
79
75
|
data-fs-newsletter={card ? 'card' : ''}
|
|
80
76
|
className={`layout__section ${styles.fsNewsletter}`}
|
|
81
77
|
>
|
|
82
|
-
<
|
|
78
|
+
<form
|
|
83
79
|
data-fs-newsletter-form
|
|
84
80
|
ref={ref}
|
|
85
81
|
onSubmit={handleSubmit}
|
|
@@ -143,7 +139,7 @@ const Newsletter = forwardRef<HTMLFormElement, NewsletterProps>(
|
|
|
143
139
|
</>
|
|
144
140
|
)}
|
|
145
141
|
</div>
|
|
146
|
-
</
|
|
142
|
+
</form>
|
|
147
143
|
</Section>
|
|
148
144
|
)
|
|
149
145
|
}
|
|
@@ -1,199 +0,0 @@
|
|
|
1
|
-
import { UIProvider, useUI, Button } from '@faststore/ui'
|
|
2
|
-
|
|
3
|
-
import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
|
|
4
|
-
|
|
5
|
-
import { LinkButton } from '@faststore/ui'
|
|
6
|
-
|
|
7
|
-
import RegionalizationButton from './RegionalizationButton'
|
|
8
|
-
import RegionalizationInput from './RegionalizationInput'
|
|
9
|
-
import RegionalizationBar from './RegionalizationBar'
|
|
10
|
-
import RegionalizationModal, {
|
|
11
|
-
RegionalizationModalContent,
|
|
12
|
-
} from './RegionalizationModal'
|
|
13
|
-
import Icon from '../ui/Icon'
|
|
14
|
-
|
|
15
|
-
<Meta title="Features/Regionalization/Overview" />
|
|
16
|
-
|
|
17
|
-
export const TemplateRegionalizationModal = () => {
|
|
18
|
-
const { modal } = useUI()
|
|
19
|
-
return <>{modal && <RegionalizationModal />}</>
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
export const TemplateButtonWithProvider = () => {
|
|
23
|
-
return (
|
|
24
|
-
<UIProvider>
|
|
25
|
-
<div style={{ display: 'flex', alignItems: 'center', columnGap: '20px' }}>
|
|
26
|
-
<p style={{ whiteSpace: 'nowrap' }}>Try me:</p>
|
|
27
|
-
<RegionalizationButton />
|
|
28
|
-
<TemplateRegionalizationModal />
|
|
29
|
-
</div>
|
|
30
|
-
</UIProvider>
|
|
31
|
-
)
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
export const RegionalizationModalContentTemplate = () => {
|
|
35
|
-
const { modal, openModal } = useUI()
|
|
36
|
-
return (
|
|
37
|
-
<div>
|
|
38
|
-
<Button variant="primary" onClick={() => openModal()}>
|
|
39
|
-
Open Regionalization Modal
|
|
40
|
-
</Button>
|
|
41
|
-
{modal && <RegionalizationModal />}
|
|
42
|
-
</div>
|
|
43
|
-
)
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
export const TemplateOverview = (args) => {
|
|
47
|
-
return (
|
|
48
|
-
<UIProvider>
|
|
49
|
-
<RegionalizationModalContentTemplate onClose={() => {}} />
|
|
50
|
-
</UIProvider>
|
|
51
|
-
)
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
<header>
|
|
55
|
-
|
|
56
|
-
# Regionalization
|
|
57
|
-
|
|
58
|
-
This feature enables customers to set a location using a valid Postal Code.
|
|
59
|
-
|
|
60
|
-
</header>
|
|
61
|
-
|
|
62
|
-
## Overview
|
|
63
|
-
|
|
64
|
-
Regionalization is a feature of [VTEX Intelligent Search](https://help.vtex.com/en/tracks/vtex-intelligent-search--19wrbB7nEQcmwzDPl1l4Cb/3qgT47zY08biLP3d5os3DG) that allows for the optimization of search results according to the availability of sellers in the customer's region.
|
|
65
|
-
|
|
66
|
-
Regionalization uses a behavior from VTEX Intelligent Search called [Availability](https://help.vtex.com/en/tracks/vtex-intelligent-search--19wrbB7nEQcmwzDPl1l4Cb/7LMQbWK5nElIkXo0NK8Kux). It searches for products available in the inventory of sellers that serve a particular region.
|
|
67
|
-
|
|
68
|
-
Stores that have more than one registered white label seller usually have specific inventories for each region. This is the case for supermarkets, for example.
|
|
69
|
-
|
|
70
|
-
With the Regionalization feature enabled, if a customer enters their Postal Code while browsing the store (before checkout), only products available in the corresponding region will be displayed in the search results.
|
|
71
|
-
|
|
72
|
-
### Steps
|
|
73
|
-
|
|
74
|
-
1. Intentionally, a user Sets its location using a Postal Code
|
|
75
|
-
2. Updates Product Catalog
|
|
76
|
-
3. Gets notified if there's product conflict at minicart
|
|
77
|
-
|
|
78
|
-
---
|
|
79
|
-
|
|
80
|
-
## Components
|
|
81
|
-
|
|
82
|
-
<section className="sbdocs-list">
|
|
83
|
-
<ul className="sbdocs-ul-row">
|
|
84
|
-
<li>
|
|
85
|
-
<div>
|
|
86
|
-
<UIProvider>
|
|
87
|
-
<RegionalizationButton />
|
|
88
|
-
<TemplateRegionalizationModal />
|
|
89
|
-
</UIProvider>
|
|
90
|
-
</div>
|
|
91
|
-
<article className="sbdocs-list-text">
|
|
92
|
-
<h3>RegionalizationButton</h3>
|
|
93
|
-
<p>
|
|
94
|
-
Using a{' '}
|
|
95
|
-
<a href="../?path=/docs/atoms-button--button#tertiary">
|
|
96
|
-
Tertiary Button
|
|
97
|
-
</a>{' '}
|
|
98
|
-
as base, this component is usually placed on the <code>Navbar</code>{' '}
|
|
99
|
-
and triggers
|
|
100
|
-
<code>RegionalizationModal</code>.
|
|
101
|
-
</p>
|
|
102
|
-
</article>
|
|
103
|
-
</li>
|
|
104
|
-
<li>
|
|
105
|
-
<div>
|
|
106
|
-
<UIProvider>
|
|
107
|
-
<RegionalizationBar />
|
|
108
|
-
<TemplateRegionalizationModal />
|
|
109
|
-
</UIProvider>
|
|
110
|
-
</div>
|
|
111
|
-
<article className="sbdocs-list-text">
|
|
112
|
-
<h3>RegionalizationBar</h3>
|
|
113
|
-
<p>
|
|
114
|
-
The Bar has a similar proposal for the button, usually used on mobile
|
|
115
|
-
devices only. It also triggers <code>RegionalizationModal</code>.
|
|
116
|
-
</p>
|
|
117
|
-
<LinkButton
|
|
118
|
-
size="small"
|
|
119
|
-
variant="tertiary"
|
|
120
|
-
href="../?path=/docs/features-regionalization-regionalizationbar--bar"
|
|
121
|
-
icon={<Icon name="ArrowRight" width="18" height="18" weight="bold" />}
|
|
122
|
-
iconPosition="right"
|
|
123
|
-
>
|
|
124
|
-
See more
|
|
125
|
-
</LinkButton>
|
|
126
|
-
</article>
|
|
127
|
-
</li>
|
|
128
|
-
<li>
|
|
129
|
-
<div>
|
|
130
|
-
<UIProvider>
|
|
131
|
-
<RegionalizationInput />
|
|
132
|
-
</UIProvider>
|
|
133
|
-
</div>
|
|
134
|
-
<article className="sbdocs-list-text">
|
|
135
|
-
<h3>RegionalizationInput</h3>
|
|
136
|
-
<p>
|
|
137
|
-
An actionable InputText able to check the Postal Code authenticity.
|
|
138
|
-
</p>
|
|
139
|
-
</article>
|
|
140
|
-
</li>
|
|
141
|
-
<li>
|
|
142
|
-
<div>
|
|
143
|
-
<TemplateOverview />
|
|
144
|
-
</div>
|
|
145
|
-
<article className="sbdocs-list-text">
|
|
146
|
-
<h3>RegionalizationModal</h3>
|
|
147
|
-
<p>
|
|
148
|
-
It's the modal that, trigged by <code>RegionalizationButton</code> or{' '}
|
|
149
|
-
<code>RegionalizationBar</code>, shows the user the{' '}
|
|
150
|
-
<code>RegionalizationInput</code> search.
|
|
151
|
-
</p>
|
|
152
|
-
<LinkButton
|
|
153
|
-
size="small"
|
|
154
|
-
variant="tertiary"
|
|
155
|
-
href="../?path=/docs/features-regionalization-regionalizationmodal--overview"
|
|
156
|
-
icon={<Icon name="ArrowRight" width="18" height="18" weight="bold" />}
|
|
157
|
-
iconPosition="right"
|
|
158
|
-
>
|
|
159
|
-
See more
|
|
160
|
-
</LinkButton>
|
|
161
|
-
</article>
|
|
162
|
-
</li>
|
|
163
|
-
</ul>
|
|
164
|
-
</section>
|
|
165
|
-
|
|
166
|
-
---
|
|
167
|
-
|
|
168
|
-
## Usage
|
|
169
|
-
|
|
170
|
-
On your `Layout.tsx` file:
|
|
171
|
-
|
|
172
|
-
```jsx
|
|
173
|
-
import RegionalizationModal from '../components/regionalization/RegionalizationModal'
|
|
174
|
-
import { useUI } from '@faststore/ui'
|
|
175
|
-
```
|
|
176
|
-
|
|
177
|
-
and inside your `Layout` component:
|
|
178
|
-
|
|
179
|
-
```jsx
|
|
180
|
-
const { modal: displayModal } = useUI()
|
|
181
|
-
|
|
182
|
-
return (
|
|
183
|
-
<>
|
|
184
|
-
{OtherLayoutComponents}
|
|
185
|
-
{displayModal && <RegionalizationModal />}
|
|
186
|
-
</>
|
|
187
|
-
)
|
|
188
|
-
```
|
|
189
|
-
|
|
190
|
-
Then, you can add your `<RegionalizationButton />` or `<RegionalizationBar />` whenever it's needed.
|
|
191
|
-
|
|
192
|
-
It's suggested to add it on `Navbar`.
|
|
193
|
-
|
|
194
|
-
<Canvas
|
|
195
|
-
className="no-code"
|
|
196
|
-
style={{ display: 'flex', justifyContent: 'center' }}
|
|
197
|
-
>
|
|
198
|
-
<Story name="default-button">{TemplateButtonWithProvider.bind({})}</Story>
|
|
199
|
-
</Canvas>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from './RegionInput'
|
|
@@ -1,174 +0,0 @@
|
|
|
1
|
-
import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
|
|
2
|
-
|
|
3
|
-
import { UIProvider, useUI, Modal, Button } from '@faststore/ui'
|
|
4
|
-
|
|
5
|
-
import RegionalizationModal, { RegionalizationModalContent } from '.'
|
|
6
|
-
import RegionalizationButton from 'src/components/regionalization/RegionalizationButton'
|
|
7
|
-
|
|
8
|
-
import {
|
|
9
|
-
TokenTable,
|
|
10
|
-
TokenRow,
|
|
11
|
-
TokenDivider,
|
|
12
|
-
} from 'src/../.storybook/components'
|
|
13
|
-
|
|
14
|
-
<Meta
|
|
15
|
-
title="Features/Regionalization/RegionalizationModal"
|
|
16
|
-
component={RegionalizationModal}
|
|
17
|
-
/>
|
|
18
|
-
|
|
19
|
-
export const ModalTemplate = () => {
|
|
20
|
-
const { modal, openModal } = useUI()
|
|
21
|
-
return (
|
|
22
|
-
<div>
|
|
23
|
-
<RegionalizationButton onClick={() => openModal()}>
|
|
24
|
-
Open Regionalization Modal
|
|
25
|
-
</RegionalizationButton>
|
|
26
|
-
{modal && <RegionalizationModal />}
|
|
27
|
-
</div>
|
|
28
|
-
)
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
export const Template = (args) => {
|
|
32
|
-
return (
|
|
33
|
-
<UIProvider>
|
|
34
|
-
<ModalTemplate />
|
|
35
|
-
</UIProvider>
|
|
36
|
-
)
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
export const RegionalizationModalContentTemplate = () => {
|
|
40
|
-
const { modal, openModal } = useUI()
|
|
41
|
-
return (
|
|
42
|
-
<div>
|
|
43
|
-
<Button variant="primary" onClick={() => openModal()}>
|
|
44
|
-
Open Regionalization Modal
|
|
45
|
-
</Button>
|
|
46
|
-
{modal && <RegionalizationModal />}
|
|
47
|
-
</div>
|
|
48
|
-
)
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
export const TemplateOverview = (args) => {
|
|
52
|
-
return (
|
|
53
|
-
<UIProvider>
|
|
54
|
-
<RegionalizationModalContentTemplate onClose={() => {}} />
|
|
55
|
-
</UIProvider>
|
|
56
|
-
)
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
<header>
|
|
60
|
-
|
|
61
|
-
# Regionalization Modal
|
|
62
|
-
|
|
63
|
-
This component calls a modal with some regionalization configurations.
|
|
64
|
-
|
|
65
|
-
</header>
|
|
66
|
-
|
|
67
|
-
## Overview
|
|
68
|
-
|
|
69
|
-
The `RegionalizationModal` is part of [Regionalization](?path=/docs/features-regionalization-overview--default-button) feature and uses [Modal](/docs/molecules-modal--overview) as a base.
|
|
70
|
-
|
|
71
|
-
<Canvas style={{ backgroundColor: 'var(--fs-color-neutral-1)' }}>
|
|
72
|
-
<Story name="Overview">{TemplateOverview.bind({})}</Story>
|
|
73
|
-
</Canvas>
|
|
74
|
-
|
|
75
|
-
---
|
|
76
|
-
|
|
77
|
-
## Usage
|
|
78
|
-
|
|
79
|
-
`import RegionalizationModal from src/components/regionalization/RegionalizationModal`
|
|
80
|
-
|
|
81
|
-
<Canvas>
|
|
82
|
-
<Story name="RegionalizationModalContent">{Template.bind({})}</Story>
|
|
83
|
-
</Canvas>
|
|
84
|
-
|
|
85
|
-
---
|
|
86
|
-
|
|
87
|
-
<TokenTable>
|
|
88
|
-
<TokenRow
|
|
89
|
-
token="--fs-regionalization-modal-padding"
|
|
90
|
-
value="var(--fs-spacing-1) var(--fs-spacing-4) var(--fs-spacing-5)"
|
|
91
|
-
/>
|
|
92
|
-
<TokenRow
|
|
93
|
-
token="--fs-regionalization-modal-background-color"
|
|
94
|
-
value="var(--fs-color-body-bkg)"
|
|
95
|
-
isColor
|
|
96
|
-
/>
|
|
97
|
-
<TokenRow
|
|
98
|
-
token="--fs-regionalization-modal-border-radius"
|
|
99
|
-
value="var(--fs-border-radius)"
|
|
100
|
-
/>
|
|
101
|
-
</TokenTable>
|
|
102
|
-
|
|
103
|
-
### Header
|
|
104
|
-
|
|
105
|
-
<TokenTable>
|
|
106
|
-
<TokenRow
|
|
107
|
-
token="--fs-regionalization-modal-header-padding"
|
|
108
|
-
value="var(--fs-spacing-4) var(--fs-spacing-7) var(--fs-spacing-4) var(--fs-spacing-4)"
|
|
109
|
-
/>
|
|
110
|
-
</TokenTable>
|
|
111
|
-
|
|
112
|
-
### Title
|
|
113
|
-
|
|
114
|
-
<TokenTable>
|
|
115
|
-
<TokenRow
|
|
116
|
-
token="--fs-regionalization-modal-title-margin-bottom"
|
|
117
|
-
value=".625rem"
|
|
118
|
-
/>
|
|
119
|
-
<TokenRow
|
|
120
|
-
token="--fs-regionalization-modal-title-size"
|
|
121
|
-
value="var(--fs-text-size-lead)"
|
|
122
|
-
/>
|
|
123
|
-
<TokenRow
|
|
124
|
-
token="--fs-regionalization-modal-title-weight"
|
|
125
|
-
value="var(--fs-text-weight-bold)"
|
|
126
|
-
/>
|
|
127
|
-
<TokenRow token="--fs-regionalization-modal-title-line-height" value="1.2" />
|
|
128
|
-
</TokenTable>
|
|
129
|
-
|
|
130
|
-
### Description
|
|
131
|
-
|
|
132
|
-
<TokenTable>
|
|
133
|
-
<TokenRow
|
|
134
|
-
token="--fs-regionalization-modal-description-size"
|
|
135
|
-
value="var(--fs-text-size-body)"
|
|
136
|
-
/>
|
|
137
|
-
<TokenRow
|
|
138
|
-
token="--fs-regionalization-modal-description-line-height"
|
|
139
|
-
value="1.5"
|
|
140
|
-
/>
|
|
141
|
-
<TokenRow
|
|
142
|
-
token="--fs-regionalization-modal-description-color"
|
|
143
|
-
value="var(--fs-color-text-light)"
|
|
144
|
-
isColor
|
|
145
|
-
/>
|
|
146
|
-
</TokenTable>
|
|
147
|
-
|
|
148
|
-
### Buttons
|
|
149
|
-
|
|
150
|
-
<TokenTable>
|
|
151
|
-
<TokenRow
|
|
152
|
-
token="--fs-regionalization-modal-close-button-position-top"
|
|
153
|
-
value="0"
|
|
154
|
-
/>
|
|
155
|
-
<TokenRow
|
|
156
|
-
token="--fs-regionalization-modal-close-button-position-right"
|
|
157
|
-
value="0"
|
|
158
|
-
/>
|
|
159
|
-
</TokenTable>
|
|
160
|
-
|
|
161
|
-
### Link
|
|
162
|
-
|
|
163
|
-
<TokenTable>
|
|
164
|
-
<TokenRow token="--fs-regionalization-modal-link-padding" value="0" />
|
|
165
|
-
<TokenRow
|
|
166
|
-
token="--fs-regionalization-modal-link-color"
|
|
167
|
-
value="var(--fs-color-link)"
|
|
168
|
-
isColor
|
|
169
|
-
/>
|
|
170
|
-
<TokenRow
|
|
171
|
-
token="--fs-regionalization-modal-link-margin-right"
|
|
172
|
-
value="var(--fs-spacing-0)"
|
|
173
|
-
/>
|
|
174
|
-
</TokenTable>
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { Modal as UIModal } from '@faststore/ui'
|
|
2
|
-
import RegionalizationModalContent from './RegionalizationModalContent'
|
|
3
|
-
|
|
4
|
-
function RegionalizationModal() {
|
|
5
|
-
return (
|
|
6
|
-
<UIModal>
|
|
7
|
-
{({ fadeOut }) => <RegionalizationModalContent onClose={fadeOut} />}
|
|
8
|
-
</UIModal>
|
|
9
|
-
)
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
export default RegionalizationModal
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
Icon,
|
|
3
|
-
ModalBody as UIModalBody,
|
|
4
|
-
ModalHeader as UIModalHeader,
|
|
5
|
-
} from '@faststore/ui'
|
|
6
|
-
|
|
7
|
-
import RegionInput from 'src/components/region/RegionInput'
|
|
8
|
-
import Link from 'src/components/ui/Link'
|
|
9
|
-
|
|
10
|
-
import styles from './regionalization-modal-body.module.scss'
|
|
11
|
-
|
|
12
|
-
export interface RegionalizationModalContentProps {
|
|
13
|
-
onClose?: () => void
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
function RegionalizationModalContent({
|
|
17
|
-
onClose,
|
|
18
|
-
}: RegionalizationModalContentProps) {
|
|
19
|
-
return (
|
|
20
|
-
<>
|
|
21
|
-
<UIModalHeader
|
|
22
|
-
onClose={() => onClose()}
|
|
23
|
-
title="Set your location"
|
|
24
|
-
description="Prices, offers and availability may vary according to your location."
|
|
25
|
-
closeBtnProps={{
|
|
26
|
-
'aria-label': 'Close Regionalization Modal',
|
|
27
|
-
}}
|
|
28
|
-
/>
|
|
29
|
-
<UIModalBody className={styles.fsRegionalizationModalBody}>
|
|
30
|
-
<div data-fs-regionalization-modal-input>
|
|
31
|
-
<RegionInput closeModal={() => onClose()} />
|
|
32
|
-
</div>
|
|
33
|
-
<Link href="/" data-fs-regionalization-modal-link>
|
|
34
|
-
{"I don't know my Postal Code"}
|
|
35
|
-
<Icon name="ArrowSquareOut" width={18} height={18} />
|
|
36
|
-
</Link>
|
|
37
|
-
</UIModalBody>
|
|
38
|
-
</>
|
|
39
|
-
)
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
export default RegionalizationModalContent
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
.fs-regionalization-modal-body {
|
|
2
|
-
// --------------------------------------------------------
|
|
3
|
-
// Design Tokens for Regionalization Modal
|
|
4
|
-
// --------------------------------------------------------
|
|
5
|
-
|
|
6
|
-
// Link
|
|
7
|
-
--fs-regionalization-modal-link-padding: 0;
|
|
8
|
-
--fs-regionalization-modal-link-color: var(--fs-color-link);
|
|
9
|
-
--fs-regionalization-modal-link-margin-right: var(--fs-spacing-0);
|
|
10
|
-
|
|
11
|
-
[data-fs-regionalization-modal-input] {
|
|
12
|
-
margin-bottom: var(--fs-spacing-6);
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
[data-fs-regionalization-modal-link] {
|
|
16
|
-
display: flex;
|
|
17
|
-
flex-direction: row;
|
|
18
|
-
align-content: flex-start;
|
|
19
|
-
align-items: center;
|
|
20
|
-
justify-content: flex-start;
|
|
21
|
-
padding: var(--fs-regionalization-modal-link-padding);
|
|
22
|
-
margin-right: var(--fs-regionalization-modal-link-margin-right);
|
|
23
|
-
color: var(--fs-regionalization-modal-link-color);
|
|
24
|
-
}
|
|
25
|
-
}
|