@riosst100/pwa-marketplace 3.0.6 → 3.0.8

package/package.json

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

package/src/componentOverrideMapping.js

@@ -1,4 +1,5 @@
 module.exports = componentOverrideMapping = {
+    ['@magento/peregrine/lib/talons/CreateAccount/useCreateAccount.js']: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/CreateAccount/useCreateAccount.js',
     ['@magento/peregrine/lib/talons/CheckoutPage/PaymentInformation/usePaymentMethods.js']: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/CheckoutPage/PaymentInformation/usePaymentMethods.js',
     ['@magento/venia-ui/lib/components/CartPage/PriceAdjustments/CouponCode/couponCode.js']: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/CartPage/PriceAdjustments/CouponCode/couponCode.js',
     ['@magento/peregrine/lib/talons/Header/useCartTrigger.js']: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/Header/useCartTrigger.js',

package/src/components/CrossSeller/crossSeller.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import Item from './item';
+
+export const listings = [
+    { id: 1, sellerName: 'SuperGamesInc', sales: 3329, condition: 'Near Mint 1st Edition', price: 34.19 },
+    { id: 2, sellerName: 'GameWorld', sales: 1520, condition: 'Near Mint 1st Edition', price: 28.49 },
+    { id: 3, sellerName: 'MegaPlay', sales: 980, condition: 'Near Mint 1st Edition', price: 31.00 }
+];
+
+export const totalListings = listings.length;
+export const lowestPrice = Math.min(...listings.map(item => item.price));
+
+const CrossSeller = () => {
+    return (
+        <>
+            <h3 className="font-semibold text-sm sm_text-base md_text-lg lg_text-xl xl_text-2xl mb-1">{totalListings} Listings</h3>
+            <p className="text-[16px] mb-6">As low as ${lowestPrice.toFixed(2)}</p>
+
+            <div className="flex flex-col gap-y-4">
+                {listings.map(item => (
+                    <Item key={item.id} {...item} />
+                ))}
+            </div>
+        </>
+    );
+};
+
+export default CrossSeller;

package/src/components/CrossSeller/index.js

@@ -1,15 +1 @@
-import React from 'react';
-import Content from './crossSellerBuy';
-
-const index = () => {
-
-    const contentProps = {
-
-    }
-
-    return (
-        <Content {...contentProps} />
-    )
-}
-
-export default index
+export { default } from './crossSeller';

package/src/components/FilterTop/filterTop.js

@@ -95,13 +95,6 @@ const FilterTop = props => {
         [handleApply, filterRef]
     );
 
-    // const allowedFiltersArr = [];
-
-    // allowedFilters.length && allowedFilters.map((val, index) => {
-    //     allowedFiltersArr.push(val.code);
-    // });
-    // const allowedFiltersArr = ['card_rarity','card_print_version','card_set', 'card_product_type'];
-
     const filtersList = useMemo(
         () =>
             Array.from(filterItems, ([group, items], iteration) => {

package/src/components/ShowMore/showMore.js

@@ -339,7 +339,6 @@ const ShowMore = props => {
             <StoreTitle>{title}</StoreTitle>
             <Breadcrumbs categoryId={categoryId} customPage={title} currentFilter={activeFilters} />
             {category?.url_path.includes('model-railway') && <FilterTop shopby={shopby} filters={[]} category={category} children={[]} allowedFilters={category ? category.allowed_filters : []} />}
-            {/* <ShopByFilters handleActiveFilter={handleActiveFilter} activeFilter={activeFilter} category={category} /> */}
             {availableFilterOption.length ? 
                 <ul className={classes.nav}>
                     {availableFilterOption.map((filter, index) => (

package/src/overwrites/peregrine/lib/talons/CreateAccount/useCreateAccount.js

@@ -0,0 +1,303 @@
+import { useCallback, useMemo, useState } from 'react';
+import { useApolloClient, useMutation } from '@apollo/client';
+
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import { useUserContext } from '@magento/peregrine/lib/context/user';
+import { useCartContext } from '@magento/peregrine/lib/context/cart';
+import { useAwaitQuery } from '@magento/peregrine/lib/hooks/useAwaitQuery';
+import { retrieveCartId } from '@magento/peregrine/lib/store/actions/cart';
+import { useGoogleReCaptcha } from '@magento/peregrine/lib/hooks/useGoogleReCaptcha';
+
+import DEFAULT_OPERATIONS from '@magento/peregrine/lib/talons/CreateAccount/createAccount.gql';
+import { useEventingContext } from '@magento/peregrine/lib/context/eventing';
+
+import { useHistory } from 'react-router-dom';
+import { BrowserPersistence } from '@magento/peregrine/lib/util';
+
+const storage = new BrowserPersistence();
+
+/**
+ * Returns props necessary to render CreateAccount component. In particular this
+ * talon handles the submission flow by first doing a pre-submisson validation
+ * and then, on success, invokes the `onSubmit` prop, which is usually the action.
+ *
+ * @param {CreateAccountQueries} props.queries queries used by the talon
+ * @param {CreateAccountMutations} props.mutations mutations used by the talon
+ * @param {InitialValues} props.initialValues initial values to sanitize and seed the form
+ * @param {Function} props.onSubmit the post submit callback
+ * @param {Function} props.onCancel the cancel callback
+ *
+ * @returns {CreateAccountProps}
+ *
+ * @example <caption>Importing into your project</caption>
+ * import { useForgotPassword } from '@magento/peregrine/lib/talons/CreateAccount/useCreateAccount.js';
+ */
+export const useCreateAccount = props => {
+    const { initialValues = {}, onSubmit, onCancel } = props;
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+    const {
+        createAccountMutation,
+        createCartMutation,
+        getCartDetailsQuery,
+        getCustomerQuery,
+        mergeCartsMutation,
+        signInMutation
+    } = operations;
+    const apolloClient = useApolloClient();
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [
+        { cartId },
+        { createCart, removeCart, getCartDetails }
+    ] = useCartContext();
+    const [
+        { isGettingDetails },
+        { getUserDetails, setToken }
+    ] = useUserContext();
+
+    const [, { dispatch }] = useEventingContext();
+
+    const history = useHistory();
+
+    const [fetchCartId] = useMutation(createCartMutation);
+
+    const [mergeCarts] = useMutation(mergeCartsMutation);
+
+    // For create account and sign in mutations, we don't want to cache any
+    // personally identifiable information (PII). So we set fetchPolicy to 'no-cache'.
+    const [createAccount, { error: createAccountError }] = useMutation(
+        createAccountMutation,
+        {
+            fetchPolicy: 'no-cache'
+        }
+    );
+
+    const [signIn, { error: signInError }] = useMutation(signInMutation, {
+        fetchPolicy: 'no-cache'
+    });
+
+    const fetchUserDetails = useAwaitQuery(getCustomerQuery);
+    const fetchCartDetails = useAwaitQuery(getCartDetailsQuery);
+
+    const {
+        generateReCaptchaData,
+        recaptchaLoading,
+        recaptchaWidgetProps
+    } = useGoogleReCaptcha({
+        currentForm: 'CUSTOMER_CREATE',
+        formAction: 'createAccount'
+    });
+
+    const handleCancel = useCallback(() => {
+        onCancel();
+    }, [onCancel]);
+
+    const handleCancelKeyPress = useCallback(() => {
+        event => {
+            if (event.key === 'Enter') {
+                handleCancel();
+            }
+        };
+    }, [handleCancel]);
+
+    const handleSubmit = useCallback(
+        async formValues => {
+            setIsSubmitting(true);
+            try {
+                // Get source cart id (guest cart id).
+                const sourceCartId = cartId;
+
+                // Get reCaptchaV3 Data for createAccount mutation
+                const recaptchaDataForCreateAccount = await generateReCaptchaData();
+
+                // Create the account and then sign in.
+                await createAccount({
+                    variables: {
+                        email: formValues.customer.email,
+                        firstname: formValues.customer.firstname,
+                        lastname: formValues.customer.lastname,
+                        password: formValues.password,
+                        is_subscribed: !!formValues.subscribe
+                    },
+                    ...recaptchaDataForCreateAccount
+                });
+
+                dispatch({
+                    type: 'USER_CREATE_ACCOUNT',
+                    payload: {
+                        email: formValues.customer.email,
+                        firstName: formValues.customer.firstname,
+                        lastName: formValues.customer.lastname,
+                        isSubscribed: !!formValues.subscribe
+                    }
+                });
+
+                storage.setItem('confirm_email', formValues.customer.email);
+
+                console.log(formValues.customer.email)
+
+                history.push('/verify-email');
+
+                // Get reCaptchaV3 Data for signIn mutation
+                // const recaptchaDataForSignIn = await generateReCaptchaData();
+
+                // const signInResponse = await signIn({
+                //     variables: {
+                //         email: formValues.customer.email,
+                //         password: formValues.password
+                //     },
+                //     ...recaptchaDataForSignIn
+                // });
+                // const token = signInResponse.data.generateCustomerToken.token;
+                // await setToken(token);
+
+                // // Clear all cart/customer data from cache and redux.
+                // await apolloClient.clearCacheData(apolloClient, 'cart');
+                // await apolloClient.clearCacheData(apolloClient, 'customer');
+                // await removeCart();
+
+                // // Create and get the customer's cart id.
+                // await createCart({
+                //     fetchCartId
+                // });
+                // const destinationCartId = await retrieveCartId();
+
+                // // Merge the guest cart into the customer cart.
+                // await mergeCarts({
+                //     variables: {
+                //         destinationCartId,
+                //         sourceCartId
+                //     }
+                // });
+
+                // // Ensure old stores are updated with any new data.
+                // await getUserDetails({ fetchUserDetails });
+                // await getCartDetails({
+                //     fetchCartId,
+                //     fetchCartDetails
+                // });
+
+                // Finally, invoke the post-submission callback.
+                if (onSubmit) {
+                    onSubmit();
+                }
+            } catch (error) {
+                if (process.env.NODE_ENV !== 'production') {
+                    console.error(error);
+                }
+                setIsSubmitting(false);
+            }
+        },
+
+        [
+            cartId,
+            generateReCaptchaData,
+            createAccount,
+            signIn,
+            setToken,
+            apolloClient,
+            removeCart,
+            createCart,
+            fetchCartId,
+            mergeCarts,
+            getUserDetails,
+            fetchUserDetails,
+            getCartDetails,
+            fetchCartDetails,
+            onSubmit,
+            dispatch,
+            history,
+            storage
+        ]
+    );
+
+    const sanitizedInitialValues = useMemo(() => {
+        const { email, firstName, lastName, ...rest } = initialValues;
+
+        return {
+            customer: { email, firstname: firstName, lastname: lastName },
+            ...rest
+        };
+    }, [initialValues]);
+
+    const errors = useMemo(
+        () =>
+            new Map([
+                ['createAccountQuery', createAccountError],
+                ['signInMutation', signInError]
+            ]),
+        [createAccountError, signInError]
+    );
+
+    return {
+        errors,
+        handleCancel,
+        handleSubmit,
+        handleCancelKeyPress,
+        initialValues: sanitizedInitialValues,
+        isDisabled: isSubmitting || isGettingDetails || recaptchaLoading,
+        recaptchaWidgetProps
+    };
+};
+
+/** JSDocs type definitions */
+
+/**
+ * GraphQL queries for the create account form.
+ * This is a type used by the {@link useCreateAccount} talon.
+ *
+ * @typedef {Object} CreateAccountQueries
+ *
+ * @property {GraphQLAST} customerQuery query to fetch customer details
+ * @property {GraphQLAST} getCartDetailsQuery query to get cart details
+ */
+
+/**
+ * GraphQL mutations for the create account form.
+ * This is a type used by the {@link useCreateAccount} talon.
+ *
+ * @typedef {Object} CreateAccountMutations
+ *
+ * @property {GraphQLAST} createAccountMutation mutation for creating new account
+ * @property {GraphQLAST} createCartMutation mutation for creating new cart
+ * @property {GraphQLAST} mergeCartsMutation mutation for merging carts
+ * @property {GraphQLAST} signInMutation mutation for signing
+ */
+
+/**
+ * Initial values for the create account form.
+ * This is a type used by the {@link useCreateAccount} talon.
+ *
+ * @typedef {Object} InitialValues
+ *
+ * @property {String} email email id of the user
+ * @property {String} firstName first name of the user
+ * @property {String} lastName last name of the user
+ */
+
+/**
+ * Sanitized initial values for the create account form.
+ * This is a type used by the {@link useCreateAccount} talon.
+ *
+ * @typedef {Object} SanitizedInitialValues
+ *
+ * @property {String} email email id of the user
+ * @property {String} firstname first name of the user
+ * @property {String} lastname last name of the user
+ */
+
+/**
+ * Object type returned by the {@link useCreateAccount} talon.
+ * It provides props data to use when rendering the create account form component.
+ *
+ * @typedef {Object} CreateAccountProps
+ *
+ * @property {Map} errors a map of errors to their respective mutations
+ * @property {Function} handleCancel callback function to handle form cancellations
+ * @property {Function} handleSubmit callback function to handle form submission
+ * @property {SanitizedInitialValues} initialValues initial values for the create account form
+ * @property {Boolean} isDisabled true if either details are being fetched or form is being submitted. False otherwise.
+ * @property {Object} recaptchaWidgetProps - Props for the GoogleReCaptcha component.
+ * @property {Function} recaptchaWidgetProps.containerElement - Container reference callback.
+ * @property {Boolean} recaptchaWidgetProps.shouldRender - Checks if component should be rendered.
+ */

package/src/overwrites/peregrine/lib/talons/OrderHistoryPage/orderHistoryPage.gql.js

@@ -20,6 +20,9 @@ const CustomerOrdersFragment = gql`
             }
             items {
                 id
+                is_preorder
+                pre_order_deposit
+                pre_order_payment_type
                 product_image_url
                 product_name
                 product_sale_price {
@@ -112,6 +115,17 @@ export const GET_CUSTOMER_ORDERS = gql`
     ${CustomerOrdersFragment}
 `;
 
+export const COMPLETE_PREORDER = gql`
+    mutation CompletePreorder($input: CompletePreorderInput!) {
+        completePreorder(input: $input) {
+            cart_id
+            message
+            success
+        }
+    }
+`;
+
 export default {
-    getCustomerOrdersQuery: GET_CUSTOMER_ORDERS
+    getCustomerOrdersQuery: GET_CUSTOMER_ORDERS,
+    completePreorderMutation: COMPLETE_PREORDER
 };

package/src/overwrites/peregrine/lib/talons/OrderHistoryPage/orderRow.gql.js

@@ -44,3 +44,14 @@ export default {
     getProductThumbnailsQuery: GET_PRODUCT_THUMBNAILS,
     getConfigurableThumbnailSource: GET_CONFIGURABLE_THUMBNAIL_SOURCE
 };
+
+// Mutation to complete preorder
+export const COMPLETE_PREORDER = gql`
+    mutation CompletePreorder($input: CompletePreorderInput!) {
+        completePreorder(input: $input) {
+            cart_id
+            message
+            success
+        }
+    }
+`;

package/src/overwrites/peregrine/lib/talons/ProductFullDetail/useProductFullDetail.js

@@ -720,6 +720,7 @@ export const useProductFullDetail = props => {
         sku: productSku,
         publish_status: product.publish_status,
         custom_table_metadata: product.custom_table_metadata,
+        related_products: product.related_products,
         term_and_conditions: product.term_and_conditions,
         link_to_other_stores: product.link_to_other_stores,
         shipping_policy: product.shipping_policy,

package/src/overwrites/peregrine/lib/talons/RootComponents/Category/categoryContent.gql.js

@@ -43,6 +43,7 @@ export const GET_CATEGORY_CONTENT = gql`
                 allowed_filters {
                     code
                 }
+                prefixes
                 custom_subcategory {
                     name
                     path

package/src/overwrites/peregrine/lib/talons/RootComponents/Product/productDetailFragment.gql.js

@@ -17,6 +17,10 @@ export const ProductDetailsFragment = gql`
             city
             country
         }
+        related_products {
+            uid
+            name
+        }
         description {
             html
         }
@@ -76,38 +80,6 @@ export const ProductDetailsFragment = gql`
         }
         publish_status
         sku
-        auction_data {
-            is_auction
-            status
-            customer_id
-            starting_price
-            reserve_price
-            days
-            min_qty
-            max_qty
-            start_auction_time
-            stop_auction_time
-            auction_status
-            increment_opt
-            increment_price
-            auto_auction_opt
-            featured_auction
-            buy_it_now
-            max_amount
-            min_amount
-            current_time_stamp
-            continue_time
-            limit_bids
-            time_zone
-            stop_auction_utc_time
-            start_auction_utc_time
-            today_time
-            start_auction_time_stamp
-            stop_auction_time_stamp
-            new_auction_start
-            customer_name
-            max_bids
-        }
         preorder {
             is_preorder
             pre_order_payment_type

package/src/overwrites/venia-ui/lib/RootComponents/Category/categoryContent.js

@@ -165,7 +165,7 @@ const CategoryContent = props => {
     ) : null;
 
     const sidebar = shouldShowFilterButtons ? (
-        <FilterSidebar hideFilters={category && category.hide_filters ? true : false} children={children} filters={filters} allowedFilters={category ? category.allowed_filters : []} />
+        <FilterSidebar hideFilters={category && category.hide_filters ? true : false} children={children} filters={filters} allowedFilters={category ? category.allowed_filters : []} prefixes={category ? category.prefixes : []} />
     ) : shouldShowFilterShimmer ? (
         <FilterSidebarShimmer />
     ) : null;

package/src/overwrites/venia-ui/lib/components/FilterSidebar/filterSidebar.js

@@ -21,7 +21,7 @@ const SCROLL_OFFSET = 150;
  * @param {Object} props.filters - filters to display
  */
 const FilterSidebar = props => {
-    const { filters, filterCountToOpen, allowedFilters, hideFilters } = props;
+    const { filters, filterCountToOpen, allowedFilters, prefixes, hideFilters } = props;
     const talonProps = useFilterSidebar({ filters });
     const {
         filterApi,
@@ -116,7 +116,15 @@ const FilterSidebar = props => {
     // // console.log([...sorted.entries()]);
     // const filterItems = [...sorted.entries()];
 
-    // console.log('filterItems',filterItems)
+    const removePrefix = (attrCode) => {
+        if (prefixes) {
+            return prefixes.reduce((s, p) => 
+            s.startsWith(p + "_") ? s.replace(p + "_", "") : s
+            , attrCode);
+        }
+
+        return attrCode;
+    };
 
     const filtersList = useMemo(
         () =>
@@ -124,10 +132,10 @@ const FilterSidebar = props => {
                 const blockState = filterState.get(group);
                 const groupName = filterNames.get(group);
                 const frontendInput = filterFrontendInput.get(group);
-
-                const hideFilters = ['card_game','bricks_categories','sc_sports_categories','trains','trains_locomotives','trains_supplies_type','lof_preorder','card_pre_orders','auction','special_price','sc_baseball_inserts','sc_baseball_parallel','sale','sc_set_type','sc_brands'];
-                if (!allowedFiltersArr?.length || filterState.size && allowedFiltersArr.length || !filterState.size && allowedFiltersArr.length && allowedFiltersArr.includes(group)) {
-                    if (!hideFilters.includes(group) && groupName && !group.includes('card_release') && !group.includes('card_set') && !group.includes('sc_set_name')) {
+                
+                if (!allowedFiltersArr.length || allowedFiltersArr.length && allowedFiltersArr.includes(removePrefix(group))) {
+                    console.log('removePrefix(group)',removePrefix(group))
+                    // if (!hideFilters.includes(group) && groupName && !group.includes('card_release') && !group.includes('card_set') && !group.includes('sc_set_name')) {
                     
                     // if (!allowedFiltersArr?.length && group != "category_uid" || allowedFiltersArr?.length && allowedFiltersArr.includes(group)) {
                         let subFilter = null;
@@ -177,7 +185,7 @@ const FilterSidebar = props => {
                                 initialOpen={true}
                             />
                         );
-                    }
+                    // }
                 }
             }),
         [
@@ -254,6 +262,7 @@ FilterSidebar.propTypes = {
         root: string,
         root_open: string
     }),
+    prefixes: [],
     filters: arrayOf(
         shape({
             attribute_code: string,

package/src/overwrites/venia-ui/lib/components/Gallery/item.js

@@ -129,7 +129,7 @@ const GalleryItem = props => {
                         {ratingAverage}
                     </span>
                 </div>
-                <div className={cn('item-info px-[15px] pb-[20px]')}>
+                <div className={cn('item-info px-[15px] pb-[15px]')}>
                     {/* <Link
                         onClick={handleLinkClick}
                         to={productLink}

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

@@ -76,8 +76,6 @@ const ReviewModal = (props) => {
         // if (onSubmit) {
         //     onSubmit({ ...formState, ratings });
         // }
-        console.log('formState',formState)
-        console.log('e',e)
         setSubmitting(true);
         const input = {
             nickname: formState.nickname,
@@ -119,24 +117,18 @@ const ReviewModal = (props) => {
         return { url, label };
     };
 
-    console.log('ratings',ratings)
-
     const ratingStars = useMemo(() => {
-        console.log('ratingsMetadata22',ratingsMetadata)
         if (!ratingsMetadata) {
             return '';
         }
 
         // Find value (1-5) for selected value_id
         const selectedValue = ratings && ratingsMetadata.values.find(v => v.value_id === ratings) || '';
-        console.log('selectedValue',selectedValue)
 
         let starButtons = [];
 
         [1,2,3,4,5].map(star => {
             const valObj = ratingsMetadata.values.find(v => v.value === String(star));
-            console.log('String(star)',String(star))
-            console.log('valObj',valObj)
             if (valObj) {
                 starButtons.push(
                     <button

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

@@ -26,6 +26,7 @@ import { SearchNormal } from 'iconsax-react';
 import cn from 'classnames';
 import Pagination from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Pagination';
 import { ReviewModal } from './Reviews'
+import { useCartContext } from '@magento/peregrine/lib/context/cart';
 
 const errorIcon = (
     <Icon
@@ -38,7 +39,7 @@ const errorIcon = (
 const searchIcon = <Icon src={SearchIcon} size={24} />;
 
 const OrderHistoryPage = props => {
-    const talonProps = useOrderHistoryPage();
+    const talonProps = useOrderHistoryPage();  
     const {
         errorMessage,
         loadMoreOrders,
@@ -51,6 +52,7 @@ const OrderHistoryPage = props => {
         searchText,
         pageControl
     } = talonProps;
+
     const [, { addToast }] = useToasts();
     const { formatMessage } = useIntl();
     const [reviewOrder, setReviewOrder] = useState(null);
@@ -166,8 +168,6 @@ const OrderHistoryPage = props => {
         }
     }, [addToast, errorMessage]);
 
-    console.log('reviewOrder',reviewOrder)
-
     return (
         <OrderHistoryContextProvider>
             <ReviewModal

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

@@ -1,9 +1,13 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
+import { useMutation } from '@apollo/client';
 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 { COMPLETE_PREORDER } from '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/OrderHistoryPage/orderRow.gql';
+import { useCartContext } from '@magento/peregrine/lib/context/cart';
+import { useToasts } from '@magento/peregrine/lib/Toasts';
 
 import { useStyle } from '@magento/venia-ui/lib/classify';
 import Icon from '@magento/venia-ui/lib/components/Icon';
@@ -19,6 +23,8 @@ import { Link, useHistory } from 'react-router-dom';
 const OrderRow = props => {
     const { order, setReviewOrder } = props;
     const { formatMessage } = useIntl();
+    const [{ cartId }] = useCartContext();
+    const [, { addToast }] = useToasts();
     const history = useHistory();
     const {
         invoices,
@@ -29,7 +35,7 @@ const OrderRow = props => {
         status,
         total
     } = order;
-
+   
     const { grand_total: grandTotal } = total;
     const { currency, value: orderTotal } = grandTotal;
 
@@ -47,7 +53,12 @@ const OrderRow = props => {
     const hasInvoice = !!invoices.length;
     const hasShipment = !!shipments.length;
     let derivedStatus;
-    if (status === 'Complete') {
+    if (status === 'Canceled') {
+        derivedStatus = formatMessage({
+            id: 'orderRow.canceledText',
+            defaultMessage: 'Canceled'
+        });
+    } else if (status === 'Complete') {
         derivedStatus = formatMessage({
             id: 'orderRow.deliveredText',
             defaultMessage: 'Delivered'
@@ -101,6 +112,9 @@ const OrderRow = props => {
         );
 
     const badgeStatusStyle = () => {
+        if (status === 'Canceled') {
+            return 'text-red-600 text-[14px] font-medium py-[5px] border-none';
+        }
         return 'text-blue-700 text-[14px] font-medium py-[5px] border-none';
     }
 
@@ -138,6 +152,58 @@ const OrderRow = props => {
 
     const showNewReturnButton = status === 'Complete' || derivedStatus === formatMessage({ id: 'orderRow.deliveredText', defaultMessage: 'Delivered' });
 
+    // Find a preorder item eligible for completion (deposit type)
+    const preorderItem = useMemo(() => {
+        if (!Array.isArray(items)) return null;
+        return items.find(it => it && it.is_preorder && String(it.pre_order_payment_type).toLowerCase() === 'deposit');
+    }, [items]);
+
+    const [completePreorder, { loading: completingPreorder }] = useMutation(COMPLETE_PREORDER);
+
+    const handleCompletePreorder = async () => {
+        try {
+            const targetItem = preorderItem || (Array.isArray(items) && items.length ? items[0] : null);
+            if (!targetItem) {
+                console.warn('No eligible preorder item found to complete preorder');
+                return;
+            }
+
+            const input = {
+                cartId: cartId || '',
+                item_id: String(targetItem.id || ''),
+                order_reference: String(orderNumber || ''),
+                product_name: String(targetItem.product_name || ''),
+                qty: Number(targetItem.quantity_ordered || 1)
+            };
+
+            const { data: result } = await completePreorder({ variables: { input } });
+            const payload = result?.completePreorder;
+            if (payload?.success) {
+                addToast({
+                    type: 'success',
+                    message: payload.message || formatMessage({ id: 'orderRow.completePreorder.success', defaultMessage: 'Preorder completed successfully.' }),
+                    dismissable: true,
+                    timeout: 5000
+                });
+                history.push('/cart');
+            } else {
+                addToast({
+                    type: 'error',
+                    message: payload?.message || formatMessage({ id: 'orderRow.completePreorder.failed', defaultMessage: 'Failed to complete preorder.' }),
+                    dismissable: true,
+                    timeout: 7000
+                });
+            }
+        } catch (e) {
+            addToast({
+                type: 'error',
+                message: e?.message || formatMessage({ id: 'orderRow.completePreorder.error', defaultMessage: 'Something went wrong completing preorder.' }),
+                dismissable: true,
+                timeout: 7000
+            });
+        }
+    };
+
     const handleNewReturn = () => {
         // Inject product_image per item with safe fallbacks (prefer product_image_url from query)
         let orderWithImages = { ...order };
@@ -180,7 +246,6 @@ const OrderRow = props => {
     };
 
     const handleWriteReview = useCallback(( order ) => {
-        console.log('order',order)
         if (order) {
             setReviewOrder(order);
         }
@@ -277,6 +342,22 @@ const OrderRow = props => {
                                 </span>
                             </>
                         )}
+                        {preorderItem && (
+                        <button
+                            type="button"
+                            onClick={handleCompletePreorder}
+                            disabled={completingPreorder}
+                            aria-busy={completingPreorder}
+                            aria-disabled={completingPreorder}
+                            className={`bg-blue-700 rounded-full px-[30px] py-[8px] text-[13px] font-medium text-white transition-all duration-300 ease-in-out ${completingPreorder ? 'opacity-60 cursor-not-allowed pointer-events-none bg-gray-200 text-white' : ''}`}
+                        >
+                            {completingPreorder ? (
+                                <FormattedMessage id={'orderRow.completingPreorder'} defaultMessage={'Complete Loading...'} />
+                            ) : (
+                                <FormattedMessage id={'orderRow.completePreorder'} defaultMessage={'Complete Preorder'} />
+                            )}
+                        </button>
+                        )}
                         <Link 
                             to={{
                                 pathname: `/order-history/view/${orderNumber}`,

package/src/talons/ProductContent/productContent.gql.js

@@ -33,6 +33,7 @@ export const GET_CATEGORY_CONTENT = gql`
                 allowed_filters {
                     code
                 }
+                prefixes
                 custom_subcategory {
                     name
                     path

package/src/talons/SellerProducts/productContent.gql.js

@@ -34,6 +34,7 @@ export const GET_CATEGORY_CONTENT = gql`
                 allowed_filters {
                     code
                 }
+                    prefixes
                 custom_subcategory {
                     name
                     path