@riosst100/pwa-marketplace 2.9.4 → 2.9.6

package/src/components/VerifyEmailPage/verifyEmail.js

@@ -1,18 +1,30 @@
-import React from 'react';
+import React, { useMemo, useEffect } from 'react';
 import { useQuery } from '@apollo/client';
 import { FormattedMessage } from 'react-intl';
 import { shape, string } from 'prop-types';
 import { useStyle } from '@magento/venia-ui/lib/classify';
 import defaultClasses from './verifyEmail.module.css';
-import { GET_CUSTOMER_INFORMATION } from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/AccountInformationPage/accountInformationPage.gql';
+import { BrowserPersistence } from '@magento/peregrine/lib/util';
+import { useHistory } from 'react-router-dom';
+import { useVerifyEmailPage } from '@riosst100/pwa-marketplace/src/talons/VerifyEmailPage/useVerifyEmailPage';
 
+const storage = new BrowserPersistence();
 
 const VerifyEmailPage = props => {
     const classes = useStyle(defaultClasses, props.classes);
-    const { data, loading } = useQuery(GET_CUSTOMER_INFORMATION);
-    const email = data?.customer?.email || '';
+    const email = storage.getItem('confirm_email');
 
-    return (
+    const history = useHistory();
+
+    const { handleResendEmail, shouldShowLoadingIndicator } = useVerifyEmailPage({ email });
+    
+    useEffect(() => {
+        if (!email) {
+            history.push('/');
+        }
+    }, [email, history]);
+
+    return email ? (
         <div className={classes.root}>
             <div className={classes.card}>
                 <h2 className={classes.title}>
@@ -21,30 +33,41 @@ const VerifyEmailPage = props => {
                         defaultMessage={'Please verify your email'}
                     />
                 </h2>
+                {email ?
                 <p className={classes.subtitle}>
                     <FormattedMessage
                         id={'verifyEmail.sentTo'}
                         defaultMessage={'You\'re almost there! We sent an email to'}
                     />
                     <br />
-                    <span className={classes.email}>{loading ? '.......' : email}</span>
-                </p>
+                    <span className={classes.email}>{email}</span>
+                </p> : ''}
                 <p className={classes.instructions}>
                     <FormattedMessage
                         id={'verifyEmail.instructions'}
                         defaultMessage={'Just click on the link in that email to complete your signup. If you don\'t see it, you may need to check your spam folder.'}
                     />
                 </p>
+                {shouldShowLoadingIndicator ? <button
+                    className={classes.resendButton}
+                    type="button"
+                    style={{"opacity":"0.5"}}
+                >
+                    <FormattedMessage
+                        id={'verifyEmail.sendingEmail'}
+                        defaultMessage={'Sending Email...'}
+                    />
+                </button> :
                 <button
                     className={classes.resendButton}
                     type="button"
-                    onClick={() => alert('Resend email logic goes here')}
+                    onClick={handleResendEmail}
                 >
                     <FormattedMessage
                         id={'verifyEmail.resend'}
                         defaultMessage={'Resend Email'}
                     />
-                </button>
+                </button>}
                 <div className={classes.contactHelp}>
                     <FormattedMessage
                         id={'verifyEmail.needHelp'}
@@ -59,7 +82,7 @@ const VerifyEmailPage = props => {
                 </div>
             </div>
         </div>
-    );
+    ) : '';
 };
 
 VerifyEmailPage.propTypes = {

package/src/intercept.js

@@ -92,7 +92,14 @@ module.exports = targets => {
       name: "VerifyEmailPage",
       pattern: "/verify-email",
       path: require.resolve("./components/VerifyEmailPage/index.js"),
-      authed: true,
+      authed: false,
+    },
+    {
+      exact: true,
+      name: "ConfirmEmailPage",
+      pattern: "/confirm-email",
+      path: require.resolve("./components/ConfirmEmailPage/index.js"),
+      authed: false,
     },
     {
       exact: true,

package/src/overwrites/peregrine/lib/talons/CartPage/PriceSummary/usePriceSummary.js

@@ -99,8 +99,8 @@ export const usePriceSummary = (props = {}) => {
 
         await createSellerCart({ initCheckoutSplitCart, sellerUrl });
 
-        // console.log('initCheckoutSplitCartData')
-        // console.log(initCheckoutSplitCartData)
+        console.log('initCheckoutSplitCartData',initCheckoutSplitCartData)
+        console.log('fetchCartId',fetchCartId)
 
         await removeCart();
         await apolloClient.clearCacheData(apolloClient, 'cart');

package/src/overwrites/peregrine/lib/talons/CheckoutPage/PaymentInformation/paymentMethods.gql.js

@@ -0,0 +1,45 @@
+import { gql } from '@apollo/client';
+
+export const GET_PAYMENT_METHODS = gql`
+    query getPaymentMethods($cartId: String!) {
+        cart(cart_id: $cartId) {
+            id
+            available_payment_methods {
+                code
+                title
+            }
+            selected_payment_method {
+                code
+            }
+        }
+    }
+`;
+
+export const SET_PAYMENT_METHOD_ON_CART = gql`
+    mutation setPaymentMethodOnCart(
+        $cartId: String!
+        $paymentMethod: PaymentMethodInput!
+    ) {
+        setPaymentMethodOnCart(
+            input: { cart_id: $cartId, payment_method: $paymentMethod }
+        ) {
+            cart {
+                id
+                payment_fees {
+                    title
+                    value
+                    currency
+                }
+                selected_payment_method {
+                    code
+                    title
+                }
+            }
+        }
+    }
+`;
+
+export default {
+    getPaymentMethodsQuery: GET_PAYMENT_METHODS,
+    setPaymentMethodOnCartMutation: SET_PAYMENT_METHOD_ON_CART
+};

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

@@ -0,0 +1,117 @@
+import { gql } from '@apollo/client';
+
+const CustomerOrdersFragment = gql`
+    fragment CustomerOrdersFragment on CustomerOrders {
+        items {
+            billing_address {
+                city
+                country_code
+                firstname
+                lastname
+                postcode
+                region
+                street
+                telephone
+            }
+            id
+            invoices {
+                id
+                number
+            }
+            items {
+                id
+                product_image_url
+                product_name
+                product_sale_price {
+                    currency
+                    value
+                }
+                product_sku
+                product_url_key
+                selected_options {
+                    label
+                    value
+                }
+                quantity_ordered
+                seller_name
+            }
+            number
+            order_date
+            payment_methods {
+                name
+                type
+                additional_data {
+                    name
+                    value
+                }
+            }
+            shipments {
+                id
+                tracking {
+                    number
+                }
+            }
+            shipping_address {
+                city
+                country_code
+                firstname
+                lastname
+                postcode
+                region
+                street
+                telephone
+            }
+            shipping_method
+            status
+            total {
+                discounts {
+                    amount {
+                        currency
+                        value
+                    }
+                }
+                grand_total {
+                    currency
+                    value
+                }
+                subtotal {
+                    currency
+                    value
+                }
+                total_shipping {
+                    currency
+                    value
+                }
+                total_tax {
+                    currency
+                    value
+                }
+            }
+        }
+        page_info {
+            current_page
+            total_pages
+        }
+        total_count
+    }
+`;
+
+export const GET_CUSTOMER_ORDERS = gql`
+    query GetCustomerOrders(
+        $filter: CustomerOrdersFilterInput
+        $pageSize: Int!
+        $currentPage: Int
+    ) {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        customer {
+            orders(filter: $filter, pageSize: $pageSize, currentPage: $currentPage) {
+                ...CustomerOrdersFragment
+            }
+        }
+    }
+    ${CustomerOrdersFragment}
+`;
+
+export default {
+    getCustomerOrdersQuery: GET_CUSTOMER_ORDERS
+};

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

@@ -0,0 +1,46 @@
+import { gql } from '@apollo/client';
+
+// Align fields closely with core to ensure compatibility, while keeping extra image fields safe to use.
+const GET_PRODUCT_THUMBNAILS = gql`
+    query getProductThumbnails($urlKeys: [String!]!) {
+        products(filter: { url_key: { in: $urlKeys } }) {
+            items {
+                uid
+                sku
+                name
+                url_key
+                thumbnail {
+                    label
+                    url
+                }
+                small_image { url }
+                media_gallery { url label }
+                ... on ConfigurableProduct {
+                    variants {
+                        product {
+                            sku
+                            uid
+                            name
+                            thumbnail { label url }
+                            small_image { url }
+                        }
+                    }
+                }
+            }
+        }
+    }
+`;
+
+const GET_CONFIGURABLE_THUMBNAIL_SOURCE = gql`
+    query getConfigurableThumbnailSource {
+        storeConfig {
+            store_code
+            configurable_thumbnail_source
+        }
+    }
+`;
+
+export default {
+    getProductThumbnailsQuery: GET_PRODUCT_THUMBNAILS,
+    getConfigurableThumbnailSource: GET_CONFIGURABLE_THUMBNAIL_SOURCE
+};

package/src/overwrites/peregrine/lib/talons/OrderHistoryPage/useOrderRow.js

@@ -0,0 +1,112 @@
+import { useCallback, useState, useMemo } from 'react';
+import { useQuery } from '@apollo/client';
+
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import DEFAULT_OPERATIONS from './orderRow.gql';
+
+/**
+ * Safe override of useOrderRow to guard against missing product data.
+ * Fixes: TypeError Cannot read properties of undefined (reading 'variants').
+ */
+export const useOrderRow = props => {
+    const { items = [], operations: ops } = props;
+    const operations = mergeOperations(DEFAULT_OPERATIONS, ops);
+    const { getProductThumbnailsQuery, getConfigurableThumbnailSource } = operations;
+
+    const urlKeys = useMemo(() => {
+        return items.map(item => item.product_url_key).filter(Boolean).sort();
+    }, [items]);
+
+    const { data, loading } = useQuery(getProductThumbnailsQuery, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first',
+        variables: { urlKeys }
+    });
+
+    const { data: configurableThumbnailSourceData } = useQuery(
+        getConfigurableThumbnailSource,
+        { fetchPolicy: 'cache-and-network' }
+    );
+
+    const configurableThumbnailSource = useMemo(() => {
+        if (configurableThumbnailSourceData && configurableThumbnailSourceData.storeConfig) {
+            return configurableThumbnailSourceData.storeConfig.configurable_thumbnail_source;
+        }
+        return undefined;
+    }, [configurableThumbnailSourceData]);
+
+    const imagesData = useMemo(() => {
+        const mappedImagesData = {};
+
+        if (!data || !data.products || !Array.isArray(data.products.items)) {
+            return mappedImagesData;
+        }
+
+        items.forEach(item => {
+            if (!item) return;
+
+            const product = data.products.items.find(
+                element => item.product_url_key === element.url_key
+            );
+
+            if (!product) {
+                // No matching product found for url_key; leave null to avoid crashes upstream.
+                mappedImagesData[item.product_sku] = null;
+                return;
+            }
+
+            // When using variant thumbnail, prefer the configured variant image if present.
+            if (
+                configurableThumbnailSource === 'itself' &&
+                Array.isArray(product.variants) &&
+                product.variants.length > 0
+            ) {
+                const foundVariant = product.variants.find(
+                    variant => variant && variant.product && variant.product.sku === item.product_sku
+                );
+                mappedImagesData[item.product_sku] = (foundVariant && foundVariant.product) || product;
+            } else {
+                mappedImagesData[item.product_sku] = product;
+            }
+        });
+
+        return mappedImagesData;
+    }, [data, items, configurableThumbnailSource]);
+
+    const [isOpen, setIsOpen] = useState(false);
+    const handleContentToggle = useCallback(() => {
+        setIsOpen(currentValue => !currentValue);
+    }, []);
+
+    return {
+        loading,
+        imagesData,
+        isOpen,
+        handleContentToggle
+    };
+};
+
+/**
+ * JSDoc type definitions
+ */
+
+/**
+ * GraphQL operations for the Order Row Component
+ *
+ * @typedef {Object} OrderRowOperations
+ *
+ * @property {GraphQLAST} getProductThumbnailsQuery The query used to get product thumbnails of items in the Order.
+ *
+ * @see [`orderRow.gql.js`]{@link https://github.com/magento/pwa-studio/blob/develop/packages/venia-ui/lib/components/OrderHistoryPage/orderRow.gql.js}
+ * for queries used in Venia
+ */
+
+/**
+ * Props data to use when rendering a collapsed image gallery
+ *
+ * @typedef {Object} OrderRowTalonProps
+ *
+ * @property {Object} imagesData Images data with thumbnail URLs to render.
+ * @property {Boolean} isOpen Boolean which represents if a row is open or not
+ * @property {Function} handleContentToggle Callback to toggle isOpen value
+ */

package/src/overwrites/peregrine/lib/talons/RMAPage/rmaPage.gql.js

@@ -0,0 +1,170 @@
+import { gql } from '@apollo/client';
+
+const LofmpRmasFragment = gql`
+    fragment LofmpRmasFragment on RmaSearchResult {
+        items {
+            created_at
+            increment_id
+            items {
+                condition
+                id
+                image_url
+                name
+                price {
+                    currency
+                    value
+                }
+                qty_requested
+                reason
+                resolution
+                seller_name
+                sku
+            }
+            order {
+                created_at
+                id
+                increment_id
+                status
+                status_label
+            }
+            order_increment_id
+            rma_date
+            rma_id
+            seller {
+                id
+                name
+                url
+            }
+            status
+            status_label
+        }
+        total_count
+    }
+`;
+
+export const GET_LOFMP_RMA_CONFIGURATIONS = gql`
+    query GetLofmpRmaConfigurations {
+        lofmpRmaConfigurations {
+            conditions {
+                id
+                name
+            }
+            reasons {
+                id
+                name
+            }
+            resolutions {
+                id
+                name
+            }
+        }
+    }
+`;
+
+export const GET_LOFMP_RMAS = gql`
+    query GetLofmpRmas($filter: RmaFilterInput, $pageSize: Int!, $currentPage: Int) {
+        lofmpRmas(filter: $filter, pageSize: $pageSize, currentPage: $currentPage) {
+            ...LofmpRmasFragment
+        }
+    }
+    ${LofmpRmasFragment}
+`;
+
+export const LOFMP_CREATE_RMA = gql`
+    mutation lofmpCreateRma($input: CreateRmaInput!) {
+        lofmpCreateRma(input: $input) {
+            message
+            rma_id
+            status_id
+            success
+        }
+    }
+`;
+
+export const GET_LOFMP_RMA_DETAIL = gql`
+    query GetLofmpRmaDetail($rmaId: ID!) {
+        lofmpRmaDetail(rmaId: $rmaId) {
+            created_at
+            increment_id
+            items {
+                condition
+                id
+                image_url
+                name
+                product_options {
+                    label
+                    value
+                }
+                qty_requested
+                reason
+                resolution
+                sku
+            }
+            messages {
+                attachments {
+                    id
+                    name
+                    url
+                }
+                created_at
+                id
+                sender_email
+                sender_name
+                text
+            }
+            order {
+                created_at
+                id
+                increment_id
+                status
+                status_label
+            }
+            order_increment_id
+            rma_date
+            rma_id
+            seller {
+                id
+                name
+                url
+            }
+            shipping_address {
+                address_type
+                base_cash_on_delivery
+                cash_on_delivery
+                city
+                company
+                country_id
+                customer_address_id
+                customer_id
+                email
+                entity_id
+                fax
+                firstname
+                lastname
+                middlename
+                parent_id
+                postcode
+                prefix
+                quote_address_id
+                region
+                region_id
+                street
+                suffix
+                telephone
+                vat_id
+                vat_is_valid
+                vat_request_date
+                vat_request_id
+                vat_request_success
+            }
+            status
+            status_label
+        }
+    }
+`;
+
+export default {
+    getLofmpRmasQuery: GET_LOFMP_RMAS,
+    lofmpCreateRmaMutation: LOFMP_CREATE_RMA,
+    getLofmpRmaDetailQuery: GET_LOFMP_RMA_DETAIL
+};

package/src/overwrites/venia-ui/lib/components/AccountInformationPage/DeleteAccount.js

@@ -2,49 +2,17 @@ import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import Button from '@magento/venia-ui/lib/components/Button';
 import { Message } from '@magento/venia-ui/lib/components/Field';
-
-// Dummy mutation placeholder
-const useDeleteAccount = () => {
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState(null);
-    const [success, setSuccess] = useState(false);
-
-    const deleteAccount = async () => {
-        setLoading(true);
-        setError(null);
-        setSuccess(false);
-        // Simulate API call
-        setTimeout(() => {
-            setLoading(false);
-            setSuccess(true);
-        }, 1500);
-    };
-
-    return {
-        loading,
-        error,
-        success,
-        deleteAccount
-    };
-};
+import { useDeleteAccount } from '@riosst100/pwa-marketplace/src/talons/AccountInformationPage/useDeleteAccount';
 
 const DeleteAccount = () => {
     const [confirm, setConfirm] = useState(false);
     const [agreement, setAgreement] = useState(false);
-    const { loading, error, success, deleteAccount } = useDeleteAccount();
+
+    const { loading, error, success, handleDeleteAccount } = useDeleteAccount();
+
     const handleChange = (event) => {
         setAgreement(event.target.checked);
     }
-    if (success) {
-        return (
-            <Message type="success">
-                <FormattedMessage
-                    id="deleteAccount.success"
-                    defaultMessage="Your account has been deleted."
-                />
-            </Message>
-        );
-    }
 
     return (
         <div style={{ marginTop: 32, border: '1px solid #f87171', padding: 24, borderRadius: 8, background: '#fef2f2' }}>
@@ -91,7 +59,7 @@ const DeleteAccount = () => {
                     <Button
                         priority="high"
                         disabled={loading || !agreement}
-                        onClick={deleteAccount}
+                        onClick={handleDeleteAccount}
                         style={{ marginRight: 8, textTransform: 'none' }}
                     >
                         <FormattedMessage

package/src/overwrites/venia-ui/lib/components/Adapter/adapter.js

@@ -61,8 +61,10 @@ const Adapter = props => {
     useEffect(() => {
         if (!websiteCodeInUrl && getWebsiteByUserIp) {
             setVerifyUserIp(false);
+
+            const search = location.search;
             
-            const query = new URLSearchParams(location.search);
+            const query = new URLSearchParams(search);
             const isAccessBaseWebsite = query.get('access_base_website') || (
                 storage.getItem('access_base_website') || null
             );