@riosst100/pwa-marketplace 2.0.9 → 2.1.0

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;
+}

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

@@ -0,0 +1,86 @@
+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 './shippingMethod.module.css';
+
+const ShippingMethod = props => {
+    const { data, classes: propsClasses } = props;
+    const { shipments, shippingMethod } = data;
+    const classes = useStyle(defaultClasses, propsClasses);
+    let trackingElement;
+
+    if (shipments.length) {
+        trackingElement = shipments.map(shipment => {
+            const { tracking: trackingCollection } = shipment;
+            if (trackingCollection.length) {
+                return trackingCollection.map(tracking => {
+                    const { number } = tracking;
+
+                    return (
+                        <span className={classes.trackingRow} key={number}>
+                            <FormattedMessage
+                                id="orderDetails.trackingInformation"
+                                defaultMessage="<strong>Tracking number:</strong> {number}"
+                                values={{
+                                    number,
+                                    strong: chunks => <strong>{chunks}</strong>
+                                }}
+                            />
+                        </span>
+                    );
+                });
+            }
+        });
+    } else {
+        trackingElement = (
+            <FormattedMessage
+                id="orderDetails.waitingOnTracking"
+                defaultMessage="Waiting for tracking information"
+            />
+        );
+    }
+
+    return (
+        <div
+            className={classes.root}
+            data-cy="OrderDetails-ShippingMethod-root"
+        >
+            <div className={classes.heading}>
+                <FormattedMessage
+                    id="orderDetails.shippingMethodLabel"
+                    defaultMessage="Shipping Method"
+                />
+            </div>
+            <div className={classes.method}>{shippingMethod}</div>
+            <div className={classes.tracking}>{trackingElement}</div>
+        </div>
+    );
+};
+
+export default ShippingMethod;
+
+ShippingMethod.propTypes = {
+    classes: shape({
+        root: string,
+        heading: string,
+        method: string,
+        tracking: string,
+        trackingRow: string
+    }),
+    data: shape({
+        shippingMethod: string,
+        shipments: arrayOf(
+            shape({
+                id: string,
+                tracking: arrayOf(
+                    shape({
+                        number: string
+                    })
+                )
+            })
+        )
+    })
+};

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

@@ -0,0 +1,19 @@
+.root {
+    composes: grid from global;
+    composes: gap-y-1.5 from global;
+}
+
+.heading {
+    composes: font-bold from global;
+    composes: pb-1.5 from global;
+}
+
+/* TODO @TW: cannot compose */
+.method:empty {
+    display: none;
+}
+
+.tracking {
+    composes: grid from global;
+    composes: gap-y-1.5 from global;
+}

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

@@ -0,0 +1,63 @@
+import React, { useMemo } from 'react';
+import { arrayOf, object, shape, string } from 'prop-types';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Image from '@magento/venia-ui/lib/components/Image';
+
+import defaultClasses from './collapsedImageGallery.module.css';
+
+const DISPLAY_COUNT = 4;
+
+const CollapsedImageGallery = props => {
+    const { items } = props;
+
+    const classes = useStyle(defaultClasses, props.classes);
+    const remainderCount = items.length - DISPLAY_COUNT;
+
+    const imageElements = useMemo(() => {
+        if (items) {
+            const baseImageElements = Object.values(items)
+                .slice(0, DISPLAY_COUNT)
+                .map((item, index) => {
+                    const { thumbnail, name } = item;
+                    const { url } = thumbnail;
+
+                    return (
+                        <Image
+                            key={Object.keys(items)[index]}
+                            alt={name}
+                            src={url}
+                            width={48}
+                        />
+                    );
+                });
+
+            // If the order contains more than four products, render a remainder count in the last column.
+            if (remainderCount > 0) {
+                const remainderCountString = `+${remainderCount}`;
+                baseImageElements.push(
+                    <span
+                        key={'remainder-column'}
+                        className={classes.remainderCount}
+                    >
+                        {remainderCountString}
+                    </span>
+                );
+            }
+
+            return baseImageElements;
+        }
+    }, [classes.remainderCount, items, remainderCount]);
+
+    return <div className={classes.root}>{imageElements}</div>;
+};
+
+export default CollapsedImageGallery;
+
+CollapsedImageGallery.propTypes = {
+    classes: shape({
+        root: string,
+        remainderCount: string
+    }),
+    items: arrayOf(object)
+};

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

@@ -0,0 +1,16 @@
+.root {
+    composes: gap-x-1 from global;
+    composes: grid from global;
+    composes: h-full from global;
+    composes: items-center from global;
+    composes: justify-items-center from global;
+    composes: px-1 from global;
+    composes: py-0 from global;
+    grid-template-columns: repeat(5, 1fr);
+}
+
+.remainderCount {
+    composes: justify-self-center from global;
+    composes: text-sm from global;
+    composes: text-subtle from global;
+}

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

@@ -0,0 +1,15 @@
+import OrderHistoryPage from './orderHistoryPage'
+import AccountLayout from '@riosst100/pwa-marketplace/src/components/AccountLayout';
+
+import React from 'react'
+
+const index = () => {
+    return (
+        <AccountLayout>
+            <OrderHistoryPage />
+        </AccountLayout>
+    )
+}
+
+export default index
+