@dropins/tools 0.21.1 → 0.21.2-alpha1

package/components/PriceSummary/PriceSummary.stories.jsx

@@ -0,0 +1,456 @@
+import { Button, Input, Picker, Price } from '..';
+import { PriceSummary as component, } from '@adobe/elsie/components/PriceSummary';
+import { action } from '@storybook/addon-actions';
+import { userEvent, within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+/**
+ * Use PriceSummary to provide a summary of the total, subtotal, shipping, discounts, and tax amounts.
+ *
+ * Import the component like this:
+ *
+ * ```tsx
+ * import { PriceSummary } from '@adobe/elsie/componens/PriceSummary';
+ * ```
+ *
+ */
+const meta = {
+    title: 'Components/PriceSummary',
+    component,
+    parameters: {
+        layout: 'fullscreen',
+    },
+    argTypes: {
+        heading: {
+            description: 'Heading for the PriceSummary.',
+            table: {
+                isRequired: true,
+                type: { summary: 'string' },
+            },
+        },
+        loading: {
+            description: 'Show a loading state.',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'true' },
+            },
+        },
+        total: {
+            description: 'Configuration for total price display.',
+            table: {
+                category: 'total',
+                type: { summary: 'object' },
+            },
+            control: false,
+        },
+        /** @ts-ignore */
+        'total.price': {
+            description: 'Price object for total.',
+            table: {
+                category: 'total',
+                type: { summary: 'object' },
+            },
+        },
+        'total.estimated': {
+            description: 'Whether total is estimated.',
+            table: {
+                category: 'total',
+                type: { summary: 'boolean' },
+            },
+        },
+        'total.priceWithoutTax': {
+            description: 'Price object for total without tax.',
+            table: {
+                category: 'total',
+                type: { summary: 'object' },
+            },
+        },
+        subTotal: {
+            description: 'Configuration for subtotal price display.',
+            table: {
+                category: 'subtotal',
+                type: { summary: 'object' },
+            },
+            control: false,
+        },
+        'subTotal.price': {
+            description: 'Price object for subtotal.',
+            table: {
+                category: 'subtotal',
+                type: { summary: 'object' },
+            },
+        },
+        'subTotal.taxIncluded': {
+            description: 'Whether subtotal includes tax.',
+            table: {
+                category: 'subtotal',
+                type: { summary: 'boolean' },
+            },
+        },
+        shipping: {
+            description: 'Configuration for shipping price display.',
+            table: {
+                category: 'shipping',
+                type: { summary: 'object' },
+            },
+            control: false,
+        },
+        'shipping.price': {
+            description: 'Price object for shipping.',
+            table: {
+                category: 'shipping',
+                type: { summary: 'object' },
+            },
+        },
+        'shipping.estimated': {
+            description: 'Whether shipping is estimated.',
+            table: {
+                category: 'shipping',
+                type: { summary: 'boolean' },
+            },
+        },
+        'shipping.taxIncluded': {
+            description: 'Whether shipping includes tax.',
+            table: {
+                category: 'shipping',
+                type: { summary: 'boolean' },
+            },
+        },
+        'shipping.countryField': {
+            description: 'Country field input for shipping estimation.',
+            table: {
+                category: 'shipping',
+                type: { summary: 'object' },
+            },
+        },
+        'shipping.stateField': {
+            description: 'State field input for shipping estimation.',
+            table: {
+                category: 'shipping',
+                type: { summary: 'object' },
+            },
+        },
+        'shipping.zipField': {
+            description: 'Zip code input for shipping estimation.',
+            table: {
+                category: 'shipping',
+                type: { summary: 'object' },
+            },
+        },
+        'shipping.destinationText': {
+            description: 'Destination text for shipping estimation.',
+            table: {
+                category: 'shipping',
+                type: { summary: 'string' },
+            },
+        },
+        'shipping.onEstimate': {
+            description: 'Function to call when estimating shipping.',
+            table: {
+                category: 'shipping',
+                type: { summary: 'function' },
+            },
+        },
+        'shipping.estimateButton': {
+            description: 'Button to estimate shipping.',
+            table: {
+                category: 'shipping',
+                type: { summary: 'object' },
+            },
+        },
+        taxTotal: {
+            description: 'Total tax object.',
+            table: {
+                type: { summary: 'object' },
+            },
+            control: false,
+        },
+        'taxTotal.price': {
+            description: 'Price object for taxes.',
+            table: {
+                category: 'taxTotal',
+                type: { summary: 'object' },
+            },
+        },
+        'taxTotal.estimated': {
+            description: 'Whether taxTotal is estimated.',
+            table: {
+                category: 'taxTotal',
+                type: { summary: 'boolean' },
+            },
+        },
+        taxesApplied: {
+            description: 'Array of the taxes applied.',
+            table: {
+                category: 'taxes applied',
+                type: { summary: 'array' },
+            },
+            control: false,
+        },
+        'taxsAppliedEntry.label': {
+            description: 'Label for tax applied.',
+            table: {
+                category: 'taxes applied',
+                type: { summary: 'string' },
+            },
+        },
+        'taxesAppliedEntry.price': {
+            description: 'Price object for tax applied.',
+            table: {
+                category: 'taxes applied',
+                type: { summary: 'object' },
+            },
+        },
+        discounts: {
+            description: 'Array of discounts.',
+            table: {
+                category: 'discounts',
+                type: { summary: 'array' },
+            },
+            control: false,
+        },
+        'discountsEntry.label': {
+            description: 'Label for discount.',
+            table: {
+                category: 'discounts',
+                type: { summary: 'string' },
+            },
+        },
+        'discountsEntry.price': {
+            description: 'Price object for discount.',
+            table: {
+                category: 'discounts',
+                type: { summary: 'object' },
+            },
+        },
+        'discountsEntry.caption': {
+            description: 'Caption element for discount.',
+            table: {
+                category: 'discounts',
+                type: { summary: 'object' },
+            },
+        },
+        primaryAction: {
+            description: 'Primary action button.',
+            table: {
+                type: { summary: 'object' },
+            },
+            control: false,
+        },
+    },
+};
+export default meta;
+const defaultProps = {
+    heading: 'Order Summary',
+    loading: false,
+    total: {
+        price: <Price amount={100} currency="USD"/>,
+        priceWithoutTax: <Price amount={90} currency="USD"/>,
+    },
+    subTotal: {
+        price: <Price amount={90} currency="USD"/>,
+        taxIncluded: true,
+    },
+    shipping: {
+        price: <Price amount={10} currency="USD"/>,
+        taxIncluded: true,
+    },
+    taxTotal: {
+        price: <Price amount={10} currency="USD"/>,
+    },
+    taxesApplied: [
+        {
+            label: 'VAT standard',
+            price: <Price amount={5} currency="USD"/>,
+        },
+        {
+            label: 'VAT reduced',
+            price: <Price amount={5} currency="USD"/>,
+        },
+    ],
+};
+/**
+ * Use the component like this to get a Checkout variation of the PriceSummary:
+ *
+ * ```tsx
+ * <PriceSummary
+ *    heading='Order Summary'
+ *    loading={false}
+ *    total={{
+ *      price: <Price amount={100} currency="USD" />
+ *      priceWithoutTax: <Price amount={90} currency="USD" />,
+ *    }}
+ *    subTotal={
+ *      price: <Price amount={90} currency="USD" />,
+ *      taxIncluded: true,
+ *    }
+ *    shipping={{
+ *      price: <Price amount={10} currency="USD" />,
+ *      taxIncluded: true,
+ *    }}
+ *    taxTotal={<Price amount={10} currency="USD" />},
+ *    taxesApplied={[
+ *      {
+ *        label: 'VAT standard',
+ *        price: <Price amount={5} currency="USD" />,
+ *      },
+ *      {
+ *        label: 'VAT reduced',
+ *        price: <Price amount={5} currency="USD" />,
+ *      },
+ *    ]}
+ * />
+ * ```
+ */
+export const Checkout = {
+    args: {
+        ...defaultProps,
+    },
+};
+/**
+ * Use the component like this to get a Cart variation of the PriceSummary:
+ *
+ * ```tsx
+ * <PriceSummary
+ *    heading='Order Summary'
+ *    loading={false}
+ *    subTotal={{
+ *      price: <Price amount={90} currency="USD" />,
+ *    }}
+ *    shipping={{
+ *      price: <Price amount={10} currency="USD" />,
+ *      estimated: true,
+ *      countryField: (
+ *       <Picker
+ *        name="shippingCountry"
+ *        placeholder="Country"
+ *        variant="primary"
+ *        options={[
+ *          { text: 'United States', value: 'US' },
+ *          { text: 'Canada', value: 'CA' },
+ *         ]}/>
+ *       ),
+ *      stateField: (
+ *        <Picker name="shippingState" placeholder="State" variant="primary"
+ *          options={
+ *         [
+ *          { text: 'Alabama', value: 'AL' },
+ *          { text: 'Alaska', value: 'AK' },
+ *          { text: 'Arizona', value: 'AZ' },
+ *         ]} />
+ *       ),
+ *     zipField: (
+ *      <Input
+ *          aria-label="Zip"
+ *          name="shippingZip"
+ *          placeholder="Zip Code"
+ *          variant="primary"
+ *          value=""
+ *        />
+ *      ),
+ *     destinationText: '12345',
+ *     onEstimate: (value) => console.log(value),
+ *     estimateButton: <Button variant="secondary">Apply</Button>,
+ *    }}
+ *    total={{
+ *      price: <Price amount={100} currency="USD" />,
+ *      estimated: true,
+ *    }}
+ *    taxTotal={<span>TBD</span>}
+ *    discounts={[
+ *      {
+ *        label: '10% off',
+ *        price: <Price amount={-10} currency="USD" sale={true} />,
+ *      },
+ *      {
+ *        label: '100th Customer Discount',
+ *        price: <Price amount={-2} currency="USD" sale={true} />,
+ *        caption: <div>Discount for our 100th customer!</div>,
+ *      },
+ *    ]}
+ *    primaryAction={<Button variant="primary">Checkout</Button>}
+ * />
+ * ```
+ */
+export const Cart = {
+    args: {
+        heading: 'Order Summary',
+        loading: false,
+        subTotal: {
+            price: <Price amount={90} currency="USD"/>,
+        },
+        shipping: {
+            price: <Price amount={10} currency="USD"/>,
+            estimated: true,
+            countryField: (<Picker name="shippingCountry" placeholder="Country" variant="primary" options={[
+                    { text: 'United States', value: 'US' },
+                    { text: 'Canada', value: 'CA' },
+                    { text: 'Mexico', value: 'MX' },
+                    { text: 'United Kingdom', value: 'UK' },
+                ]} data-testid="country-field"/>),
+            stateField: (<Picker name="shippingState" placeholder="State" variant="primary" options={[
+                    { text: 'Alabama', value: 'AL' },
+                    { text: 'Alaska', value: 'AK' },
+                    { text: 'Arizona', value: 'AZ' },
+                    { text: 'Arkansas', value: 'AR' },
+                ]} data-testid="state-field"/>),
+            zipField: (<Input aria-label="Zip" name="shippingZip" placeholder="Zip Code" variant="primary" value="" data-testid="zip-field"/>),
+            destinationText: '12345',
+            onEstimate: (value) => action('onEstimate')(value),
+            estimateButton: <Button variant="secondary">Apply</Button>,
+        },
+        total: {
+            price: <Price amount={100} currency="USD"/>,
+            estimated: true,
+        },
+        taxTotal: { price: <span>TBD</span>, estimated: true },
+        discounts: [
+            {
+                label: '10% off',
+                price: <Price amount={-10} currency="USD" sale={true}/>,
+            },
+            {
+                label: '100th Customer Discount',
+                price: <Price amount={-2} currency="USD" sale={true}/>,
+                caption: <div>Discount for our 100th customer!</div>,
+            },
+        ],
+        primaryAction: <Button variant="primary">Checkout</Button>,
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        let form = await canvas.queryByTestId('shipping-estimate-form');
+        await expect(form).not.toBeNull();
+        const toggleFormLink = await canvas.findByTestId('shipping-destination-link');
+        await userEvent.click(toggleFormLink);
+        form = await canvas.queryByTestId('shipping-estimate-form');
+        await expect(form?.classList).toContain('dropin-price-summary__shipping--hide');
+        await userEvent.click(toggleFormLink);
+        const alternateFieldLink = await canvas.findByTestId('shipping-alternate-field-link');
+        await userEvent.click(alternateFieldLink);
+        const stateField = await canvas.findByTestId('state-field');
+        await expect(stateField).not.toBeNull();
+        await userEvent.click(alternateFieldLink);
+        const countryField = await canvas.findByTestId('country-field');
+        await userEvent.selectOptions(countryField, 'CA');
+        const zipField = await canvas.findByTestId('zip-field');
+        await userEvent.type(zipField, '12345');
+        const estimateButton = await canvas.findByText('Apply');
+        await userEvent.click(estimateButton);
+    },
+};
+/**
+ * Set the loading prop to true to show a loading state.
+ *
+ * ```tsx
+ * <PriceSummary
+ *   heading='Order Summary',
+ *   loading={true},
+ * />
+ * ```
+ */
+export const Loading = {
+    args: {
+        heading: 'Order Summary',
+        loading: true,
+    },
+};

package/components/PriceSummary/PriceSummary.test.d.ts

@@ -0,0 +1,3 @@
+/** https://preactjs.com/guide/v10/preact-testing-library/ */
+export {};
+//# sourceMappingURL=PriceSummary.test.d.ts.map

package/components/PriceSummary/PriceSummary.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PriceSummary.test.d.ts","sourceRoot":"","sources":["../../../src/components/PriceSummary/PriceSummary.test.tsx"],"names":[],"mappings":"AAAA,6DAA6D"}