@riosst100/pwa-marketplace 2.0.8 → 2.0.9

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

@@ -1,159 +0,0 @@
-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

@@ -1,50 +0,0 @@
-.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

@@ -1,45 +0,0 @@
-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

@@ -1,14 +0,0 @@
-.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

@@ -1,90 +0,0 @@
-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

@@ -1,9 +0,0 @@
-.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

@@ -1,86 +0,0 @@
-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

@@ -1,19 +0,0 @@
-.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

@@ -1,63 +0,0 @@
-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

@@ -1,16 +0,0 @@
-.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

@@ -1,15 +0,0 @@
-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
-