@riosst100/pwa-marketplace 2.0.9 → 2.1.0

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

@@ -0,0 +1,332 @@
+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';
+import { Link } from 'react-router-dom';
+
+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}
+                >
+                    <span className="text-[13px] font-medium text-blue-700 underline">
+                        <FormattedMessage
+                            id={'orderRow.ViewTransactionDetail'}
+                            defaultMessage={'View Transaction Detail'}
+                        />
+                    </span>
+                </button> */}
+                <Link to="/order-history/view/123213">
+                    <span className="text-[13px] font-medium text-blue-700 underline">
+                        <FormattedMessage
+                            id={'orderRow.ViewTransactionDetail'}
+                            defaultMessage={'View Transaction Detail'}
+                        />
+                    </span>
+                </Link>
+            </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

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

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

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

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

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

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