@riosst100/pwa-marketplace 1.4.6 → 1.4.8

package/src/overwrites/venia-ui/lib/components/Newsletter/newsletter.js

@@ -0,0 +1,156 @@
+import React, { useEffect } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { Form } from 'informed';
+import { shape, string } from 'prop-types';
+
+import { useNewsletter } from '@magento/peregrine/lib/talons/Newsletter/useNewsletter';
+import { useToasts } from '@magento/peregrine';
+
+import { isRequired } from '@magento/venia-ui/lib/util/formValidators';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import FormError from '@magento/venia-ui/lib/components/FormError';
+import Button from '@magento/venia-ui/lib/components/Button';
+import Field from '@magento/venia-ui/lib/components/Field';
+import LoadingIndicator from '@magento/venia-ui/lib/components/LoadingIndicator';
+import TextInput from '@magento/venia-ui/lib/components/TextInput';
+import LinkButton from '@magento/venia-ui/lib/components/LinkButton';
+import Shimmer from './newsletter.shimmer';
+import defaultClasses from './newsletter.module.css';
+
+const Newsletter = props => {
+    const { formatMessage } = useIntl();
+    const classes = useStyle(defaultClasses, props.classes);
+    const talonProps = useNewsletter();
+    const [, { addToast }] = useToasts();
+    const {
+        isEnabled,
+        errors,
+        handleSubmit,
+        isBusy,
+        isLoading,
+        setFormApi,
+        newsLetterResponse,
+        clearErrors
+    } = talonProps;
+
+    useEffect(() => {
+        if (newsLetterResponse && newsLetterResponse.status) {
+            addToast({
+                type: 'success',
+                message: formatMessage({
+                    id: 'newsletter.subscribeMessage',
+                    defaultMessage: 'The email address is subscribed.'
+                }),
+                timeout: 5000
+            });
+        }
+    }, [addToast, formatMessage, newsLetterResponse]);
+
+    if (isLoading) {
+        return <Shimmer />;
+    }
+
+    if (!isEnabled) {
+        return null;
+    }
+
+    const maybeLoadingIndicator = isBusy ? (
+        <div className={classes.loadingContainer}>
+            <LoadingIndicator>
+                <FormattedMessage
+                    id={'newsletter.loadingText'}
+                    defaultMessage={'Subscribing'}
+                />
+            </LoadingIndicator>
+        </div>
+    ) : null;
+
+    return (
+        <div className={classes.root} data-cy={'Newsletter-root'}>
+            {maybeLoadingIndicator}
+            <span data-cy="Newsletter-title" className={classes.title}>
+                <FormattedMessage
+                    id={'newsletter.titleText'}
+                    defaultMessage={'Subscribe'}
+                />
+            </span>
+
+            <p
+                data-cy="Newsletter-infoText"
+                className={classes.newsletter_text}
+            >
+                <FormattedMessage
+                    id={'newsletter.infoText'}
+                    defaultMessage={
+                        'By subscribing you agree to receive email from us. \n Please read our Privacy Policy'
+                    }
+                />
+            </p>
+            <FormError
+                allowErrorMessages
+                errors={Array.from(errors.values())}
+            />
+            <Form
+                getApi={setFormApi}
+                className={classes.form}
+                onSubmit={handleSubmit}
+            >
+                <Field
+                    id="email"
+                    label={formatMessage({
+                        id: 'global.email',
+                        defaultMessage: 'Email'
+                    })}
+                >
+                    <TextInput
+                        autoComplete="email"
+                        field="email"
+                        id="email"
+                        placeholder="Email Address"
+                        validate={isRequired}
+                        className={{
+                            inputClassName: "!border-b-2 !border-t-0 !border-l-0 !border-r-0 rounded-none !px-0"
+                        }}
+                    />
+                </Field>
+                <LinkButton
+                    data-cy="Newsletter-submitButton"
+                    className={classes.subscribe_link}
+                    type="submit"
+                    disabled={isBusy}
+                    onClick={clearErrors}
+                >
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M20.5 13.01L15.49 7.98999" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+                        <path d="M3.5 13.01H20.5" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+                    </svg>
+                </LinkButton>
+                <div className={classes.buttonsContainer}>
+                    <Button
+                        priority="normal"
+                        type="submit"
+                        disabled={isBusy}
+                        onClick={clearErrors}
+                    >
+                        <FormattedMessage
+                            id={'newsletter.subscribeText'}
+                            defaultMessage={'Subscribe'}
+                        />
+                    </Button>
+                </div>
+            </Form>
+        </div>
+    );
+};
+
+Newsletter.propTypes = {
+    classes: shape({
+        modal_active: string,
+        root: string,
+        title: string,
+        form: string,
+        buttonsContainer: string
+    })
+};
+
+export default Newsletter;

package/src/overwrites/venia-ui/lib/components/Newsletter/newsletter.module.css

@@ -0,0 +1,90 @@
+.root {
+    composes: col-span-6 from global;
+    composes: gap-none from global;
+    composes: grid from global;
+    composes: items-start from global;
+    composes: max-w-[20rem] from global;
+    composes: mx-auto from global;
+    composes: relative from global;
+
+    composes: sm_col-span-3 from global;
+}
+
+.form {
+    composes: gap-y-xs from global;
+    composes: grid from global;
+    composes: relative from global;
+}
+
+/* TODO @TW: cannot compose */
+.form input {
+    /* TODO @TW: review */
+    padding-right: calc(1.875rem * var(--iconsAfter) + 5.625rem);
+}
+
+@media (max-width: 799px) {
+
+    /* TODO @TW: cannot compose */
+    .form input {
+        /* TODO @TW: review */
+        padding-right: calc(1.875rem * var(--iconsAfter) + 0.625rem);
+    }
+}
+
+/* TODO @TW: cannot compose */
+.form label {
+    position: absolute;
+    z-index: -1;
+    /* composes: z-behind from global; */
+}
+
+.buttonsContainer {
+    composes: gap-sm from global;
+    composes: grid from global;
+    composes: grid-flow-row from global;
+    composes: justify-center from global;
+    composes: mt-xs from global;
+    composes: w-full from global;
+
+    composes: md_hidden from global;
+}
+
+.title {
+    composes: block from global;
+    composes: font-semibold from global;
+    composes: mb-xs from global;
+    composes: text-colorDefault from global;
+    composes: text-sm from global;
+}
+
+.subscribe_link {
+    composes: absolute from global;
+    composes: bg-white from global;
+    composes: hidden from global;
+    composes: max-h-[35px] from global;
+    composes: px-0 from global;
+    composes: py-0 from global;
+    composes: right-1 from global;
+    composes: text-colorDefault from global;
+    composes: top-0 from global;
+    composes: underline from global;
+    min-height: 35px;
+    transform: translateY(7%);
+
+    composes: md_inline-block from global;
+}
+
+.newsletter_text {
+    composes: mb-sm from global;
+}
+
+.loadingContainer {
+    composes: absolute from global;
+    composes: bg-white from global;
+    composes: h-full from global;
+    composes: left-0 from global;
+    composes: opacity-75 from global;
+    composes: top-0 from global;
+    composes: w-full from global;
+    composes: z-mask from global;
+}

package/src/overwrites/venia-ui/lib/components/Newsletter/newsletter.shimmer.js

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Shimmer from '@magento/venia-ui/lib/components/Shimmer';
+import defaultClasses from './newsletter.module.css';
+import defaultShimmerClasses from './newsletter.shimmer.module.css';
+
+const NewsletterShimmer = props => {
+    const classes = useStyle(
+        defaultClasses,
+        defaultShimmerClasses,
+        props.classes
+    );
+
+    return (
+        <div className={classes.root}>
+            <Shimmer
+                key="title"
+                classes={{
+                    root_rectangle: classes.shimmerItem
+                }}
+            />
+            <Shimmer
+                key="text"
+                classes={{
+                    root_rectangle: classes.shimmerParagraphLine
+                }}
+            />
+            <Shimmer
+                key="text2"
+                width="50%"
+                classes={{
+                    root_rectangle: classes.shimmerItem
+                }}
+            />
+            <div className={classes.form}>
+                <Shimmer type="textInput" />
+                <div className={classes.buttonsContainer}>
+                    <Shimmer type="button" />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default NewsletterShimmer;

package/src/overwrites/venia-ui/lib/components/Newsletter/newsletter.shimmer.module.css

@@ -0,0 +1,21 @@
+.shimmerItem {
+    min-height: 1rem;
+    composes: bg-gray-100 from global;
+    composes: inline-block from global;
+    composes: overflow-hidden from global;
+    composes: pointer-events-none from global;
+    composes: relative from global;
+    display: block;
+    margin-bottom: 1rem;
+}
+
+.shimmerParagraphLine {
+    min-height: 1rem;
+    composes: bg-gray-100 from global;
+    composes: inline-block from global;
+    composes: overflow-hidden from global;
+    composes: pointer-events-none from global;
+    composes: relative from global;
+    display: block;
+    margin-bottom: 0.5rem;
+}

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

@@ -24,12 +24,12 @@ import Tabs from '@riosst100/pwa-marketplace/src/components/commons/Tabs';
 import ProductReviews from './components/productReview';
 import RichText from '@magento/venia-ui/lib/components/RichText';
 import { Star1, Verify, Sms, Message, Shop } from 'iconsax-react';
-import { Link } from 'react-router-dom';
-import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+import { Link } from "react-router-dom";
 import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
 
 const WishlistButton = React.lazy(() => import('@magento/venia-ui/lib/components/Wishlist/AddToListButton'));
 const Options = React.lazy(() => import('@magento/venia-ui/lib/components/ProductOptions'));
+import Share from '@riosst100/pwa-marketplace/src/components/SocialMediaShare';
 
 // Correlate a GQL error message to a field. GQL could return a longer error
 // string but it may contain contextual info such as product id. We can use
@@ -390,10 +390,21 @@ const ProductFullDetail = props => {
             >
                 <section className={classes.leftContainer}>
                     <Carousel images={mediaGalleryEntries} />
-                    <div className='product_group-actions'>
+                    <div className='product_group-actions flex gap-x-[18px] gap-y-4 justify-center items-center'>
                         <Suspense fallback={null}>
-                            <WishlistButton {...wishlistButtonProps} />
+                            <WishlistButton
+                                classes={{
+                                    root: cn(
+                                        'button_share border border-solid border-gray-100 p-2.5',
+                                        'rounded-full flex justify-center items-center h-fitContent min-w-min'
+                                    )
+                                }}
+                                {...wishlistButtonProps}
+                                buttonText={''}
+                            />
                         </Suspense>
+                        <Divider className="w-[1px] !h-[40px]" />
+                        <Share />
                     </div>
                 </section>
                 <section className={classes.rightContainer}>
@@ -489,9 +500,9 @@ const ProductFullDetail = props => {
 
                         <div className='product_shipping-information mb-[30px] leading-[18px] mt-[25px]'>
                             {sellerDetails &&
-                            <div className='text-xs'>
-                                Ship From <span className='font-semibold'>{sellerDetails.country}</span>
-                            </div>}
+                                <div className='text-xs'>
+                                    Ship From <span className='font-semibold'>{sellerDetails.country}</span>
+                                </div>}
                             <div className='text-xs'>
                                 Ship To <span className='font-semibold'>Yishun</span>
                             </div>
@@ -552,23 +563,23 @@ const ProductFullDetail = props => {
                                     </div>
                                 </div>
                                 <div className='flex flex-wrap items-start gap-4 relative'>
-                                    <button class="flex items-center justify-center gap-[5px] py-1 px-5 relative bg-white rounded-[30px] border border-solid border-[#6243fa]">
+                                    <Link to='/' class="flex items-center justify-center gap-[5px] py-1 px-5 relative bg-white rounded-[30px] border border-solid border-[#6243fa]">
                                         <div class="flex items-center justify-center gap-[10px] relative">
                                             <Sms color="#6243FA" size={14} variant="Outline" className='stroke-[#6243FA]' />
                                             <div class="relative xs_hidden lg_flex w-fit font-medium text-[#6243fa] text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">
                                                 Message
                                             </div>
                                         </div>
-                                    </button>
-                                    <button class="flex items-center justify-center gap-[5px] py-1 px-5 relative bg-[#280135] rounded-[30px] border border-solid border-[#280135]">
+                                    </Link>
+                                    <Link to='/' class="flex items-center justify-center gap-[5px] py-1 px-5 relative bg-[#280135] rounded-[30px] border border-solid border-[#280135]">
                                         <div class="flex items-center justify-center gap-[10px] relative">
                                             <Message color='#FFFFFF' size={14} variant="Outline" className='stroke-[#FFFFFF]' />
                                             <div class="relative xs_hidden lg_flex w-fit font-medium text-[#fff] text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">
                                                 Chat With Seller
                                             </div>
                                         </div>
-                                    </button>
-                                    <Link to={`/seller/${sellerDetails.url_key}`} class="flex items-center justify-center gap-[5px] py-1 px-5 relative bg-white rounded-[30px] border border-solid border-[#6243fa]">
+                                    </Link>
+                                    <Link class="flex items-center justify-center gap-[5px] py-1 px-5 relative bg-white rounded-[30px] border border-solid border-[#6243fa]">
                                         <div class="flex items-center justify-center gap-[10px] relative">
                                             <Shop color="#6243FA" size={14} variant="Outline" className='stroke-[#6243FA]' />
                                             <div class="relative xs_hidden lg_flex w-fit font-medium text-[#6243fa] text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">

package/src/overwrites/venia-ui/lib/components/TextInput/textInput.js

@@ -28,7 +28,15 @@ const TextInput = props => {
     return (
         <Fragment>
             <FieldIcons after={after} before={before} >
-                <InformedText {...rest} className={cn(inputClass, inputClassName)} field={field} />
+                <InformedText
+                    {...rest}
+                    className={cn(
+                        inputClass,
+                        'focus_shadow-none',
+                        inputClassName
+                    )}
+                    field={field}
+                />
             </FieldIcons>
             <Message fieldState={fieldState}>{message}</Message>
         </Fragment>

package/src/theme/vars.js

@@ -7,6 +7,7 @@ export const gray100 = '#B9AEC5';
 export const gray600 = '#1BA387';
 export const gray700 = '#999999';
 export const primary900 = "#292D32";
+export const blackTransparent = "#11182780";
 
 export default {
     textPrimary,
@@ -18,4 +19,5 @@ export default {
     gray600,
     gray700,
     primary900,
+    blackTransparent,
 }