@vtex/styleguide
Version:
> VTEX Styleguide React components ([Docs](https://vtex.github.io/styleguide))
281 lines (250 loc) • 9.75 kB
Markdown
#### A modal is an overlay that demands the attention and action from the user, preventing her from interacting with the rest of the page. It might be used from displaying messages to providing a simple form to edit a record.
### 👍 Dos
- Keep it simple. The content of a modal should represent one, clear action from the user - even if it takes multiple steps to be completed.
- Always use a modal to confirm any destructive actions.
### 👎 Don'ts
- Avoid stacking modals on top of other modals.
### Related components
- For more complex actions and forms where you want to maintain the user context use the Drawer (work in progress).
Default
```js
const Button = require('../Button').default
class ModalExample extends React.Component {
constructor() {
super()
this.state = { isModalOpen: false }
this.handleModalToggle = this.handleModalToggle.bind(this)
this.handleConfirmation = this.handleConfirmation.bind(this)
}
handleModalToggle() {
this.setState({ isModalOpen: !this.state.isModalOpen })
}
handleConfirmation() {
this.handleModalToggle()
}
render() {
return (
<React.Fragment>
<Button onClick={this.handleModalToggle}>Open</Button>
<Modal
centered
isOpen={this.state.isModalOpen}
onClose={this.handleModalToggle}>
<div className="dark-gray">
<p>
The Payments module is the system responsible for managing all
actions regarding your store's cash flow.
</p>
<p>
Before we explore the features within VTEX Admin Payments, let's
clarify some important concepts regarding the payment flow of an
order. This process is performed by some actors within the
Brazilian financial system, which make up the Payments module
architecture.
</p>
<div
style={{
backgroundColor: '#edf4fa',
borderRadius: '4px',
border: 'solid #368df7',
borderWidth: '0 0 0 4px',
boxSizing: 'border-box',
padding: '12px 16px',
}}>
It is important to remember that each store has its own
particularities and its own operation, which influence how to
build your business' Payment module. To set up your cash flow, it
is therefore crucial to keep in mind the real needs and purposes
of the retailer and of the desired project.
</div>
</div>
</Modal>
</React.Fragment>
)
}
}
;<ModalExample />
```
Long content
```js
const Button = require('../Button').default
class ModalExample extends React.Component {
constructor() {
super()
this.state = { isModalOpen: false }
this.handleOpenModal = this.handleOpenModal.bind(this)
this.handleCloseModal = this.handleCloseModal.bind(this)
}
handleOpenModal() {
this.setState({ isModalOpen: true })
}
handleCloseModal() {
this.setState({ isModalOpen: false })
}
render() {
return (
<React.Fragment>
<Button onClick={this.handleOpenModal}>Open</Button>
<Modal isOpen={this.state.isModalOpen} onClose={this.handleCloseModal}>
<div className="dark-gray">
<p className="f1 fw3">What is the shared cart</p>
<p>
The shared cart is a tool that allows more than one customer to
add, remove or update items and informations from the same cart.
</p>
<p>
For your customer, the shared cart means practicality when making
a purchase. For your store, it means:
</p>
<ul>
<li>Opportunity for a larger sale.</li>
<li>Lower logistics effort.</li>
<li>Single order flow.</li>
</ul>
<p className="mt8 f3 fw5">How this is technically possible</p>
<p>
We started using a parameter in the URL to identify the cart. As a
result, the URL can be shared with other users, who can view the
items, add and remove products, and even pay for the order.
</p>
<p>
However, for users already registered in the platform (whose data
is filled automatically in the checkout), all personal
informations are secure: only the informations' owner has access
to them, after he is authenticated in the store.
</p>
<p className="mt8 f3 fw5">Information security</p>
<p>
The payment is still done by one person whose informations remain
secure, since the profile and delivery data are visible only to
the user who creates the cart. For others, these same data are
masked because, with the shared cart, the cart does not have a
single owner anymore, only the data has.
</p>
<p className="mt8 f3 fw5">Changes to the checkout URL</p>
<p>
As informed, we have a new parameter in the checkout URLs to
identify the cart. However, the feature is optional, not impacting
stores that do not use it.
</p>
<p>
In order to use this feature, simply insert the parameter (also
called querystring) orderFormId, with the ID of the cart you want
to access. The cart ID can be obtained from the checkout APIs -
facilitated with VTEX.js.
</p>
<p>
Please note that, as new parameters are inserted, the page
crawling that is based on the URL can be affected. Therefore, it
is necessary to adapt it to continue viewing those same pages as
eing from the checkout.
</p>
<p>
One change we can make is in the URLs of the Google Analytics
conversion funnel, because it relies solely on the addresses that
customers browsed. In order to have a funnel compatible with the
additional parameters, see the rules updated in our article on how
to set up the sales funnel on Google Analytics.
</p>
<p>
Other scenarios should be checked with your marketing team and
service providers.
</p>
<p className="mt8 f3 fw5">Practical use of the shared cart</p>
<p>
Summarizing all the previous informations, it is necessary to:
</p>
<ul>
<li>
adapt the page crawling services so they become compatible with
the new URL parameter (Google Analytics, for example);
</li>
<li>use VTEX APIs to obtain the cart ID;</li>
<li>
customize the cart's page to provide its link to the user based
on the cart ID.
</li>
</ul>
</div>
</Modal>
</React.Fragment>
)
}
}
;<ModalExample />
```
With title, BottomBar and the responsive full screen option
```js
const Button = require('../Button').default
const Input = require('../Input').default
class ModalExample extends React.Component {
constructor() {
super()
this.state = { isModalOpen: false }
this.handleOpenModal = this.handleOpenModal.bind(this)
this.handleCloseModal = this.handleCloseModal.bind(this)
}
handleOpenModal() {
this.setState({ isModalOpen: true })
}
handleCloseModal() {
this.setState({ isModalOpen: false })
}
render() {
return (
<React.Fragment>
<Button onClick={this.handleOpenModal}>Open</Button>
<Modal
isOpen={this.state.isModalOpen}
title="Ready to start?"
responsiveFullScreen
bottomBar={
<div className="nowrap">
<span className="mr4">
<Button variation="tertiary" onClick={this.handleCloseModal}>
Cancel
</Button>
</span>
<span>
<Button variation="primary" onClick={this.handleCloseModal}>
Send
</Button>
</span>
</div>
}
onClose={this.handleCloseModal}>
<div className="flex flex-column flex-row-ns">
<div className="w-100 w-50-ns">
<p className="f3 f1-ns fw3 gray">
Discover our unified commerce platform and see your business
thrive.
</p>
</div>
<div className="w-100 w-50-ns mv4 pv6-ns pl6-ns">
<div className="w-100 mv6">
<Input placeholder="Name" size="large" />
</div>
<div className="w-100 mv6">
<Input placeholder="Last name" size="large" />
</div>
<div className="w-100 mv6">
<Input placeholder="Corporate email" size="large" />
</div>
<div className="w-100 mv6">
<Input placeholder="Company" size="large" />
</div>
<div className="w-100 mv6">
<Input placeholder="Annual revenue" size="large" />
</div>
<div className="w-100 mv6">
<Input placeholder="Do you have e-commerce?" size="large" />
</div>
</div>
</div>
</Modal>
</React.Fragment>
)
}
}
;<ModalExample />
```