Skip to content

Commit

Permalink
docs: add orders section
Browse files Browse the repository at this point in the history
  • Loading branch information
gciotola committed Oct 24, 2023
1 parent 50805de commit 6ca96c0
Show file tree
Hide file tree
Showing 2 changed files with 68 additions and 0 deletions.
35 changes: 35 additions & 0 deletions packages/docs/stories/orders/OrderContainer.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import type { Meta, StoryFn } from '@storybook/react'
import CommerceLayer from '../_internals/CommerceLayer'
import OrderContainer from '#components/orders/OrderContainer'
import OrderNumber from '#components/orders/OrderNumber'
import TotalAmount from '#components/orders/TotalAmount'

const setup: Meta<typeof OrderContainer> = {
title: 'Components/Orders/OrderContainer',
component: OrderContainer
}

export default setup

const Template: StoryFn<typeof OrderContainer> = (args) => {
return (
<CommerceLayer accessToken='my-access-token'>
<OrderContainer {...args}>
<div>
Order number: <OrderNumber />
</div>
<div>
Total amount: <TotalAmount />
</div>
</OrderContainer>
</CommerceLayer>
)
}

export const Default = Template.bind({})
Default.args = {
orderId: 'KaeheROdbp',
fetchOrder: (order) => {
console.log('fetchOrder: ', order)
}
}
33 changes: 33 additions & 0 deletions packages/react-components/src/components/orders/OrderContainer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,39 @@ interface Props {
fetchOrder?: (order: Order) => void
}

/**
* This component is responsible for fetching the order and store it in its context.
* It also provides the `fetchOrder` callback that is triggered every time the order is updated (it returns the updated order object as argument).
* When the order is not placed yet, its possible to pass the `metadata` and `attributes` props to update the order.
*
* <span title="Requirement" type="warning">
* Must be a child of the `<CommerceLayer>` component. <br />
* Can be a child of the `<OrderStorage>` component and receive the `orderId` from it.
* </span>
*
* <span title="Children" type="info">
* `<AddToCartButton>`,
* `<AdjustmentAmount>`,
* `<CartLink>`,
* `<CheckoutLink>`,
* `<DiscountAmount>`,
* `<GiftCardAmount>`,
* `<HostedCart>`,
* `<OrderNumber>`,
* `<PaymentMethodAmount>`,
* `<PlaceOrderButton>`,
* `<PlaceOrderContainer>`,
* `<PrivacyAndTermsCheckbox>`,
* `<Shipping Amount>`,
* `<SubTotalAmount>`,
* `<TaxesAmount>`,
* `<TotalAmount>`,
* </span>
*
* <span title="Core API" type="info">
* Check the `orders` resource from our [Core API documentation](https://docs.commercelayer.io/core/v/api-reference/orders/object).
* </span>
*/
export function OrderContainer(props: Props): JSX.Element {
const { orderId, children, metadata, attributes, fetchOrder } = props
const [state, dispatch] = useReducer(orderReducer, orderInitialState)
Expand Down

0 comments on commit 6ca96c0

Please sign in to comment.