@riosst100/pwa-marketplace 2.0.9 → 2.1.0

package/src/components/RFQ/modalRfq.js

@@ -0,0 +1,249 @@
+import React, { useState, useC } from 'react';
+import Button from '@magento/venia-ui/lib/components/Button';
+import Modal from '@riosst100/pwa-marketplace/src/components/Modal';
+import { X } from 'react-feather';
+import { primary900 } from '@riosst100/pwa-marketplace/src/theme/vars';
+import Field from '@magento/venia-ui/lib/components/Field';
+import TextInput from '@magento/venia-ui/lib/components/TextInput';
+import TextArea from '@magento/venia-ui/lib/components/TextArea';
+import { isRequired } from '@magento/venia-ui/lib/util/formValidators';
+import DatePicker from "react-datepicker";
+import { Form } from 'informed';
+import { useIntl } from 'react-intl';
+import { useDropzone } from "react-dropzone";
+import { DocumentUpload } from 'iconsax-react';
+import cn from 'classnames';
+
+import "react-datepicker/dist/react-datepicker.css";
+
+const RFQModalForm = (props) => {
+
+    const { open = false, setOpen = () => { } } = props;
+    const { formatMessage } = useIntl();
+
+    const [startDate, setStartDate] = useState(new Date());
+
+    // Upload FIle
+    const {
+        acceptedFiles,
+        getRootProps,
+        getInputProps,
+        isDragActive
+    } = useDropzone();
+
+    const files = acceptedFiles.map((file) => (
+        <div key={file.path} className='block font-medium mb-1'>
+            {file.path} - {Math.round(file.size / 1000)} kB
+        </div>
+    ));
+
+    return (
+        <>
+            <Modal
+                open={open}
+                className='!p-[30px] md_min-w-[550px] modal_bid'
+            >
+                <div className='modal_bid-content'>
+                    <div className='header_title-modal flex justify-between mb-4'>
+                        <div className='text-lg text-black font-medium'>
+                            {
+                                formatMessage({
+                                    id: 'productFullDetail.RequestQuote',
+                                    defaultMessage:
+                                        'Request a Quote'
+                                })
+                            }
+                        </div>
+                        <button onClick={() => { setOpen(!open) }} >
+                            <X size={24} color={primary900} />
+                        </button>
+                    </div>
+
+                    <div className='flex flex-col gap-y-[16px]'>
+                        <Form
+                            data-cy="form_bid"
+                            className="flex flex-col gap-y-4"
+                            initialValues={{}}
+                            onSubmit={() => { }}
+                            onChange={() => { }}
+                        >
+                            <Field
+                                id="quote_price_per_unit_field"
+                                label={
+                                    formatMessage({
+                                        id: 'productFullDetail.QuotePricePerUnit',
+                                        defaultMessage:
+                                            'Quote Price Per Unit'
+                                    })
+                                }
+                            >
+                                <TextInput
+                                    id="quote_price_per_unit"
+                                    field="quote_price_per_unit"
+                                    validate={isRequired}
+                                    validateOnBlur
+                                    mask={value => value && value.trim()}
+                                    maskOnBlur={true}
+                                    data-cy="quote_price_per_unit"
+                                    aria-label={'quote_price_per_unit'}
+                                    placeholder={'10.00'}
+                                />
+                            </Field>
+
+                            <Field
+                                id="quote_qty_field"
+                                label={
+                                    formatMessage({
+                                        id: 'productFullDetail.QuoteQuantity',
+                                        defaultMessage:
+                                            'Quote Quantity'
+                                    })
+                                }
+                            >
+                                <TextInput
+                                    id="quote_qty"
+                                    field="quote_qty"
+                                    validate={isRequired}
+                                    validateOnBlur
+                                    mask={value => value && value.trim()}
+                                    maskOnBlur={true}
+                                    data-cy="quote_qty"
+                                    aria-label={'quote_qty'}
+                                    placeholder={'10'}
+                                />
+                            </Field>
+
+                            <Field
+                                id="date_need_quote_field"
+                                label={
+                                    formatMessage({
+                                        id: 'productFullDetail.dateNeedQuote',
+                                        defaultMessage:
+                                            'Date Need Quote'
+                                    })
+                                }
+                            >
+                                <DatePicker
+                                    className='w-full border border-gray-100 rounded-md px-[10px] py-[5px] min-h-[40px]'
+                                    selected={startDate}
+                                    onChange={(date) => setStartDate(date)}
+                                />
+                            </Field>
+
+                            <Field
+                                id="phone_number_field"
+                                label={
+                                    formatMessage({
+                                        id: 'productFullDetail.phoneNumber',
+                                        defaultMessage:
+                                            'Phone Number'
+                                    })
+                                }
+                            >
+                                <TextInput
+                                    id="phone_number"
+                                    field="phone_number"
+                                    validate={isRequired}
+                                    validateOnBlur
+                                    mask={value => value && value.trim()}
+                                    maskOnBlur={true}
+                                    data-cy="phone_number"
+                                    aria-label={'phone_number'}
+                                    placeholder={'10'}
+                                />
+                            </Field>
+
+                            <Field
+                                id="quote_comment_field"
+                                label={
+                                    formatMessage({
+                                        id: 'productFullDetail.addYourComment',
+                                        defaultMessage:
+                                            'Add Your Comment'
+                                    })
+                                }
+                            >
+                                <TextArea
+                                    id="quote_comment"
+                                    field="quote_comment"
+                                    validateOnBlur
+                                    mask={value => value && value.trim()}
+                                    maskOnBlur={true}
+                                    data-cy="quote_comment"
+                                    aria-label={'quote_comment'}
+                                    placeholder={'Your Comment'}
+                                />
+                            </Field>
+
+                            <section className="wfp--dropzone">
+                                <div
+                                    {...getRootProps({ isDragActive })}
+                                    className='border border-blue-600 rounded-md border-dashed flex flex-col justify-center items-center py-6'
+                                >
+                                    <input {...getInputProps()} />
+                                    <DocumentUpload
+                                        size="32"
+                                        color="#f76b1c"
+                                    />
+                                    <div className='mt-2 text-blue-600'>Drop files or click here to upload</div>
+                                </div>
+                                {files && (
+                                    <div className="wfp--dropzone__file-list mt-4">
+                                        <ul>{files}</ul>
+                                    </div>
+                                )}
+                            </section>
+
+
+                            <div className='actions flex justify-end gap-x-2.5 mt-4'>
+                                <Button
+                                    priority='low'
+                                    classes={{
+                                        content: 'capitalize text-[16px] font-medium'
+                                    }}
+                                    onClick={() => setOpen(false)}
+                                >
+                                    {
+                                        formatMessage({
+                                            id: 'productFullDetail.cancel',
+                                            defaultMessage:
+                                                'Cancel'
+                                        })
+                                    }
+                                </Button>
+                                <Button
+                                    priority='high'
+                                    classes={{
+                                        content: 'capitalize text-[16px] font-medium'
+                                    }}
+                                >
+                                    {
+                                        formatMessage({
+                                            id: 'productFullDetail.SendRequest',
+                                            defaultMessage:
+                                                'Send Request'
+                                        })
+                                    }
+                                </Button>
+                            </div>
+                        </Form>
+                    </div>
+                </div>
+            </Modal>
+            <style jsx>
+                {`
+                    .react-datepicker__input-container>input:focus-visible,
+                    .react-datepicker__input-container>input:focus, 
+                    .react-datepicker__input-container>input:active {
+                        outline: none;
+                    }
+                    .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
+                        left: 25px;
+                    }
+                `}
+            </style>
+        </>
+    )
+}
+
+export default RFQModalForm;

package/src/components/RFQPage/index.js

@@ -0,0 +1,14 @@
+import AccountLayout from '@riosst100/pwa-marketplace/src/components/AccountLayout';
+import QuoteList from '@riosst100/pwa-marketplace/src/components/RFQPage/quoteList';
+
+import React from 'react'
+
+const index = () => {
+    return (
+        <AccountLayout>
+            <QuoteList />
+        </AccountLayout>
+    )
+}
+
+export default index;

package/src/components/RFQPage/orderRow.js

@@ -0,0 +1,318 @@
+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 '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/OrderHistoryPage/collapsedImageGallery';
+import OrderDetails from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/OrderHistoryPage/OrderDetails';
+import defaultClasses from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/OrderHistoryPage/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: 'Quotes.deliveredText',
+            defaultMessage: 'Delivered'
+        });
+    } else if (hasShipment) {
+        derivedStatus = formatMessage({
+            id: 'Quotes.shippedText',
+            defaultMessage: 'Shipped'
+        });
+    } else if (hasInvoice) {
+        derivedStatus = formatMessage({
+            id: 'Quotes.readyToShipText',
+            defaultMessage: 'Ready to ship'
+        });
+    } else {
+        derivedStatus = formatMessage({
+            id: 'Quotes.new',
+            defaultMessage: 'New'
+        });
+    }
+
+    const talonProps = useOrderRow({ items });
+    const { loading, isOpen, 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]'>
+                <Link to="/quotes/DEV123123123">
+                    <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
+            })
+        })
+    })
+};