@riosst100/pwa-marketplace 1.8.9 → 1.9.0

package/src/overwrites/venia-ui/lib/components/OrderHistoryPage/OrderDetails/orderDetails.js

@@ -0,0 +1,207 @@
+import React from 'react';
+import { arrayOf, number, shape, string } from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+
+import { Printer } from 'react-feather';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+import BillingInformation from './billingInformation';
+import Items from './items';
+import PaymentMethod from './paymentMethod';
+import ShippingInformation from './shippingInformation';
+import ShippingMethod from './shippingMethod';
+import OrderTotal from './orderTotal';
+import Icon from '@magento/venia-ui/lib/components/Icon';
+import Button from '@magento/venia-ui/lib/components/Button';
+
+import defaultClasses from './orderDetails.module.css';
+
+const ConditionalWrapper = props => (props.condition ? props.children : null);
+
+const OrderDetails = props => {
+    const { classes: propClasses, imagesData, orderData } = props;
+    const {
+        billing_address,
+        items,
+        payment_methods,
+        shipping_address,
+        shipping_method,
+        shipments,
+        total
+    } = orderData;
+    const classes = useStyle(defaultClasses, propClasses);
+
+    const shippingMethodData = {
+        shippingMethod: shipping_method,
+        shipments
+    };
+
+    const hasTotals = total.grand_total && total.grand_total.currency;
+
+    return (
+        <div className={classes.root}>
+            <div className={classes.shippingInformationContainer}>
+                <ConditionalWrapper condition={shipping_address}>
+                    <ShippingInformation data={shipping_address} />
+                </ConditionalWrapper>
+            </div>
+            <div className={classes.shippingMethodContainer}>
+                <ConditionalWrapper condition={shipping_method}>
+                    <ShippingMethod data={shippingMethodData} />
+                </ConditionalWrapper>
+            </div>
+            <div className={classes.billingInformationContainer}>
+                <ConditionalWrapper condition={billing_address}>
+                    <BillingInformation data={billing_address} />
+                </ConditionalWrapper>
+            </div>
+            <div className={classes.paymentMethodContainer}>
+                <ConditionalWrapper
+                    condition={payment_methods && payment_methods.length}
+                >
+                    <PaymentMethod data={payment_methods} />
+                </ConditionalWrapper>
+            </div>
+            <div className={classes.itemsContainer}>
+                <ConditionalWrapper condition={items && items.length}>
+                    <Items data={{ imagesData, items }} />
+                </ConditionalWrapper>
+            </div>
+            <div className={classes.orderTotalContainer}>
+                <ConditionalWrapper condition={hasTotals}>
+                    <OrderTotal data={total} />
+                </ConditionalWrapper>
+            </div>
+            <Button
+                className={classes.printButton}
+                onClick={() => {
+                    // TODO will be implemented in PWA-978
+                    console.log('Printing Receipt');
+                }}
+            >
+                <Icon src={Printer} />
+                <span className={classes.printLabel}>
+                    <FormattedMessage
+                        id="orderDetails.printLabel"
+                        defaultMessage="Print Receipt"
+                    />
+                </span>
+            </Button>
+        </div>
+    );
+};
+
+export default OrderDetails;
+
+OrderDetails.propTypes = {
+    classes: shape({
+        root: string,
+        shippingInformationContainer: string,
+        shippingMethodContainer: string,
+        billingInformationContainer: string,
+        paymentMethodContainer: string,
+        itemsContainer: string,
+        orderTotalContainer: string,
+        printButton: string,
+        printLabel: string
+    }),
+    imagesData: arrayOf(
+        shape({
+            id: number,
+            sku: string,
+            thumbnail: shape({
+                url: string
+            }),
+            url_key: string,
+            url_suffix: string
+        })
+    ),
+    orderData: shape({
+        billing_address: shape({
+            city: string,
+            country_code: string,
+            firstname: string,
+            lastname: string,
+            postcode: string,
+            region_id: string,
+            street: arrayOf(string)
+        }),
+        items: arrayOf(
+            shape({
+                id: string,
+                product_name: string,
+                product_sale_price: shape({
+                    currency: string,
+                    value: number
+                }),
+                product_sku: string,
+                selected_options: arrayOf(
+                    shape({
+                        label: string,
+                        value: string
+                    })
+                ),
+                quantity_ordered: number
+            })
+        ),
+        payment_methods: arrayOf(
+            shape({
+                type: string,
+                additional_data: arrayOf(
+                    shape({
+                        name: string,
+                        value: string
+                    })
+                )
+            })
+        ),
+        shipping_address: shape({
+            city: string,
+            country_code: string,
+            firstname: string,
+            lastname: string,
+            postcode: string,
+            region_id: string,
+            street: arrayOf(string),
+            telephone: string
+        }),
+        shipping_method: string,
+        shipments: arrayOf(
+            shape({
+                id: string,
+                tracking: arrayOf(
+                    shape({
+                        carrier: string,
+                        number: string
+                    })
+                )
+            })
+        ),
+        total: shape({
+            discounts: arrayOf(
+                shape({
+                    amount: shape({
+                        currency: string,
+                        value: number
+                    })
+                })
+            ),
+            grand_total: shape({
+                currency: string,
+                value: number
+            }),
+            subtotal: shape({
+                currency: string,
+                value: number
+            }),
+            total_tax: shape({
+                currency: string,
+                value: number
+            }),
+            total_shipping: shape({
+                currency: string,
+                value: number
+            })
+        })
+    })
+};

package/src/overwrites/venia-ui/lib/components/OrderHistoryPage/OrderDetails/orderDetails.module.css

@@ -0,0 +1,102 @@
+.root {
+    composes: gap-sm from global;
+    composes: grid from global;
+
+    composes: lg_gap-md from global;
+}
+
+.shippingInformationContainer {
+    grid-row: 1 / span 1;
+    grid-column: 1 / span 1;
+}
+
+.shippingMethodContainer {
+    grid-row: 1 / span 1;
+    grid-column: 2 / span 1;
+}
+
+.billingInformationContainer {
+    grid-row: 1 / span 1;
+    grid-column: 3 / span 1;
+}
+
+.paymentMethodContainer {
+    grid-row: 1 / span 1;
+    grid-column: 4 / span 1;
+}
+
+.itemsContainer {
+    grid-row: 2 / span 4;
+    grid-column: 1 / span 2;
+}
+
+.orderTotalContainer {
+    grid-row: 2 / span 2;
+    grid-column: 3 / span 2;
+    composes: m-0 from global;
+    composes: max-w-none from global;
+    composes: min-w-none from global;
+
+    composes: lg_m-auto from global;
+    composes: lg_max-w-[25rem] from global;
+    composes: lg_min-w-[22rem] from global;
+}
+
+.printButton {
+    grid-row: 4 / span 1;
+    grid-column: 3 / span 2;
+
+    composes: items-center from global;
+    composes: gap-x-2xs from global;
+    composes: grid from global;
+    composes: grid-cols-autoFirst from global;
+    composes: grid-flow-col from global;
+    composes: invisible from global; /* Hide until PWA-978 is completed */
+    composes: m-auto from global;
+    composes: w-fit from global;
+}
+
+.printLabel {
+    composes: underline from global;
+}
+
+/*
+ * Mobile-specific styles.
+ */
+
+@media (max-width: 959px) {
+    .shippingInformationContainer {
+        grid-row: 1 / span 1;
+        grid-column: 1 / span 1;
+    }
+
+    .shippingMethodContainer {
+        grid-row: 2 / span 1;
+        grid-column: 1 / span 1;
+    }
+
+    .billingInformationContainer {
+        grid-row: 3 / span 1;
+        grid-column: 1 / span 1;
+    }
+
+    .paymentMethodContainer {
+        grid-row: 4 / span 1;
+        grid-column: 1 / span 1;
+    }
+
+    .itemsContainer {
+        grid-row: 5 / span 1;
+        grid-column: 1 / span 1;
+    }
+
+    .orderTotalContainer {
+        grid-row: 6 / span 1;
+        grid-column: 1 / span 1;
+    }
+
+    .printButton {
+        grid-row: 7 / span 1;
+        grid-column: 1 / span 1;
+    }
+}

package/src/overwrites/venia-ui/lib/components/OrderHistoryPage/OrderDetails/orderTotal.js

@@ -0,0 +1,159 @@
+import React, { useMemo } from 'react';
+import { arrayOf, string, shape, number } from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+
+import Price from '@magento/venia-ui/lib/components/Price';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+import defaultClasses from './orderTotal.module.css';
+
+const OrderTotal = props => {
+    const { classes: propClasses, data } = props;
+    const {
+        discounts,
+        grand_total,
+        subtotal,
+        total_tax,
+        total_shipping
+    } = data;
+    const classes = useStyle(defaultClasses, propClasses);
+
+    const discountRowElement = useMemo(() => {
+        if (!discounts || !discounts.length) {
+            return null;
+        }
+
+        const discountTotal = {
+            currency: discounts[0].amount.currency,
+            value: discounts.reduce(
+                (acc, discount) => acc + discount.amount.value,
+                0
+            )
+        };
+
+        return (
+            <div className={classes.discount}>
+                <span>
+                    <FormattedMessage
+                        id="orderDetails.discount"
+                        defaultMessage="Discount"
+                    />
+                </span>
+                <span>
+                    <Price
+                        value={discountTotal.value}
+                        currencyCode={discountTotal.currency}
+                    />
+                </span>
+            </div>
+        );
+    }, [classes.discount, discounts]);
+
+    return (
+        <div className={classes.root}>
+            <div className={classes.heading}>
+                <FormattedMessage
+                    id="orderDetails.orderTotal"
+                    defaultMessage="Order Total"
+                />
+            </div>
+            <div className={classes.subTotal}>
+                <span>
+                    <FormattedMessage
+                        id="orderDetails.subtotal"
+                        defaultMessage="Subtotal"
+                    />
+                </span>
+                <span>
+                    <Price
+                        value={subtotal.value}
+                        currencyCode={subtotal.currency}
+                    />
+                </span>
+            </div>
+            {discountRowElement}
+            <div className={classes.tax}>
+                <span>
+                    <FormattedMessage
+                        id="orderDetails.tax"
+                        defaultMessage="Tax"
+                    />
+                </span>
+                <span>
+                    <Price
+                        value={total_tax.value}
+                        currencyCode={total_tax.currency}
+                    />
+                </span>
+            </div>
+            <div className={classes.shipping}>
+                <span>
+                    <FormattedMessage
+                        id="orderDetails.shipping"
+                        defaultMessage="Shipping"
+                    />
+                </span>
+                <span>
+                    <Price
+                        value={total_shipping.value}
+                        currencyCode={total_shipping.currency}
+                    />
+                </span>
+            </div>
+            <div className={classes.total}>
+                <span>
+                    <FormattedMessage
+                        id="orderDetails.total"
+                        defaultMessage="Total"
+                    />
+                </span>
+                <span>
+                    <Price
+                        value={grand_total.value}
+                        currencyCode={grand_total.currency}
+                    />
+                </span>
+            </div>
+        </div>
+    );
+};
+
+export default OrderTotal;
+
+OrderTotal.propTypes = {
+    classes: shape({
+        root: string,
+        heading: string,
+        subTotal: string,
+        discount: string,
+        tax: string,
+        shipping: string,
+        total: string
+    }),
+    data: shape({
+        discounts: arrayOf(
+            shape({
+                amount: shape({
+                    currency: string,
+                    value: number
+                })
+            })
+        ),
+        grand_total: shape({
+            currency: string,
+            value: number
+        }),
+        subtotal: shape({
+            currency: string,
+            value: number
+        }),
+        total_tax: shape({
+            currency: string,
+            value: number
+        }),
+        total_shipping: shape({
+            currency: string,
+            value: number
+        })
+    })
+};

package/src/overwrites/venia-ui/lib/components/OrderHistoryPage/OrderDetails/orderTotal.module.css

@@ -0,0 +1,50 @@
+.root {
+    composes: border-0 from global;
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: px-0 from global;
+    composes: py-xs from global;
+    composes: rounded-none from global;
+
+    composes: lg_border from global;
+    composes: lg_border-solid from global;
+    composes: lg_border-gray-100 from global;
+    composes: lg_p-xs from global;
+    composes: lg_rounded-md from global;
+}
+
+.heading {
+    composes: font-bold from global;
+    composes: pb-2xs from global;
+}
+
+.subTotal {
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: grid-cols-autoLast from global;
+}
+
+.discount {
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: grid-cols-autoLast from global;
+}
+
+.tax {
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: grid-cols-autoLast from global;
+}
+
+.shipping {
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: grid-cols-autoLast from global;
+}
+
+.total {
+    composes: font-bold from global;
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: grid-cols-autoLast from global;
+}

package/src/overwrites/venia-ui/lib/components/OrderHistoryPage/OrderDetails/paymentMethod.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { arrayOf, shape, string } from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+import defaultClasses from './paymentMethod.module.css';
+
+const PaymentMethod = props => {
+    const { data, classes: propsClasses } = props;
+    const classes = useStyle(defaultClasses, propsClasses);
+    /**
+     * There can be multiple payment methods for an order but
+     * since Venia does not support multiple payment methods yet
+     * we are picking the first method in the array.
+     */
+    const [{ name }] = data;
+
+    return (
+        <div className={classes.root} data-cy="OrderDetails-PaymentMethod-root">
+            <div className={classes.heading}>
+                <FormattedMessage
+                    id="orderDetails.paymentMethodLabel"
+                    defaultMessage="Payment Method"
+                />
+            </div>
+            <div className={classes.payment_type}>{name}</div>
+        </div>
+    );
+};
+
+export default PaymentMethod;
+
+PaymentMethod.propTypes = {
+    classes: shape({
+        root: string,
+        heading: string,
+        payment_type: string
+    }),
+    data: arrayOf(
+        shape({
+            name: string
+        })
+    )
+};

package/src/overwrites/venia-ui/lib/components/OrderHistoryPage/OrderDetails/paymentMethod.module.css

@@ -0,0 +1,14 @@
+.root {
+    composes: gap-y-1.5 from global;
+    composes: grid from global;
+}
+
+.heading {
+    composes: font-bold from global;
+    composes: pb-1.5 from global;
+    grid-row: 1 / span 1;
+}
+
+.payment_type {
+    grid-row: 2 / span 1;
+}

package/src/overwrites/venia-ui/lib/components/OrderHistoryPage/OrderDetails/shippingInformation.js

@@ -0,0 +1,90 @@
+import React, { Fragment } from 'react';
+import { arrayOf, shape, string } from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+import defaultClasses from './shippingInformation.module.css';
+
+const ShippingInformation = props => {
+    const { data, classes: propsClasses } = props;
+    const classes = useStyle(defaultClasses, propsClasses);
+
+    let shippingContentElement;
+
+    if (data) {
+        const {
+            city,
+            country_code,
+            firstname,
+            lastname,
+            postcode,
+            region,
+            street
+        } = data;
+
+        const additionalAddressString = `${city}, ${region} ${postcode} ${country_code}`;
+        const fullName = `${firstname} ${lastname}`;
+        const streetRows = street.map((row, index) => {
+            return (
+                <span className={classes.streetRow} key={index}>
+                    {row}
+                </span>
+            );
+        });
+
+        shippingContentElement = (
+            <Fragment>
+                <span className={classes.name}>{fullName}</span>
+                {streetRows}
+                <div className={classes.additionalAddress}>
+                    {additionalAddressString}
+                </div>
+            </Fragment>
+        );
+    } else {
+        shippingContentElement = (
+            <FormattedMessage
+                id="orderDetails.noShippingInformation"
+                defaultMessage="No shipping information"
+            />
+        );
+    }
+
+    return (
+        <div
+            className={classes.root}
+            data-cy="OrderDetails-ShippingInformation-root"
+        >
+            <div className={classes.heading}>
+                <FormattedMessage
+                    id="orderDetails.shippingInformationLabel"
+                    defaultMessage="Shipping Information"
+                />
+            </div>
+            {shippingContentElement}
+        </div>
+    );
+};
+
+export default ShippingInformation;
+
+ShippingInformation.propTypes = {
+    classes: shape({
+        root: string,
+        heading: string,
+        name: string,
+        streetRow: string,
+        additionalAddress: string
+    }),
+    data: shape({
+        city: string,
+        country_code: string,
+        firstname: string,
+        lastname: string,
+        postcode: string,
+        region: string,
+        street: arrayOf(string),
+        telephone: string
+    })
+};

package/src/overwrites/venia-ui/lib/components/OrderHistoryPage/OrderDetails/shippingInformation.module.css

@@ -0,0 +1,9 @@
+.root {
+    composes: grid from global;
+    composes: gap-y-1.5 from global;
+}
+
+.heading {
+    composes: font-bold from global;
+    composes: pb-1.5 from global;
+}