@riosst100/pwa-marketplace 2.0.7 → 2.0.9

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

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

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

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

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