import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import { orderConfirmationMockData } from '../../../../mocks/customer/orderConfirmation';
import OrderConfirmation from '../OrderConfirmation';
import { TableContentFromObject, FormOutput, CollapsibleJsonSnippet } from '../../../tools/docTools';
import * as OrderConfirmationStories from './OrderConfirmation.stories';
import { getArgs } from '../../../tools/controlsHelper';

export const orderConfirmationSettings = {
    icon: 'Image uploader for the icon above the title',
    title: 'The text of the title',
    message: 'The text of the message under the title',
    viewApps: 'The text on the "ViewApps" button',
    viewAppsIcon: 'Image uploader for the icon on the "ViewApps" button',
    continueShopping: 'The text on the "continueShopping" button',
    continueShoppingIcon: 'Image uploader for the icon on the "continueShopping" button',
    assignProducts: 'The text on the "assignProducts" link',
    assignProductsIcon: 'Image uploader for the icon on the "assignProducts" link'
};

<Meta of={OrderConfirmationStories} />

# OrderConfirmation

<br />

## `OrderConfirmations` are used to alert and confirm a user's order.

<br />

### Default

<Canvas>
  <Story of={OrderConfirmationStories.Default} />
</Canvas>

### With Settings

<Canvas>
  <Story of={OrderConfirmationStories.WithSettings} />
</Canvas>

## Usage Example

<CollapsibleJsonSnippet summary="orderConfirmationData" code={orderConfirmationMockData} />

<br />

<CollapsibleJsonSnippet summary="orderConfirmationSettings" code={getArgs(OrderConfirmation.schema().form)} />

```jsx
import OrderConfirmation from '@appdirect/sfb-theme-components/src/components/order-confirmation/OrderConfirmation';

<OrderConfirmation data={orderConfirmationData} settings={orderConfirmationSettings} />
```

## Props

<ArgsTable of={OrderConfirmation} />

## Schema

### Form Settings

<table>
  <TableContentFromObject obj={orderConfirmationSettings} />
</table>

### Form Output

<FormOutput code={OrderConfirmation.schema().form} />
