@riosst100/pwa-marketplace 3.2.4 → 3.2.6

package/src/components/SocialLogin/googleSignInButton.js

@@ -0,0 +1,50 @@
+import { useEffect, useCallback, useRef } from "react";
+import React from 'react';
+
+export default function GoogleSignInButton(props) {
+  const { setToken } = props;
+
+  const buttonRef = useRef(null);
+
+  // callback ketika user berhasil login
+  const handleCredentialResponse = useCallback((response) => {
+    console.log("JWT:", response.credential);
+
+    setToken(response.credential);
+  }, [setToken]);
+      
+  //     (response) => {
+    
+    
+  //   // simpan token atau kirim ke backend
+  // };
+
+  useEffect(() => {
+    // pastikan script Google sudah ada
+    const script = document.createElement("script");
+    script.src = "https://accounts.google.com/gsi/client";
+    script.async = true;
+    document.body.appendChild(script);
+
+    script.onload = () => {
+      // inisialisasi GIS
+      google.accounts.id.initialize({
+        client_id: "541495182998-oig1ed7n9a5g7e60pu3fcdoek8cnhpo2.apps.googleusercontent.com",
+        callback: handleCredentialResponse,
+      });
+
+      // render button di div
+      google.accounts.id.renderButton(buttonRef.current, {
+        theme: "outline",
+        size: "large",
+      });
+    };
+
+    return () => {
+      // bersihin script jika perlu
+      document.body.removeChild(script);
+    };
+  }, []);
+
+  return <div ref={buttonRef}></div>;
+}

package/src/components/SocialLogin/index.js

@@ -1,10 +1 @@
-import React from 'react';
-import Content from './socialLogin';
-
-const index = (props) => {
-    return (
-        <Content {...props} />
-    )
-}
-
-export default index
+export { default } from './socialLogin';

package/src/components/SocialLogin/socialLogin.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 import Button from '@magento/venia-ui/lib/components/Button';
 import Image from '@magento/venia-ui/lib/components/Image';
 import GoogleIcon from './img/google.svg';
@@ -6,20 +6,33 @@ import FacebookIcon from './img/facebook.svg';
 import InstagramIcon from './img/instagram.svg';
 import WechatIcon from './img/wechat.svg';
 import WeiboIcon from './img/weibo.svg';
+import GoogleSignInButton from './googleSignInButton'
+import { useSocialLogin } from '@riosst100/pwa-marketplace/src/talons/SocialLogin/useSocialLogin';
+
+const SocialLogin = () => {
+    const [jwtToken, setJwtToken] = useState(null);
+
+    const talonProps = useSocialLogin({
+        jwtToken
+    });
+
+    // const {
+    //     errors,
+    //     handleCreateAccount,
+    //     handleEnterKeyPress,
+    //     signinHandleEnterKeyPress,
+    //     handleForgotPassword,
+    //     forgotPasswordHandleEnterKeyPress,
+    //     handleSubmit,
+    //     isBusy,
+    //     setFormApi,
+    //     recaptchaWidgetProps
+    // } = talonProps;
 
-const socialLogin = () => {
     return (
-        <div className='relative flex w-full justify-between items-center'>
-            <Button
-                className="shadow-type-1 p-[14px] rounded-full w-[52px] h-[52px]"
-            >
-                <Image
-                    alt='google'
-                    className="relative"
-                    src={GoogleIcon}
-                />
-            </Button>
-            <Button
+        <div className='relative flex w-full justify-center items-center'>
+            <GoogleSignInButton setToken={setJwtToken} />
+            {/* <Button
                 className="shadow-type-1 p-[14px] rounded-full w-[52px] h-[52px]"
             >
                 <Image
@@ -54,17 +67,9 @@ const socialLogin = () => {
                     className="relative"
                     src={WeiboIcon}
                 />
-            </Button>
-
-            <style global jsx>
-                {`
-                    img[loading="eager"] {
-                        display: contents;
-                    }
-                `}
-            </style>
+            </Button> */}
         </div>
     )
 }
 
-export default socialLogin
+export default SocialLogin;

package/src/components/WebsiteSwitcher/websiteSwitcherItem.js

@@ -12,23 +12,37 @@ const WebsiteSwitcherItem = props => {
 
     const { location } = globalThis;
     const href = location.href;
+    const origin = location.origin;
 
-    let match = location && location.pathname.split("/")[1];
+    const websiteCodes = [];
+
+    AVAILABLE_WEBSITES.forEach(store => {
+        websiteCodes.push(store.website_code);
+    });
+
+    const pathname = location.pathname;
+    const search = location.search;
+    const match = location && location.pathname.split("/")[1];
+    let websiteCodeInUrl = websiteCodes.find((str) => str === match);
 
     const websiteCode = option2 != "base" ? option2 : '';
 
     let url = href + websiteCode;
     
     
-    if (match && option2 == "base") {
-        match = match + "/";
+    if (websiteCodeInUrl && option2 == "base") {
+        websiteCodeInUrl = websiteCodeInUrl + "/";
+    }
 
-        url = href.replace(match, websiteCode);
+    if (websiteCodeInUrl) {
+        url = href.replace(websiteCodeInUrl, websiteCode);
     }
 
-    console.log('href',href)
-    console.log('match',match)
-    console.log('url',url)
+    if (!websiteCodeInUrl) {
+        if (websiteCode) {
+            url = origin + '/' + websiteCode + pathname + search;
+        }
+    }
 
     // const handleClick = useCallback(() => {
     //     onClick(option, option2);

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

@@ -147,6 +147,8 @@ const Adapter = props => {
             // history.go(0);
         }
 
+        console.log('currentWebsiteCode',currentWebsiteCode)
+
         if (!websiteCodeInUrl && getWebsiteByUserIp) {
             setVerifyUserIp(false);
 
@@ -185,7 +187,7 @@ const Adapter = props => {
                 );
             }
         }
-    }, [websiteCodeInUrl, getWebsiteByUserIp]);
+    }, [websiteCodeInUrl, currentWebsiteCode]);
 
     // TODO: Replace with app skeleton. See PWA-547.
     if (!initialized) {

package/src/overwrites/venia-ui/lib/components/CreateAccount/createAccount.js

@@ -86,12 +86,12 @@ const CreateAccount = props => {
             initialValues={initialValues}
             onSubmit={handleSubmit}
         >
-            <h2 data-cy="CreateAccount-title" className={classes.title}>
+            {/* <h2 data-cy="CreateAccount-title" className={classes.title}>
                 <FormattedMessage
                     id={'createAccount.createAccountText'}
                     defaultMessage={'Sign Up'}
                 />
-            </h2>
+            </h2> */}
             <FormError errors={Array.from(errors.values())} />
             <div className='grid grid-cols-2 gap-6'>
                 <Field
@@ -257,7 +257,7 @@ const CreateAccount = props => {
                 {/* {cancelButton} */}
             </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 ?"}
@@ -266,7 +266,7 @@ const CreateAccount = props => {
                 {' '}
                 <Link
                     to={'/sign-in'}
-                    className='text-xs font-normal text-blue-700 underline'
+                    className='text-sm font-normal text-blue-700 underline'
                 >
                     <FormattedMessage
                         id={'createAccount.SignIn'}

package/src/overwrites/venia-ui/lib/components/CreateAccountPage/createAccountPage.js

@@ -16,15 +16,34 @@ const CreateAccountPage = props => {
     const { formatMessage } = useIntl();
 
     return (
-        <div className={classes.root}>
-            <StoreTitle>
-                {formatMessage({
-                    id: 'createAccountPage.title',
-                    defaultMessage: 'Create an Account'
-                })}
-            </StoreTitle>
-            <div className={cn(classes.contentContainer, '!border !border-gray-100 !rounded-lg')}>
-                <CreateAccount {...createAccountProps} />
+        <div className={classes.signInRootContainer}>
+            <div className={cn(classes.root, '!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/sign-up-concept-illustration_114360-7965.jpg?semt=ais_hybrid&w=740&q=80" width="50%" />
+                        <p style={{
+                            "fontSize": "20px",
+                            "fontWeight": 500
+                        }}>Create an account to start shopping or selling your collectibles.</p>
+                    </div>
+                </div>
+            </div>
+            <div className={classes.root}>
+                <StoreTitle>
+                    {formatMessage({
+                        id: 'createAccountPage.title',
+                        defaultMessage: 'Create an Account'
+                    })}
+                </StoreTitle>
+                <div className={cn(classes.contentContainer, '!border !border-gray-100 !rounded-lg')}>
+                    <CreateAccount {...createAccountProps} />
+                </div>
             </div>
         </div>
     );

package/src/overwrites/venia-ui/lib/components/CreateAccountPage/createAccountPage.module.css

@@ -2,7 +2,7 @@
     composes: gap-y-md from global;
     composes: grid from global;
     composes: justify-center from global;
-    composes: px-0 from global;
+    composes: px-6 from global;
     composes: py-[60px] from global;
     composes: text-center from global;
     grid-template-columns: minmax(auto, 800px);
@@ -16,6 +16,16 @@
     composes: lg_border-2 from global;
     composes: lg_border-solid from global;
     composes: lg_border-subtle from global;
-    composes: lg_pb-md from global;
+    /* composes: lg_pb-md from global; */
     composes: lg_rounded-md from global;
+}
+
+.leftContentContainer {
+    text-align: left;
+}
+
+.signInRootContainer {
+    justify-content: space-around;
+    display: flex;
+    align-items: normal;
 }

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

@@ -246,7 +246,7 @@ const OrderRow = props => {
                                     </div>
                                 </div>
                                 <div class="flex flex-col gap-1 pb-2 last_pb-0 justify-center">
-                                    <div class="text-[14px] text-blue-700">
+                                    <div class="text-[14px] text-blue-700 mr-4">
                                         <span><Price currencyCode={it?.product_sale_price?.currency} value={it?.product_sale_price?.value} /></span>
                                     </div>
                                 </div>

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/productFullDetail.js

@@ -537,6 +537,7 @@ const ProductFullDetail = props => {
     const cartActionContent = isSupportedProductType ? (
         <section className={cn(classes.actButton, 'justify-between flex gap-x-[20px] px-[15px] py-0')}>
            <RFQ
+                productId={product.id}
                 disabled={isAddToCartDisabled || isPreOrderClosed}
                 classes={{ rfqButton: cn(classes.rfqButton, "w-full") }}
             />

package/src/overwrites/venia-ui/lib/components/SignIn/signIn.js

@@ -58,12 +58,6 @@ const SignIn = props => {
 
     return (
         <div data-cy="SignIn-root" className={cn(classes.root, '!p-[30px]')}>
-            <span data-cy="SignIn-title" className={cn(classes.title, 'text-xl font-medium')}>
-                <FormattedMessage
-                    id={'signIn.signInText'}
-                    defaultMessage={'Sign In'}
-                />
-            </span>
             <FormError errors={Array.from(errors.values())} />
             <Form
                 getApi={setFormApi}
@@ -157,10 +151,10 @@ const SignIn = props => {
                         />}
                     </Button>
                     <div className='block text-center'>
-                        <span className='text-xs font-normal'>
+                        <span className='text-sm font-normal'>
                             <FormattedMessage
                                 id={'signIn.dontHaveAccount'}
-                                defaultMessage={"Don't have an account ? "}
+                                defaultMessage={"Don't have an account? "}
                             />
                         </span>
                         {' '}
@@ -174,28 +168,26 @@ const SignIn = props => {
                             />
                         </Link>
                     </div>
-                    {/* {showSocialLogin ? (
-                        <>
-                            <div className='max-w-[390px] w-full mx-auto'>
-                                <label
-                                    className={cn(
-                                        'relative after_w-full after_h-[1px] after_bg-gray-100 after_block after_absolute after_top-1/2 z-[0]',
-                                        'w-full block'
-                                    )}>
-                                    <span
-                                        className={cn(
-                                            'text-[14px] inline-block font-normal bg-white z-[1] relative px-5',
-                                        )}>
-                                        <FormattedMessage
-                                            id={'signIn.orContinueWith'}
-                                            defaultMessage={"Or continue with"}
-                                        />
-                                    </span>
-                                </label>
-                            </div>
-                            <SocialLogin />
-                        </>
-                    ) : null} */}
+                    <div className='max-w-[390px] w-full mx-auto'>
+                        <label
+                            className={cn(
+                                'relative after_w-full after_h-[1px] after_bg-gray-100 after_block after_absolute after_top-1/2 z-[0]',
+                                'w-full block'
+                            )}>
+                            <span
+                                className={cn(
+                                    'text-[14px] inline-block font-normal bg-white z-[1] relative px-5',
+                                )}>
+                                <FormattedMessage
+                                    id={'signIn.orContinueWith'}
+                                    defaultMessage={"Or continue with"}
+                                />
+                            </span>
+                        </label>
+                    </div>
+                    <div className='relative mx-auto w-full max-w-[490px]'>
+                        <SocialLogin />
+                    </div>
                 </div>
             </Form>
         </div>
@@ -203,6 +195,7 @@ const SignIn = props => {
 };
 
 export default SignIn;
+
 SignIn.propTypes = {
     classes: shape({
         buttonsContainer: string,

package/src/overwrites/venia-ui/lib/components/SignInPage/signInPage.js

@@ -16,15 +16,28 @@ const SignInPage = props => {
     const { formatMessage } = useIntl();
 
     return (
-        <div className={cn(classes.root, '!py-[60px]')}>
-            <StoreTitle>
-                {formatMessage({
-                    id: 'signInPage.title',
-                    defaultMessage: 'Sign In'
-                })}
-            </StoreTitle>
-            <div className={cn(classes.contentContainer, 'border border-gray-100 rounded-lg')}>
-                <SignIn {...signInProps} />
+        <div className={classes.signInRootContainer}>
+            <div className={cn(classes.root, '!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/sign-concept-illustration_114360-125.jpg" width="50%" />
+                        <p style={{
+                            "fontSize": "20px",
+                            "fontWeight": 500
+                        }}>Sign in to start shopping or sell your collectibles.</p>
+                    </div>
+                </div>
+            </div>
+            <div className={cn(classes.root, '!py-[60px]')}>
+                <div className={cn(classes.contentContainer, 'border border-gray-100 rounded-lg')}>
+                    <SignIn {...signInProps} />
+                </div>
             </div>
         </div>
     );

package/src/overwrites/venia-ui/lib/components/SignInPage/signInPage.module.css

@@ -14,4 +14,14 @@
 
 .contentContainer {
     composes: rounded-lg from global;
+}
+
+.leftContentContainer {
+    text-align: left;
+}
+
+.signInRootContainer {
+    justify-content: space-around;
+    display: flex;
+    align-items: normal;
 }

package/src/talons/RFQ/rfq.gql.js

@@ -0,0 +1,162 @@
+import { gql } from '@apollo/client';
+
+export const CREATE_QUICK_RFQ_MUTATION = gql`
+    mutation CreateQuickRfq($input: QuickrfqInput!) {
+        createQuickrfq(input: $input) {
+            message
+            quickrfq_id
+            success
+        }
+    }
+`;
+
+export const GET_QUICK_RFQ_LIST_QUERY = gql`
+    query getQuickRfqList($pageSize: Int, $currentPage: Int) {
+        quickrfqList(pageSize: $pageSize, currentPage: $currentPage) {
+            items {
+                attachment
+                attachments {
+                    created_at
+                    entity_id
+                    file_name
+                    file_path
+                    file_type
+                    message_id
+                    quickrfq_id
+                }
+                attributes
+                cart_id
+                comment
+                contact_name
+                create_date
+                email
+                info_buy_request
+                messages {
+                    created_at
+                    customer_id
+                    entity_id
+                    is_main
+                    message
+                    quickrfq_id
+                }
+                overview
+                phone
+                price_per_product {
+                    currency
+                    value
+                }
+                product_id
+                product_name
+                quantity
+                quickrfq_id
+                status
+                store_currency_code
+                store_id
+                update_date
+                website_id
+            }
+            page_info {
+                current_page
+                filter_group
+                hide_title
+                page_size
+                title
+            }
+            total_count
+        }
+    }
+`;
+
+export const GET_QUICK_RFQ_DETAIL_QUERY = gql`
+    query getQuickRfqDetail($quickrfqId: Int!) {
+        quickrfqDetail(quickrfq_id: $quickrfqId) {
+            attachment
+            attachments {
+                created_at
+                entity_id
+                file_name
+                file_path
+                file_type
+                message_id
+                quickrfq_id
+            }
+            attributes
+            cart_id
+            comment
+            contact_name
+            create_date
+            email
+            info_buy_request
+            messages {
+                created_at
+                customer_id
+                entity_id
+                is_main
+                message
+                quickrfq_id
+            }
+            overview
+            phone
+            price_per_product {
+                currency
+                value
+            }
+            product_id
+            product_name
+            quantity
+            quickrfq_id
+            status
+            store_currency_code
+            store_id
+            update_date
+            website_id
+        }
+    }
+`;
+
+export const SEND_RFQ_MESSAGE_MUTATION = gql`
+    mutation sendRfqMessage($input: SendRfqMessageInput!) {
+        sendRfqMessage(input: $input) {
+            message
+            rfq_message {
+                attachments {
+                    created_at
+                    file_name
+                    file_path
+                    file_type
+                    id
+                    message_id
+                    quickrfq_id
+                }
+                created_at
+                customer_id
+                id
+                is_main
+                message
+                quickrfq_id
+            }
+            success
+        }
+    }
+`;
+
+export const CONVERT_QUICK_RFQ_TO_CART_MUTATION = gql`
+    mutation convertQuickrfqToCart($quickrfqId: Int!) {
+        convertQuickrfqToCart(quickrfq_id: $quickrfqId) {
+            cart_id
+            masked_cart_id
+            message
+            quickrfq_id
+            rfq_status
+            status
+        }
+    }
+`;
+
+export default {
+    convertQuickrfqToCartMutation: CONVERT_QUICK_RFQ_TO_CART_MUTATION,
+    sendRfqMessageMutation: SEND_RFQ_MESSAGE_MUTATION,
+    getQuickRfqDetailQuery: GET_QUICK_RFQ_DETAIL_QUERY,
+    getQuickRfqListQuery: GET_QUICK_RFQ_LIST_QUERY,
+    createQuickRfqMutation: CREATE_QUICK_RFQ_MUTATION,
+};