@riosst100/pwa-marketplace 1.8.9 → 1.9.0

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
+

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

@@ -0,0 +1,227 @@
+import React, { useMemo, useEffect } from 'react';
+import { useIntl, FormattedMessage } from 'react-intl';
+import {
+    Search as SearchIcon,
+    AlertCircle as AlertCircleIcon,
+    ArrowRight as SubmitIcon
+} from 'react-feather';
+import { shape, string } from 'prop-types';
+import { Form } from 'informed';
+
+import { useToasts } from '@magento/peregrine/lib/Toasts';
+import OrderHistoryContextProvider from '@magento/peregrine/lib/talons/OrderHistoryPage/orderHistoryContext';
+import { useOrderHistoryPage } from '@magento/peregrine/lib/talons/OrderHistoryPage/useOrderHistoryPage';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Button from '@magento/venia-ui/lib/components/Button';
+import Icon from '@magento/venia-ui/lib/components/Icon';
+import LoadingIndicator from '@magento/venia-ui/lib/components/LoadingIndicator';
+import { StoreTitle } from '@magento/venia-ui/lib/components/Head';
+import TextInput from '@magento/venia-ui/lib/components/TextInput';
+
+import defaultClasses from './orderHistoryPage.module.css';
+import OrderRow from './orderRow';
+import ResetButton from './resetButton';
+import { SearchNormal } from 'iconsax-react';
+import cn from 'classnames';
+
+const errorIcon = (
+    <Icon
+        src={AlertCircleIcon}
+        attrs={{
+            width: 18
+        }}
+    />
+);
+const searchIcon = <Icon src={SearchIcon} size={24} />;
+
+const OrderHistoryPage = props => {
+    const talonProps = useOrderHistoryPage();
+    const {
+        errorMessage,
+        loadMoreOrders,
+        handleReset,
+        handleSubmit,
+        isBackgroundLoading,
+        isLoadingWithoutData,
+        orders,
+        pageInfo,
+        searchText
+    } = talonProps;
+    const [, { addToast }] = useToasts();
+    const { formatMessage } = useIntl();
+    const PAGE_TITLE = formatMessage({
+        id: 'orderHistoryPage.pageTitleText',
+        defaultMessage: 'Order History'
+    });
+    const SEARCH_PLACE_HOLDER = formatMessage({
+        id: 'orderHistoryPage.search',
+        defaultMessage: 'Search by Order Number'
+    });
+
+    const ordersCountMessage = formatMessage(
+        {
+            id: 'orderHistoryPage.ordersCount',
+            defaultMessage: 'You have {count} orders in your history.'
+        },
+        { count: orders.length }
+    );
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const orderRows = useMemo(() => {
+        return orders.map(order => {
+            return <OrderRow key={order.id} order={order} />;
+        });
+    }, [orders]);
+
+    const pageContents = useMemo(() => {
+        if (isLoadingWithoutData) {
+            return <LoadingIndicator />;
+        } else if (!isBackgroundLoading && searchText && !orders.length) {
+            return (
+                <h3 className={classes.emptyHistoryMessage}>
+                    <FormattedMessage
+                        id={'orderHistoryPage.invalidOrderNumber'}
+                        defaultMessage={`Order "${searchText}" was not found.`}
+                        values={{
+                            number: searchText
+                        }}
+                    />
+                </h3>
+            );
+        } else if (!isBackgroundLoading && !orders.length) {
+            return (
+                <h3 className={classes.emptyHistoryMessage}>
+                    <FormattedMessage
+                        id={'orderHistoryPage.emptyDataMessage'}
+                        defaultMessage={"You don't have any orders yet."}
+                    />
+                </h3>
+            );
+        } else {
+            return (
+                <ul
+                    className={classes.orderHistoryTable}
+                    data-cy="OrderHistoryPage-orderHistoryTable"
+                >
+                    {orderRows}
+                </ul>
+            );
+        }
+    }, [
+        classes.emptyHistoryMessage,
+        classes.orderHistoryTable,
+        isBackgroundLoading,
+        isLoadingWithoutData,
+        orderRows,
+        orders.length,
+        searchText
+    ]);
+
+    const resetButtonElement = searchText ? (
+        <ResetButton onReset={handleReset} />
+    ) : null;
+
+    const submitIcon = (
+        <SearchNormal size="18" color="#1b1b1b" className='mt-[4px]' />
+    );
+
+    const pageInfoLabel = pageInfo ? (
+        <FormattedMessage
+            defaultMessage={'Showing {current} of {total}'}
+            id={'orderHistoryPage.pageInfo'}
+            values={pageInfo}
+        />
+    ) : null;
+
+    const loadMoreButton = loadMoreOrders ? (
+        <Button
+            classes={{ root_lowPriority: classes.loadMoreButton }}
+            disabled={isBackgroundLoading || isLoadingWithoutData}
+            onClick={loadMoreOrders}
+            priority="low"
+        >
+            <FormattedMessage
+                id={'orderHistoryPage.loadMore'}
+                defaultMessage={'Load More'}
+            />
+        </Button>
+    ) : null;
+
+    useEffect(() => {
+        if (errorMessage) {
+            addToast({
+                type: 'error',
+                icon: errorIcon,
+                message: errorMessage,
+                dismissable: true,
+                timeout: 10000
+            });
+        }
+    }, [addToast, errorMessage]);
+
+    return (
+        <OrderHistoryContextProvider>
+            <div className={classes.root}>
+                <StoreTitle>{PAGE_TITLE}</StoreTitle>
+                <div aria-live="polite" className="text-xl font-medium text-left">
+                    {PAGE_TITLE}
+                </div>
+                {/* <div>
+                    <div aria-live="polite" aria-label={ordersCountMessage} />
+                </div> */}
+
+                <div className={classes.filterRow}>
+                    <Form className={cn(classes.search, 'border border-gray-100 rounded-full px-[15px]')} onSubmit={handleSubmit}>
+                        <TextInput
+                            // after={resetButtonElement}
+                            // before={searchIcon}
+                            field="search"
+                            id={classes.search}
+                            placeholder={SEARCH_PLACE_HOLDER}
+                            classes={{
+                                input: 'focus-visible_outline-none border-none w-full'
+                            }}
+                        />
+                        {searchText ? (
+                            <>
+                                {resetButtonElement}
+                            </>
+                        ) : (
+                            <Button
+                                className="focus-visible_outline-none"
+                                disabled={
+                                    isBackgroundLoading || isLoadingWithoutData
+                                }
+                                priority={'high'}
+                                type="submit"
+                                aria-label="submit"
+                            >
+                                {submitIcon}
+                            </Button>
+                        )}
+                    </Form>
+                    <span className={classes.pageInfo}>{pageInfoLabel}</span>
+                </div>
+                {pageContents}
+                {loadMoreButton}
+            </div>
+        </OrderHistoryContextProvider >
+    );
+};
+
+export default OrderHistoryPage;
+
+OrderHistoryPage.propTypes = {
+    classes: shape({
+        root: string,
+        heading: string,
+        emptyHistoryMessage: string,
+        orderHistoryTable: string,
+        search: string,
+        searchButton: string,
+        submitIcon: string,
+        loadMoreButton: string
+    })
+};

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

@@ -0,0 +1,70 @@
+.root {
+    composes: grid from global;
+    composes: gap-y-md from global;
+}
+
+.heading {
+    composes: font-bold from global;
+    composes: font-serif from global;
+    composes: justify-self-center from global;
+    composes: capitalize from global;
+}
+
+.emptyHistoryMessage {
+    composes: text-center from global;
+}
+
+.orderHistoryTable {
+    composes: grid from global;
+    composes: gap-y-xs from global;
+}
+
+.filterRow {
+    composes: flex from global;
+    composes: flex-col from global;
+    composes: gap-y-xs from global;
+    composes: items-start from global;
+    composes: justify-between from global;
+
+    composes: lg_flex-row from global;
+    composes: lg_gap-y-0 from global;
+    composes: lg_items-center from global;
+}
+
+.pageInfo {
+    composes: text-sm from global;
+}
+
+.search {
+    /* composes: gap-2xs from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: justify-self-center from global;
+    composes: w-full from global;
+
+    composes: lg_gap-xs from global;
+    composes: lg_justify-self-left from global;
+    composes: lg_w-[22rem] from global; */
+    composes: flex from global;
+    composes: gap-x-1 from global;
+    width: calc(100% - 120px);
+    max-width: 450px;
+}
+
+.searchButton {
+    composes: root_highPriority from '@magento/venia-ui/lib/components/Button/button.module.css';
+
+    composes: h-[2rem] from global;
+    composes: min-w-[5rem] from global;
+    composes: w-[5rem] from global;
+}
+
+.submitIcon {
+    composes: text-white from global;
+}
+
+.loadMoreButton {
+    composes: root_lowPriority from '@magento/venia-ui/lib/components/Button/button.module.css';
+
+    composes: justify-self-center from global;
+}

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

@@ -0,0 +1,70 @@
+import React, { useMemo } from 'react';
+import { useIntl } from 'react-intl';
+import { shape, string } from 'prop-types';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './orderProgressBar.module.css';
+
+const TOTAL_STEPS = 4;
+
+const OrderProgressBar = props => {
+    const { status } = props;
+    const { formatMessage } = useIntl();
+    const statusStepMap = new Map([
+        [
+            formatMessage({
+                id: 'orderProgressBar.processingText',
+                defaultMessage: 'Processing'
+            }),
+            1
+        ],
+        [
+            formatMessage({
+                id: 'orderProgressBar.readyToShipText',
+                defaultMessage: 'Ready to ship'
+            }),
+            2
+        ],
+        [
+            formatMessage({
+                id: 'orderProgressBar.shippedText',
+                defaultMessage: 'Shipped'
+            }),
+            3
+        ],
+        [
+            formatMessage({
+                id: 'orderProgressBar.deliveredText',
+                defaultMessage: 'Delivered'
+            }),
+            4
+        ]
+    ]);
+    const currentStep = statusStepMap.get(status);
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const stepElements = useMemo(() => {
+        const elements = [];
+        for (let step = 1; step <= TOTAL_STEPS; step++) {
+            const stepClass =
+                step <= currentStep ? classes.step_completed : classes.step;
+            elements.push(<span key={step} className={stepClass} />);
+        }
+
+        return elements;
+    }, [classes, currentStep]);
+
+    return <div className={classes.root}>{stepElements}</div>;
+};
+
+export default OrderProgressBar;
+
+OrderProgressBar.propTypes = {
+    classes: shape({
+        root: string,
+        step: string,
+        step_completed: string
+    }),
+    status: string.isRequired
+};

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

@@ -0,0 +1,14 @@
+.root {
+    composes: gap-x-1 from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    grid-auto-rows: 6px;
+}
+
+.step {
+    composes: bg-gray-300 from global;
+}
+
+.step_completed {
+    composes: bg-brand-dark from global;
+}