@riosst100/pwa-marketplace 2.0.7 → 2.0.9

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

@@ -1,71 +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 './billingInformation.module.css';
-
-const BillingInformation = props => {
-    const { data, classes: propsClasses } = props;
-    const {
-        city,
-        country_code,
-        firstname,
-        lastname,
-        postcode,
-        region,
-        street
-    } = data;
-    const classes = useStyle(defaultClasses, propsClasses);
-
-    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>
-        );
-    });
-
-    return (
-        <div
-            className={classes.root}
-            data-cy="OrderDetails-BillingInformation-root"
-        >
-            <div className={classes.heading}>
-                <FormattedMessage
-                    id="orderDetails.billingInformationLabel"
-                    defaultMessage="Billing Information"
-                />
-            </div>
-            <span className={classes.name}>{fullName}</span>
-            {streetRows}
-            <div className={classes.additionalAddress}>
-                {additionalAddressString}
-            </div>
-        </div>
-    );
-};
-
-export default BillingInformation;
-
-BillingInformation.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)
-    })
-};

package/src/overwrites/venia-ui/lib/components/OrderHistoryPage/OrderDetails/billingInformation.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/index.js

@@ -1 +0,0 @@
-export { default } from './orderDetails';

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

@@ -1,121 +0,0 @@
-import React, { useMemo } from 'react';
-import { shape, string, number, arrayOf } from 'prop-types';
-import { FormattedMessage } from 'react-intl';
-import { Link } from 'react-router-dom';
-import { useOrderHistoryContext } from '@magento/peregrine/lib/talons/OrderHistoryPage/orderHistoryContext';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import Button from '@magento/venia-ui/lib/components/Button';
-import ProductOptions from '@magento/venia-ui/lib/components/LegacyMiniCart/productOptions';
-import Image from '@magento/venia-ui/lib/components/Image';
-import Price from '@magento/venia-ui/lib/components/Price';
-import defaultClasses from './item.module.css';
-import PlaceholderImage from '@magento/venia-ui/lib/components/Image/placeholderImage';
-
-const Item = props => {
-    const {
-        product_name,
-        product_sale_price,
-        product_url_key,
-        quantity_ordered,
-        selected_options,
-        thumbnail
-    } = props;
-    const { currency, value: unitPrice } = product_sale_price;
-
-    const orderHistoryState = useOrderHistoryContext();
-    const { productURLSuffix } = orderHistoryState;
-    const itemLink = `${product_url_key}${productURLSuffix}`;
-    const mappedOptions = useMemo(
-        () =>
-            selected_options.map(option => ({
-                option_label: option.label,
-                value_label: option.value
-            })),
-        [selected_options]
-    );
-    const classes = useStyle(defaultClasses, props.classes);
-
-    const thumbnailProps = {
-        alt: product_name,
-        classes: { root: classes.thumbnail },
-        width: 50
-    };
-    const thumbnailElement = thumbnail ? (
-        <Image {...thumbnailProps} resource={thumbnail.url} />
-    ) : (
-        <PlaceholderImage {...thumbnailProps} />
-    );
-
-    return (
-        <div className={classes.root}>
-            <Link className={classes.thumbnailContainer} to={itemLink}>
-                {thumbnailElement}
-            </Link>
-            <div className={classes.nameContainer}>
-                <Link to={itemLink}>{product_name}</Link>
-            </div>
-            <ProductOptions
-                options={mappedOptions}
-                classes={{
-                    options: classes.options
-                }}
-            />
-            <span className={classes.quantity}>
-                <FormattedMessage
-                    id="orderDetails.quantity"
-                    defaultMessage="Qty : {quantity}"
-                    values={{
-                        quantity: quantity_ordered
-                    }}
-                />
-            </span>
-            <div className={classes.price}>
-                <Price currencyCode={currency} value={unitPrice} />
-            </div>
-            <Button
-                onClick={() => {
-                    // TODO will be implemented in PWA-979
-                    console.log('Buying Again');
-                }}
-                className={classes.buyAgainButton}
-            >
-                <FormattedMessage
-                    id="orderDetails.buyAgain"
-                    defaultMessage="Buy Again"
-                />
-            </Button>
-        </div>
-    );
-};
-
-export default Item;
-
-Item.propTypes = {
-    classes: shape({
-        root: string,
-        thumbnailContainer: string,
-        thumbnail: string,
-        name: string,
-        options: string,
-        quantity: string,
-        price: string,
-        buyAgainButton: string
-    }),
-    product_name: string.isRequired,
-    product_sale_price: shape({
-        currency: string,
-        value: number
-    }).isRequired,
-    product_url_key: string.isRequired,
-    quantity_ordered: number.isRequired,
-    selected_options: arrayOf(
-        shape({
-            label: string,
-            value: string
-        })
-    ).isRequired,
-    thumbnail: shape({
-        url: string
-    })
-};

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

@@ -1,35 +0,0 @@
-.root {
-    composes: grid from global;
-    composes: grid-cols-autoFirst from global;
-    composes: grid-rows-autoFirst from global;
-    composes: gap-y-2 from global;
-    composes: gap-x-4 from global;
-
-    composes: lg_gap-y-1.5 from global;
-}
-
-@media (min-width: 960px) {
-    .root {
-        grid-template-columns: auto repeat(3, 1fr) auto;
-        grid-template-rows: repeat(5, auto);
-    }
-}
-
-.thumbnailContainer {
-    grid-row: 1 / -1;
-}
-
-.nameContainer {
-    composes: font-bold from global;
-    grid-column: 2 / -1;
-}
-
-.buyAgainButton {
-    composes: col-auto from global;
-    composes: invisible from global; /* Hide until PWA-979 is completed */
-    composes: justify-self-start from global;
-    composes: self-start from global;
-    composes: underline from global;
-
-    composes: lg_col-end-[-1] from global;
-}

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

@@ -1,70 +0,0 @@
-import React from 'react';
-import { shape, arrayOf, string, number } from 'prop-types';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-
-import Item from './item';
-
-import defaultClasses from './items.module.css';
-import { FormattedMessage } from 'react-intl';
-
-const Items = props => {
-    const { items, imagesData } = props.data;
-    const classes = useStyle(defaultClasses, props.classes);
-
-    const itemsComponent = items.map(item => (
-        <Item key={item.id} {...item} {...imagesData[item.product_sku]} />
-    ));
-
-    return (
-        <div className={classes.root} data-cy="OrderDetails-Items-root">
-            <h3 className={classes.heading}>
-                <FormattedMessage
-                    id="orderItems.itemsHeading"
-                    defaultMessage="Items"
-                />
-            </h3>
-            <div className={classes.itemsContainer}>{itemsComponent}</div>
-        </div>
-    );
-};
-
-export default Items;
-
-Items.propTypes = {
-    classes: shape({
-        root: string
-    }),
-    data: shape({
-        items: arrayOf(
-            shape({
-                id: string,
-                product_name: string,
-                product_sale_price: shape({
-                    currency: string,
-                    value: number
-                }),
-                product_sku: string,
-                product_url_key: string,
-                selected_options: arrayOf(
-                    shape({
-                        label: string,
-                        value: string
-                    })
-                ),
-                quantity_ordered: number
-            })
-        ),
-        imagesData: arrayOf(
-            shape({
-                id: number,
-                sku: string,
-                thumbnail: shape({
-                    url: string
-                }),
-                url_key: string,
-                url_suffix: string
-            })
-        )
-    })
-};

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

@@ -1,16 +0,0 @@
-.root {
-    composes: pr-0 from global;
-
-    composes: lg_grid from global;
-    composes: lg_pr-sm from global;
-}
-
-.heading {
-    composes: font-bold from global;
-    composes: pb-3 from global;
-}
-
-.itemsContainer {
-    composes: grid from global;
-    composes: gap-y-md from global;
-}

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

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

@@ -1,102 +0,0 @@
-.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;
-    }
-}