Skip to content

Commit

Permalink
docs: add coupon form in checkout examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@gciotola
gciotola committed Nov 6, 2023
1 parent 2db0fd7 commit 2047807
Show file tree
Hide file tree
Showing 2 changed files with 65 additions and 210 deletions.
16 changes: 14 additions & 2 deletions packages/docs/stories/examples/checkout/001.items.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,5 +10,17 @@ The list of items follows the same concept as the cart page, so we can use the s



## Gift card and coupon code
Work in progress...
## Coupon code and order totals
It's possible to add coupons or show totals in the checkout page using the same components as seen for the cart page,
since cart and checkout operate on the same resource: the `order`.
Any changes made to the order in the cart page will be reflected in the checkout page and vice-versa.

<span type="info">
Use `TEST-COUPON` to add a 10% discount code and see how the totals change.
</span>


<Canvas of={Stories.Coupons} />



259 changes: 51 additions & 208 deletions packages/docs/stories/examples/checkout/001.items.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,24 +9,17 @@ import LineItemAmount from '#components/line_items/LineItemAmount'
import LineItemsEmpty from '#components/line_items/LineItemsEmpty'
import { OrderStorage, AddSampleItems } from '../../_internals/OrderStorage'
import LineItemQuantity from '#components/line_items/LineItemQuantity'
import { CustomerContainer } from '#components/customers/CustomerContainer'
import { CustomerInput } from '#components/customers/CustomerInput'
import Errors from '#components/errors/Errors'
import { BillingAddressForm } from '#components/addresses/BillingAddressForm'
import { AddressesContainer } from '#components/addresses/AddressesContainer'
import { AddressInput } from '#components/addresses/AddressInput'
import { AddressCountrySelector } from '#components/addresses/AddressCountrySelector'
import { AddressStateSelector } from '#components/addresses/AddressStateSelector'
import { SaveAddressesButton } from '#components/addresses/SaveAddressesButton'
import { ShipmentsContainer } from '#components/shipments/ShipmentsContainer'
import { Shipment } from '#components/shipments/Shipment'
import { ShipmentField } from '#components/shipments/ShipmentField'
import { ShippingMethod } from '#components/shipping_methods/ShippingMethod'
import { ShippingMethodRadioButton } from '#components/shipping_methods/ShippingMethodRadioButton'
import { ShippingMethodName } from '#components/shipping_methods/ShippingMethodName'
import { ShippingMethodPrice } from '#components/shipping_methods/ShippingMethodPrice'
import { DeliveryLeadTime } from '#components/skus/DeliveryLeadTime'
import { persistKey } from './utils'
import GiftCardOrCouponForm from '#components/gift_cards/GiftCardOrCouponForm'
import GiftCardOrCouponSubmit from '#components/gift_cards/GiftCardOrCouponSubmit'
import GiftCardOrCouponInput from '#components/gift_cards/GiftCardOrCouponInput'
import Errors from '#components/errors/Errors'
import GiftCardOrCouponCode from '#components/gift_cards/GiftCardOrCouponCode'
import GiftCardOrCouponRemoveButton from '#components/gift_cards/GiftCardOrCouponRemoveButton'
import SubTotalAmount from '#components/orders/SubTotalAmount'
import DiscountAmount from '#components/orders/DiscountAmount'
import GiftCardAmount from '#components/orders/GiftCardAmount'
import TotalAmount from '#components/orders/TotalAmount'

const setup: Meta = {
title: 'Examples/Checkout Page/Item list'
Expand Down Expand Up @@ -67,201 +60,51 @@ export const ListOfItems: StoryFn = (args) => {
)
}

export const CustomerAddresses: StoryFn = (args) => {
const inputCss = 'border border-gray-300 p-2 rounded-md w-full'
export const Coupons: StoryFn = (args) => {
return (
<CommerceLayer
accessToken='my-access-token'
endpoint='https://demo-store.commercelayer.io'
>
<OrderStorage persistKey='cl-examples-checkout1'>
<CommerceLayer accessToken='my-access-token'>
<OrderStorage persistKey={persistKey}>
<OrderContainer>
<section className='max-w-xl'>
<CustomerContainer isGuest>
<div className='mb-4'>
<label htmlFor='customer_email'>Customer email</label>
<CustomerInput
id='customer_email'
className={inputCss}
placeholder='email'
saveOnBlur
errorClassName='border-red-600'
/>
<Errors resource='orders' field='customer_email' />
</div>

<AddressesContainer shipToDifferentAddress={false}>
<BillingAddressForm>
<fieldset className='flex gap-4 w-full mb-4'>
<div className='flex-1'>
<label htmlFor='billing_address_first_name'>
First name
</label>
<AddressInput
id='billing_address_first_name'
name='billing_address_first_name'
type='text'
className={inputCss}
/>
<Errors
resource='billing_address'
field='billing_address_first_name'
/>
</div>

<div className='flex-1'>
<label htmlFor='billing_address_last_name'>
Last name
</label>
<AddressInput
id='billing_address_last_name'
name='billing_address_last_name'
type='text'
className={inputCss}
/>
<Errors
resource='billing_address'
field='billing_address_last_name'
/>
</div>
</fieldset>

<div className='mb-4'>
<label htmlFor='billing_address_line_1'>Address</label>
<AddressInput
id='billing_address_line_1'
name='billing_address_line_1'
type='text'
className={inputCss}
/>
<Errors
resource='billing_address'
field='billing_address_line_1'
/>
</div>

<fieldset className='flex gap-4 w-full mb-4'>
<div className='flex-1'>
<label htmlFor='billing_address_city'>City</label>
<AddressInput
id='billing_address_city'
name='billing_address_city'
type='text'
className={inputCss}
/>
<Errors
resource='billing_address'
field='billing_address_city'
/>
</div>

<div className='flex-1'>
<label htmlFor='billing_address_country_code'>City</label>
<AddressCountrySelector
data-cy='billing_address_country_code'
name='billing_address_country_code'
className={inputCss}
placeholder={{
value: '',
label: 'Country',
disabled: true
}}
/>
<Errors
resource='billing_address'
field='billing_address_country_code'
/>
</div>
</fieldset>

<fieldset className='flex gap-4 w-full mb-4'>
<div className='flex-1'>
<label htmlFor='billing_address_state_code'>State</label>
<AddressStateSelector
id='billing_address_state_code'
name='billing_address_state_code'
placeholder={{
value: '',
label: 'Select a state',
disabled: true
}}
className={inputCss}
/>
<Errors
resource='billing_address'
field='billing_address_state_code'
/>
</div>

<div className='flex-1'>
<label htmlFor='billing_address_zip_code'>Zip Code</label>
<AddressInput
id='billing_address_zip_code'
name='billing_address_zip_code'
type='text'
className={inputCss}
/>
<Errors
resource='billing_address'
field='billing_address_zip_code'
/>
</div>
</fieldset>

<div className='mb-4'>
<label htmlFor='billing_address_phone'>Phone number</label>
<AddressInput
id='billing_address_phone'
name='billing_address_phone'
type='tel'
className={inputCss}
/>
<Errors
resource='billing_address'
field='billing_address_phone'
/>
</div>
</BillingAddressForm>

<SaveAddressesButton
className='p-4 bg-black text-white rounded'
label='Save address'
onClick={() => {
console.log('Address updated')
}}
/>
</AddressesContainer>
</CustomerContainer>
<section className='mb-4'>
<GiftCardOrCouponForm>
<GiftCardOrCouponInput
placeholder='Gift card or coupon'
className='border p-2'
/>
<GiftCardOrCouponSubmit
label='Add'
className='px-4 py-2 bg-black border text-white'
/>
</GiftCardOrCouponForm>
<div className='flex gap-2 items-center mt-2'>
<GiftCardOrCouponCode />
<GiftCardOrCouponRemoveButton
label='remove'
className='hover:underline text-sm text-red-500'
/>
</div>
</section>
</OrderContainer>
</OrderStorage>
</CommerceLayer>
)
}

export const ShipmentMethods: StoryFn = (args) => {
return (
<CommerceLayer
accessToken='my-access-token'
endpoint='https://demo-store.commercelayer.io'
>
<OrderStorage persistKey='cl-examples-checkout1'>
<OrderContainer>
<ShipmentsContainer>
<Errors resource='shipments' />
<Shipment>
<ShipmentField name='number' />
<ShippingMethod>
<div className='block'>
<ShippingMethodRadioButton />
<ShippingMethodName />
<ShippingMethodPrice />
<DeliveryLeadTime type='min_days' />-
<DeliveryLeadTime type='max_days' />
</div>
</ShippingMethod>
</Shipment>
</ShipmentsContainer>
<Errors
resource='orders'
field='gift_card_or_coupon_code'
className='text-red-500 text-sm'
messages={[
{
code: 'VALIDATION_ERROR',
resource: 'orders',
field: 'gift_card_or_coupon_code',
message: 'Invalid coupon code'
}
]}
/>

<div className='grid grid-cols-2 max-width'>
Subtotal <SubTotalAmount />
Discount <DiscountAmount />
Gift Card <GiftCardAmount />
Total <TotalAmount />
</div>
</OrderContainer>
</OrderStorage>
</CommerceLayer>
Expand Down

0 comments on commit 2047807

Please sign in to comment.