@riosst100/pwa-marketplace 3.2.4 → 3.2.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@riosst100/pwa-marketplace",
   "author": "riosst100@gmail.com",
-  "version": "3.2.4",
+  "version": "3.2.6",
   "main": "src/index.js",
   "pwa-studio": {
     "targets": {

package/src/components/AgeVerification/ageVerificationModal.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
 import modalClasses from '@riosst100/pwa-marketplace/src/components/AgeVerification/ageVerificationModal.module.css';
-import { AgeVerificationModalShimmer } from '@riosst100/pwa-marketplace/src/components/SellerCoupon';
+// import { AgeVerificationModalShimmer } from '@riosst100/pwa-marketplace/src/components/SellerCoupon';
 
 // Reuse day diff logic
 const dayDiff = (toDate) => {
@@ -92,7 +92,7 @@ const AgeVerificationModal = ({
                     <button type="button" className={modalClasses.closeBtn} onClick={handleClose} aria-label="Close coupon modal">×</button>
                 </div>
                 <div className={modalClasses.body}>
-                    {couponLoading && <AgeVerificationModalShimmer />}
+                    {/* {couponLoading && <AgeVerificationModalShimmer />} */}
                     {!couponLoading && couponError && <p className={modalClasses.metaText}>Failed to load coupons.</p>}
                     {!couponLoading && !couponError && !items.length && <p className={modalClasses.metaText}>No coupons available.</p>}
                     {!couponLoading && !couponError && items.length > 0 && (

package/src/components/AgeVerification/index.js

@@ -1,2 +1,2 @@
 export { default } from './ageVerificationModal';
-export { default as AgeVerificationModalShimmer } from './ageVerificationModal.shimmer';
+// export { default as AgeVerificationModalShimmer } from './ageVerificationModal.shimmer';

package/src/components/BecomeSeller/becomeSeller.js

@@ -25,6 +25,9 @@ import Postcode from '@magento/venia-ui/lib/components/Postcode';
 import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
 import { Link } from 'react-router-dom';
 import cn from 'classnames';
+import { BrowserPersistence } from '@magento/peregrine/lib/util';
+
+const storage = new BrowserPersistence();
 
 const BecomeSeller = props => {
     const talonProps = useBecomeSeller({
@@ -47,6 +50,9 @@ const BecomeSeller = props => {
     const { formatMessage } = useIntl();
     const classes = useStyle(defaultClasses, props.classes);
 
+    const websiteCountry = storage.getItem('website_code') && storage.getItem('website_code') != "base" ? '/' + storage.getItem('website_code') : '';
+    const sellerDashboardUrl = process.env.MAGENTO_BACKEND_URL ? process.env.MAGENTO_BACKEND_URL + websiteCountry : '';
+
     const submitButton = (
         <Button
             className={cn(classes.submitButton, 'w-full')}
@@ -89,12 +95,12 @@ const BecomeSeller = props => {
             onSubmit={handleSubmit}
             onChange={handleChange}
         >
-            <h2 data-cy="BecomeSeller-title" className="capitalize text-lg font-medium mb-[70px]">
+            {/* <h2 data-cy="BecomeSeller-title" className="capitalize text-lg font-medium mb-[70px]">
                 <FormattedMessage
                     id={'becomeSeller.becomeSellerText'}
                     defaultMessage={'Register as Seller'}
                 />
-            </h2>
+            </h2> */}
             <FormError errors={Array.from(errors.values())} />
             <h3 className='text-[16px] leading-5 font-medium text-left mb-[30px]'>
                 <FormattedMessage
@@ -416,22 +422,19 @@ const BecomeSeller = props => {
                 {submitButton}
             </div>
             <div className='block'>
-                <span className='text-xs font-normal'>
+                <span className='text-sm font-normal'>
                     <FormattedMessage
                         id={'createAccount.alreadyHaveAccount'}
-                        defaultMessage={"Already have an account ?"}
+                        defaultMessage={"Already have an seller account?"}
                     />
                 </span>
                 {' '}
-                <Link
-                    to={'/sign-in'}
-                    className='text-xs font-normal text-blue-700 underline'
-                >
+                <a href={sellerDashboardUrl + "/lofmarketplace/seller/login"} className='text-sm font-normal text-blue-700 underline'>
                     <FormattedMessage
                         id={'createAccount.SignInAsSeller'}
-                        defaultMessage={"Sign in as seller now "}
+                        defaultMessage={"Sign In to Seller Dashboard"}
                     />
-                </Link>
+                </a>
             </div>
         </Form>
     ) : '';

package/src/components/BecomeSellerPage/becomeSellerPage.js

@@ -7,7 +7,7 @@ import { useStyle } from '@magento/venia-ui/lib/classify';
 import BecomeSeller from '@riosst100/pwa-marketplace/src/components/BecomeSeller';
 import { StoreTitle } from '@magento/venia-ui/lib/components/Head';
 import defaultClasses from './becomeSellerPage.module.css';
-
+import cn from 'classnames';
 
 const BecomeSellerPage = props => {
     const classes = useStyle(defaultClasses, props.classes);
@@ -17,15 +17,34 @@ const BecomeSellerPage = props => {
     const { isSeller } = becomeSellerProps
 
     return !isSeller ? (
-        <div className={classes.root}>
-            <StoreTitle>
-                {formatMessage({
-                    id: 'becomeSellerPage.title',
-                    defaultMessage: 'Become a Seller'
-                })}
-            </StoreTitle>
-            <div className="lg_border-2 lg_border-solid lg_border-subtle lg_pb-md lg_rounded-md !border !border-gray-100 !rounded-lg">
-                <BecomeSeller {...becomeSellerProps} />
+        <div className={classes.rootContainer}>
+            <div className={cn(classes.leftContent, '!py-[60px]')}>
+                <StoreTitle>
+                    {formatMessage({
+                        id: 'signInPage.title',
+                        defaultMessage: 'Sign In'
+                    })}
+                </StoreTitle>
+                <div className={cn(classes.leftContentContainer, '')}>
+                    <div class="auth-left">
+                        <img src="https://img.freepik.com/premium-vector/verified-seller-illustration-concept-white-background_701961-240.jpg" width="100%" />
+                        <p style={{
+                            "fontSize": "20px",
+                            "fontWeight": 500
+                        }}>Create a seller account and start selling your collectibles today.</p>
+                    </div>
+                </div>
+            </div>
+            <div className={classes.root}>
+                <StoreTitle>
+                    {formatMessage({
+                        id: 'becomeSellerPage.title',
+                        defaultMessage: 'Become a Seller'
+                    })}
+                </StoreTitle>
+                <div className="lg_border-2 lg_border-solid lg_border-subtle lg_rounded-md !border !border-gray-100 !rounded-lg">
+                    <BecomeSeller {...becomeSellerProps} />
+                </div>
             </div>
         </div>
     ) : ''

package/src/components/BecomeSellerPage/becomeSellerPage.module.css

@@ -1,4 +1,15 @@
 .root {
+    composes: gap-y-md from global;
+    composes: grid from global;
+    /* composes: justify-center from global; */
+    composes: px-0 from global;
+    composes: py-md from global;
+    composes: text-center from global;
+    grid-template-columns: minmax(auto, 80%);
+    justify-content: right;
+}
+
+.leftContent {
     composes: gap-y-md from global;
     composes: grid from global;
     composes: justify-center from global;
@@ -10,4 +21,14 @@
 
 .header {
     composes: font-serif from global;
+}
+
+.leftContentContainer {
+    text-align: left;
+}
+
+.rootContainer {
+    justify-content: space-around;
+    display: flex;
+    align-items: normal;
 }

package/src/components/RFQ/index.js

@@ -4,13 +4,14 @@ import { useIntl } from 'react-intl';
 import ModalRFQ from './modalRfq';
 import cn from 'classnames';
 
-const RFQ = ({ disabled, classes: customClasses = {} }) => {
+const RFQ = ({ productId, disabled, classes: customClasses = {} }) => {
+
   const [open, setOpen] = useState(false);
   const { formatMessage } = useIntl();
 
   return (
     <>
-      <ModalRFQ open={open} setOpen={setOpen} />
+      <ModalRFQ open={open} setOpen={setOpen} productId={productId} />
 
       <Button
         data-cy="ProductFullDetail-RFQ"

package/src/components/RFQ/modalRfq.js

@@ -1,4 +1,4 @@
-import React, { useState, useC } from 'react';
+import React, { useCallback, useState } 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';
@@ -13,35 +13,108 @@ import { useIntl } from 'react-intl';
 import { useDropzone } from "react-dropzone";
 import { DocumentUpload } from 'iconsax-react';
 import cn from 'classnames';
+import { useToasts } from '@magento/peregrine/lib/Toasts/useToasts';
+import { useRFQ } from '@riosst100/pwa-marketplace/src/talons/RFQ/useRFQ';
 
 import "react-datepicker/dist/react-datepicker.css";
 
 const RFQModalForm = (props) => {
 
-    const { open = false, setOpen = () => { } } = props;
+    const { productId, open = false, setOpen = () => { } } = props;
+
     const { formatMessage } = useIntl();
+    const [, { addToast }] = useToasts();
+    const { handleCreateQuickRfq, createState } = useRFQ();
 
     const [startDate, setStartDate] = useState(new Date());
 
-    // Upload FIle
+    // Upload File with remove capability
+    const [uploadedFiles, setUploadedFiles] = useState([]);
+    const onDrop = useCallback((accepted) => {
+        setUploadedFiles(prev => [...prev, ...accepted]);
+    }, []);
+
     const {
-        acceptedFiles,
         getRootProps,
         getInputProps,
         isDragActive
-    } = useDropzone();
+    } = useDropzone({ onDrop });
 
-    const files = acceptedFiles.map((file) => (
-        <div key={file.path} className='block font-medium mb-1'>
-            {file.path} - {Math.round(file.size / 1000)} kB
+    const handleRemoveFile = useCallback((index) => {
+        setUploadedFiles(prev => prev.filter((_, i) => i !== index));
+    }, []);
+
+    const files = uploadedFiles.map((file, idx) => (
+        <div key={(file.path || file.name) + idx} className='flex items-center justify-between gap-2 mb-1'>
+            <span className='block font-medium'>
+                {(file.path || file.name)} - {Math.round(file.size / 1000)} kB
+            </span>
+            <button
+                type='button'
+                className='text-red-600 text-sm underline'
+                onClick={() => handleRemoveFile(idx)}
+            >
+                Remove
+            </button>
         </div>
     ));
 
+    const handleSubmit = useCallback(async values => {
+        console.log('[RFQ] submit values', values);
+        const input = {
+            product_id: productId,
+            quantity: values.quote_qty ? Number(values.quote_qty) : undefined,
+            comment: values.quote_comment,
+            customer_phone: values.phone_number,
+            price_per_product: values.quote_price_per_unit
+                ? Number(values.quote_price_per_unit)
+                : undefined,
+            date_need_quote: startDate ? startDate.toISOString() : undefined,
+            files: uploadedFiles.length
+                ? uploadedFiles.map(file => ({
+                    file_name: (file && (file.name || file.path)) || '',
+                    // Browsers do not expose real file system paths; use name as a stable placeholder
+                    file_path: (file && (file.path || file.name)) || '',
+                    // Ensure a valid MIME string; default if missing
+                    file_type: (file && file.type) ? file.type : 'application/octet-stream'
+                }))
+                : undefined
+        };
+
+            console.log('[RFQ] input payload', input);
+
+        Object.keys(input).forEach(key => input[key] === undefined && delete input[key]);
+
+        try {
+            const result = await handleCreateQuickRfq(input);
+            console.log('[RFQ] mutation result', result);
+            addToast({
+                type: 'success',
+                message: formatMessage({
+                    id: 'productFullDetail.rfqSuccess',
+                    defaultMessage: 'Quote request sent successfully.'
+                }),
+                timeout: 3000
+            });
+            setOpen(false);
+        } catch (error) {
+            console.error('[RFQ] createQuickRfq failed', error);
+            addToast({
+                type: 'error',
+                message: formatMessage({
+                    id: 'productFullDetail.rfqFailed',
+                    defaultMessage: 'Unable to send quote request. Please try again.'
+                }),
+                timeout: 4000
+            });
+        }
+    }, [uploadedFiles, addToast, formatMessage, handleCreateQuickRfq, setOpen, startDate]);
+
     return (
         <>
             <Modal
                 open={open}
-                className='!p-[30px] md_min-w-[550px] modal_bid'
+                className='!p-[20px] md_min-w-[550px] modal_bid'
             >
                 <div className='modal_bid-content'>
                     <div className='header_title-modal flex justify-between mb-4'>
@@ -59,59 +132,71 @@ const RFQModalForm = (props) => {
                         </button>
                     </div>
 
-                    <div className='flex flex-col gap-y-[16px]'>
+                    <div className='flex flex-col gap-y-[8px]'>
                         <Form
                             data-cy="form_bid"
-                            className="flex flex-col gap-y-4"
+                            className="flex flex-col gap-y-2"
                             initialValues={{}}
-                            onSubmit={() => { }}
-                            onChange={() => { }}
+                            onSubmit={handleSubmit}
+                            onChange={values => {
+                                console.log('[RFQ] form change', values);
+                            }}
+                            onSubmitFailure={(errors, values) => {
+                                console.warn('[RFQ] form submit failed', { errors, values });
+                            }}
                         >
-                            <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>
+                        {({ formApi }) => (
+                            <>
+                            <div className="flex flex-col md_flex-row gap-2">
+                                <div className="md_flex-1">
+                                    <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>
+                                </div>
+                                <div className="md_flex-1">
+                                    <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>
+                                </div>
+                            </div>
 
                             <Field
                                 id="date_need_quote_field"
@@ -149,7 +234,7 @@ const RFQModalForm = (props) => {
                                     maskOnBlur={true}
                                     data-cy="phone_number"
                                     aria-label={'phone_number'}
-                                    placeholder={'10'}
+                                    placeholder={'(123) 456-7890'}
                                 />
                             </Field>
 
@@ -178,7 +263,7 @@ const RFQModalForm = (props) => {
                             <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'
+                                    className='border border-blue-600 rounded-md border-dashed flex flex-col justify-center items-center py-3'
                                 >
                                     <input {...getInputProps()} />
                                     <DocumentUpload
@@ -187,7 +272,7 @@ const RFQModalForm = (props) => {
                                     />
                                     <div className='mt-2 text-blue-600'>Drop files or click here to upload</div>
                                 </div>
-                                {files && (
+                                {files && files.length > 0 && (
                                     <div className="wfp--dropzone__file-list mt-4">
                                         <ul>{files}</ul>
                                     </div>
@@ -201,7 +286,11 @@ const RFQModalForm = (props) => {
                                     classes={{
                                         content: 'capitalize text-[16px] font-medium'
                                     }}
-                                    onClick={() => setOpen(false)}
+                                    type="button"
+                                    onClick={() => {
+                                        console.log('[RFQ] Cancel clicked, closing modal');
+                                        setOpen(false);
+                                    }}
                                 >
                                     {
                                         formatMessage({
@@ -216,22 +305,47 @@ const RFQModalForm = (props) => {
                                     classes={{
                                         content: 'capitalize text-[16px] font-medium'
                                     }}
+                                    type="button"
+                                    onPress={() => {
+                                        console.log('[RFQ] Submit pressed, calling formApi.submitForm()');
+                                        formApi.submitForm();
+                                    }}
+                                    disabled={createState?.loading}
+                                    data-cy="rfq-submit"
                                 >
-                                    {
-                                        formatMessage({
-                                            id: 'productFullDetail.SendRequest',
-                                            defaultMessage:
-                                                'Send Request'
+                                    {createState?.loading
+                                        ? formatMessage({
+                                            id: 'productFullDetail.SendingRequest',
+                                            defaultMessage: 'Sending...'
                                         })
-                                    }
+                                        : formatMessage({
+                                            id: 'productFullDetail.SendRequest',
+                                            defaultMessage: 'Send Request'
+                                        })}
                                 </Button>
                             </div>
+                            </>
+                        )}
                         </Form>
                     </div>
                 </div>
             </Modal>
             <style jsx="true">
                 {`
+                    /* Modal container adjustments to prevent clipping */
+                    .modal_bid-content {
+                        max-height: 90vh;
+                        overflow-y: auto;
+                    }
+                    @media (min-width: 768px) {
+                        .md_min-w-[550px] {
+                            min-width: 550px;
+                        }
+                    }
+                    /* Ensure inner form sections don't overflow */
+                    .wfp--dropzone {
+                        max-width: 100%;
+                    }
                     .react-datepicker__input-container>input:focus-visible,
                     .react-datepicker__input-container>input:focus, 
                     .react-datepicker__input-container>input:active {
@@ -240,6 +354,10 @@ const RFQModalForm = (props) => {
                     .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
                         left: 25px;
                     }
+                    /* Keep datepicker within viewport */
+                    .react-datepicker-popper {
+                        z-index: 1000;
+                    }
                 `}
             </style>
         </>