@riosst100/pwa-marketplace 2.0.7 → 2.0.9

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

@@ -1,324 +0,0 @@
-import React from 'react';
-import { arrayOf, number, shape, string } from 'prop-types';
-import { ChevronDown, ChevronUp } from 'react-feather';
-import { FormattedMessage, useIntl } from 'react-intl';
-import Price from '@magento/venia-ui/lib/components/Price';
-import { useOrderRow } from '@magento/peregrine/lib/talons/OrderHistoryPage/useOrderRow';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import Icon from '@magento/venia-ui/lib/components/Icon';
-import CollapsedImageGallery from './collapsedImageGallery';
-import OrderProgressBar from './orderProgressBar';
-import OrderDetails from './OrderDetails';
-import defaultClasses from './orderRow.module.css';
-import cn from 'classnames';
-import { Verify } from 'iconsax-react';
-import PlaceholderImage from '@magento/venia-ui/lib/components/Image/placeholderImage';
-
-const OrderRow = props => {
-    const { order } = props;
-    const { formatMessage } = useIntl();
-    const {
-        invoices,
-        items,
-        number: orderNumber,
-        order_date: orderDate,
-        shipments,
-        status,
-        total
-    } = order;
-    const { grand_total: grandTotal } = total;
-    const { currency, value: orderTotal } = grandTotal;
-
-    // Convert date to ISO-8601 format so Safari can also parse it
-    const isoFormattedDate = orderDate.replace(' ', 'T');
-    const formattedDate = new Date(isoFormattedDate).toLocaleDateString(
-        undefined,
-        {
-            year: 'numeric',
-            month: 'short',
-            day: 'numeric'
-        }
-    );
-
-    const hasInvoice = !!invoices.length;
-    const hasShipment = !!shipments.length;
-    let derivedStatus;
-    if (status === 'Complete') {
-        derivedStatus = formatMessage({
-            id: 'orderRow.deliveredText',
-            defaultMessage: 'Delivered'
-        });
-    } else if (hasShipment) {
-        derivedStatus = formatMessage({
-            id: 'orderRow.shippedText',
-            defaultMessage: 'Shipped'
-        });
-    } else if (hasInvoice) {
-        derivedStatus = formatMessage({
-            id: 'orderRow.readyToShipText',
-            defaultMessage: 'Ready to ship'
-        });
-    } else {
-        derivedStatus = formatMessage({
-            id: 'orderRow.processingText',
-            defaultMessage: 'Processing'
-        });
-    }
-
-    const talonProps = useOrderRow({ items });
-    const { loading, isOpen, handleContentToggle, imagesData } = talonProps;
-
-    const classes = useStyle(defaultClasses, props.classes);
-
-    const contentClass = isOpen ? classes.content : classes.content_collapsed;
-
-    const contentToggleIconSrc = isOpen ? ChevronUp : ChevronDown;
-
-    const contentToggleIcon = <Icon src={contentToggleIconSrc} size={24} />;
-
-    const collapsedImageGalleryElement = isOpen ? null : (
-        <CollapsedImageGallery items={imagesData} />
-    );
-
-    const orderDetails = loading ? null : (
-        <OrderDetails orderData={order} imagesData={imagesData} />
-    );
-
-    const orderTotalPrice =
-        currency && orderTotal !== null ? (
-            <Price currencyCode={currency} value={orderTotal} />
-        ) : (
-            '-'
-        );
-
-    const badgeStatusStyle = () => {
-        return 'bg-[#F1EFF6] text-blue-700 text-[14px] font-medium rounded-full px-[30px] py-[5px] border-none';
-    }
-
-    const thumbnailProps = {
-        alt: items[0].product_name,
-        classes: { root: classes.thumbnail },
-        width: 50
-    };
-
-    return (
-        <li className={classes.root}>
-            <div className='flex flex-col md_flex-row justify-between mb-2.5'>
-                <div className='flex flex-col'>
-                    <div className="flex gap-x-[15px] flex-row">
-                        <span className="text-[14px] text-colorDefault">{formattedDate}</span>
-                        <span className="text-gray-200 text-[14px]">{orderNumber}</span>
-                    </div>
-                </div>
-                <div className='flex flex-col'>
-                    <div className='flex w-full justify-start mt-2.5 md_mt-0 md_justify-end'>
-                        <span className={cn(classes.orderStatusBadge, badgeStatusStyle())}>
-                            {derivedStatus}
-                        </span>
-                    </div>
-                </div>
-            </div>
-            <div className='flex flex-col md_flex-row justify-between mb-2.5'>
-                <div className='flex flex-col'>
-                    <div className='flex gap-x-[5px] mb-2.5'>
-                        <Verify size={17} className='text-blue-700' variant="Bold" />
-                        <span className='text-xs font-medium text-[rgba(25, 34, 42, 0.7)]'>
-                            Gundam Info
-                        </span>
-                    </div>
-                    <div className='flex flex-row'>
-                        <div>
-                            <PlaceholderImage {...thumbnailProps} />
-                        </div>
-                        <div className='flex flex-col max-w-[260px] gap-2.5'>
-                            <div className={cn(classes.productName, 'text-[14] font-medium')}>
-                                <span>
-                                    {items[0]?.product_name}
-                                </span>
-                            </div>
-                            <div className="text-[14] text-gray-200">
-                                <span>
-                                    {`${items[0]?.quantity_ordered}X`}
-                                </span>
-                                {' '}
-                                <span>
-                                    <Price currencyCode={items[0]?.product_sale_price?.currency} value={items[0]?.product_sale_price?.value} />
-                                </span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div className='flex flex-col'>
-                    <div className="md_px-10 py-3 md_border-l border-gray-100">
-                        <span className="text-[14] text-gray-200 text-left md_text-center block mb-2">
-                            <FormattedMessage
-                                id={'orderRow.orderTotalText'}
-                                defaultMessage={'Order Total'}
-                            />
-                        </span>
-                        <div className="text-lg font-medium text-left md_text-center block">{orderTotalPrice}</div>
-                    </div>
-                </div>
-            </div>
-            <div className='flex flex-row justify-end py-[5px]'>
-                <button
-                    className={cn(classes.contentToggleContainer, '!p-0 !border-0')}
-                    onClick={handleContentToggle}
-                    type="button"
-                    aria-expanded={isOpen}
-                >
-                    {/* {contentToggleIcon} */}
-                    <span className="text-[13px] font-medium text-blue-700 underline">
-                        <FormattedMessage
-                            id={'orderRow.ViewTransactionDetail'}
-                            defaultMessage={'View Transaction Detail'}
-                        />
-                    </span>
-                </button>
-            </div>
-
-            {/* <div className={classes.orderDateContainer}>
-                <span className={classes.orderDateLabel}>
-                    <FormattedMessage
-                        id={'orderRow.orderDateText'}
-                        defaultMessage={'Order Date'}
-                    />
-                </span>
-                <span className={classes.orderDate}>{formattedDate}</span>
-            </div> */}
-            {/* <div className={classes.orderItemsContainer}>
-                {collapsedImageGalleryElement}
-            </div> */}
-            {/* <div className={classes.orderStatusContainer}>
-                <span className={classes.orderStatusBadge}>
-                    {derivedStatus}
-                </span>
-                <OrderProgressBar status={derivedStatus} />
-            </div> */}
-            <div className={cn(contentClass, '!py-4 mt-4')}>{orderDetails}</div>
-        </li>
-    );
-};
-
-export default OrderRow;
-
-OrderRow.propTypes = {
-    classes: shape({
-        root: string,
-        cell: string,
-        stackedCell: string,
-        label: string,
-        value: string,
-        orderNumberContainer: string,
-        orderDateContainer: string,
-        orderTotalContainer: string,
-        orderStatusContainer: string,
-        orderItemsContainer: string,
-        contentToggleContainer: string,
-        orderNumberLabel: string,
-        orderDateLabel: string,
-        orderTotalLabel: string,
-        orderNumber: string,
-        orderDate: string,
-        orderTotal: string,
-        orderStatusBadge: string,
-        content: string,
-        content_collapsed: string
-    }),
-    order: 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
-            })
-        ),
-        invoices: arrayOf(
-            shape({
-                id: string
-            })
-        ),
-        number: string,
-        order_date: string,
-        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({
-                        number: string
-                    })
-                )
-            })
-        ),
-        status: 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/orderRow.module.css

@@ -1,146 +0,0 @@
-.root {
-    composes: border from global;
-    composes: border-gray-100 from global;
-    /* composes: grid from global;
-    composes: grid-cols-2 from global; */
-    composes: rounded-md from global;
-    composes: p-[15px] from global;
-}
-
-@media (min-width: 960px) {
-    .root {
-        /* grid-template-columns:
-            minmax(9rem, 1fr) minmax(9rem, 1fr) minmax(9rem, 1fr) 16rem 2fr 3rem; */
-    }
-}
-
-.orderNumberContainer {}
-
-.orderDateContainer {
-    composes: gap-y-1 from global;
-    composes: grid from global;
-    composes: overflow-hidden from global;
-    composes: p-sm from global;
-}
-
-.orderTotalContainer {
-    composes: border-0 from global;
-    composes: border-b from global;
-    composes: border-l from global;
-    composes: border-solid from global;
-    composes: border-subtle from global;
-    composes: gap-y-1 from global;
-    composes: grid from global;
-    composes: overflow-hidden from global;
-    composes: p-sm from global;
-
-    composes: lg_border-b-0 from global;
-}
-
-.orderStatusContainer {
-    composes: border-0 from global;
-    composes: border-l-0 from global;
-    composes: border-solid from global;
-    composes: border-subtle from global;
-    composes: col-end-span2 from global;
-    composes: gap-y-1 from global;
-    composes: grid from global;
-    composes: overflow-hidden from global;
-    composes: p-sm from global;
-
-    composes: lg_border-b-0 from global;
-    composes: lg_border-l from global;
-    composes: lg_col-end-auto from global;
-    composes: lg_gap-y-3 from global;
-}
-
-.orderItemsContainer {
-    composes: border-0 from global;
-    composes: border-b from global;
-    composes: border-solid from global;
-    composes: border-subtle from global;
-    composes: col-end-span2 from global;
-    composes: overflow-hidden from global;
-    composes: p-0 from global;
-    composes: py-sm from global;
-
-    composes: lg_border-0 from global;
-    composes: lg_border-l from global;
-    composes: lg_col-end-auto from global;
-    composes: lg_p-0 from global;
-}
-
-.contentToggleContainer {
-    composes: border-0 from global;
-    composes: border-l from global;
-    composes: border-solid from global;
-    composes: border-subtle from global;
-    composes: col-start-2 from global;
-    composes: justify-self-end from global;
-    composes: overflow-hidden from global;
-    composes: px-xs from global;
-    composes: py-0 from global;
-    composes: row-start-1 from global;
-
-    composes: lg_border-l from global;
-    composes: lg_col-start-6 from global;
-    composes: lg_px-xs from global;
-    composes: lg_row-start-1 from global;
-}
-
-.orderNumberLabel,
-.orderDateLabel,
-.orderTotalLabel {
-    composes: text-2xs from global;
-}
-
-.orderNumber,
-.orderDate,
-.orderTotal {
-    composes: font-bold from global;
-}
-
-.orderStatusBadge {
-    composes: border from global;
-    composes: border-solid from global;
-    composes: border-subtle from global;
-    composes: font-bold from global;
-    composes: justify-self-start from global;
-    composes: px-xs from global;
-    composes: py-1 from global;
-    composes: rounded-md from global;
-    composes: text-2xs from global;
-}
-
-.content {
-    composes: border-t from global;
-    composes: border-solid from global;
-    composes: border-gray-100 from global;
-    /* composes: p-sm from global; */
-    grid-column: 1 / -1;
-}
-
-.content_collapsed {
-    composes: hidden from global;
-}
-
-@media (max-width: 959px) {
-
-    /* TODO @TW: cannot compose */
-    .orderItemsContainer:empty {
-        display: none;
-    }
-
-    .orderNumberContainer {
-        grid-column: 1 / span 2;
-        grid-row: 1;
-    }
-}
-
-.productName {
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    line-height: normal;
-}

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

@@ -1,41 +0,0 @@
-import React from 'react';
-import { useFormApi } from 'informed';
-import { useIntl } from 'react-intl';
-import { func } from 'prop-types';
-import { X as ClearIcon } from 'react-feather';
-
-import Icon from '@magento/venia-ui/lib/components/Icon';
-import Trigger from '@magento/venia-ui/lib/components/Trigger';
-
-const clearIcon = <Icon src={ClearIcon} size={24} />;
-
-const ResetButton = props => {
-    const { onReset } = props;
-    const formApi = useFormApi();
-
-    const handleReset = () => {
-        formApi.reset();
-
-        if (onReset) {
-            onReset();
-        }
-    };
-    const { formatMessage } = useIntl();
-    return (
-        <Trigger
-            action={handleReset}
-            addLabel={formatMessage({
-                id: 'global.clearText',
-                defaultMessage: 'Clear Text'
-            })}
-        >
-            {clearIcon}
-        </Trigger>
-    );
-};
-
-export default ResetButton;
-
-ResetButton.propTypes = {
-    onReset: func
-};

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

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

package/src/overwrites/venia-ui/lib/components/Pagination/navButton.js

@@ -1,65 +0,0 @@
-import React from 'react';
-import { shape, string } from 'prop-types';
-import {
-    ChevronLeft as ChevronLeftIcon,
-    ChevronRight as ChevronRightIcon,
-    FastForward as FastForwardIcon,
-    Rewind as RewindIcon
-} from 'react-feather';
-import cn from 'classnames';
-import { ArrowLeft2, ArrowRight2 } from 'iconsax-react';
-import { blue } from '@riosst100/pwa-marketplace/src/theme/vars';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import Icon from '@magento/venia-ui/lib/components/Icon';
-import defaultClasses from '@magento/venia-ui/lib/components/Pagination/navButton.module.css';
-
-const icons = new Map()
-    .set('ChevronLeft', ChevronLeftIcon)
-    .set('ChevronRight', ChevronRightIcon)
-    .set('FastForward', FastForwardIcon)
-    .set('Rewind', RewindIcon);
-
-const NavButton = props => {
-    const { active, buttonLabel, name, onClick } = props;
-    const iconSrc = icons.get(name);
-    const classes = useStyle(defaultClasses, props.classes);
-
-    const iconClass = active ? classes.icon : classes.icon_disabled;
-
-    return (
-        <button
-            aria-label={buttonLabel}
-            className={cn(
-                classes.root,
-                'border-[1px] border-gray-100 rounded-[5px] !min-h-auto h-fit min-w-[40px] px-[10px] py-[7px]'
-            )}
-            disabled={!active}
-            onClick={onClick}
-        >
-            {name === 'ChevronLeft' && (
-                <ArrowLeft2 size={14} color={blue} className={cn(`stroke-[${blue}]`)} variant="Outline" />
-            )}
-            {name === 'ChevronRight' && (
-                <ArrowRight2 size={14} color={blue} className={cn(`stroke-[${blue}]`)} variant="Outline" />
-            )}
-            {name !== 'ChevronRight' && name !== 'ChevronLeft' && (
-                <Icon className={iconClass} size={20} src={iconSrc} />
-            )}
-        </button>
-    );
-};
-
-export default NavButton;
-
-NavButton.propTypes = {
-    classes: shape({
-        icon: string,
-        icon_disabled: string,
-        root: string
-    })
-};
-
-NavButton.defaultProps = {
-    buttonLabel: 'move to another page'
-};

package/src/overwrites/venia-ui/lib/components/Pagination/pagination.js

@@ -1,107 +0,0 @@
-import React, { useMemo } from 'react';
-import { func, number, shape, string } from 'prop-types';
-import { useIntl } from 'react-intl';
-import { usePagination } from '@magento/peregrine/lib/talons/Pagination/usePagination';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import defaultClasses from '@magento/venia-ui/lib/components/Pagination/pagination.module.css';
-import Tile from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Pagination/tile';
-import NavButton from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Pagination/navButton';
-import { navButtons } from '@magento/venia-ui/lib/components/Pagination/constants';
-import cn from 'classnames';
-
-const Pagination = props => {
-    const { currentPage, setPage, totalPages } = props.pageControl;
-    const { formatMessage } = useIntl();
-    const classes = useStyle(defaultClasses, props.classes);
-
-    const talonProps = usePagination({
-        currentPage,
-        setPage,
-        totalPages
-    });
-
-    const {
-        handleLeftSkip,
-        handleRightSkip,
-        handleNavBack,
-        handleNavForward,
-        isActiveLeft,
-        isActiveRight,
-        tiles
-    } = talonProps;
-
-    const navigationTiles = useMemo(
-        () =>
-            tiles.map(tileNumber => {
-                return (
-                    <Tile
-                        isActive={tileNumber === currentPage}
-                        key={tileNumber}
-                        number={tileNumber}
-                        onClick={setPage}
-                    />
-                );
-            }),
-        [currentPage, tiles, setPage]
-    );
-
-    if (totalPages === 1) {
-        return null;
-    }
-
-    return (
-        <div className={cn(classes.root, 'gap-x-[10px] !border-0')} data-cy="Pagination-root">
-            {/* <NavButton
-                name={navButtons.firstPage.name}
-                active={isActiveLeft}
-                onClick={handleLeftSkip}
-                buttonLabel={formatMessage({
-                    id: 'pagination.firstPage',
-                    defaultMessage: navButtons.firstPage.buttonLabel
-                })}
-            /> */}
-            <NavButton
-                name={navButtons.prevPage.name}
-                active={isActiveLeft}
-                onClick={handleNavBack}
-                buttonLabel={formatMessage({
-                    id: 'pagination.prevPage',
-                    defaultMessage: navButtons.prevPage.buttonLabel
-                })}
-            />
-            {navigationTiles}
-            <NavButton
-                name={navButtons.nextPage.name}
-                active={isActiveRight}
-                onClick={handleNavForward}
-                buttonLabel={formatMessage({
-                    id: 'pagination.nextPage',
-                    defaultMessage: navButtons.nextPage.buttonLabel
-                })}
-            />
-            {/* <NavButton
-                name={navButtons.lastPage.name}
-                active={isActiveRight}
-                onClick={handleRightSkip}
-                buttonLabel={formatMessage({
-                    id: 'pagination.lastPage',
-                    defaultMessage: navButtons.lastPage.buttonLabel
-                })}
-            /> */}
-        </div>
-    );
-};
-
-Pagination.propTypes = {
-    classes: shape({
-        root: string
-    }),
-    pageControl: shape({
-        currentPage: number,
-        setPage: func,
-        totalPages: number
-    }).isRequired
-};
-
-export default Pagination;