@riosst100/pwa-marketplace 2.5.1 → 2.5.3

package/package.json

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

package/src/components/LiveChat/liveChat.js

@@ -134,7 +134,7 @@ const liveChat = (props) => {
                     />
                 </div>
             </div>
-            <style jsx>
+            <style jsx="true">
                 {`
                     .chat-container::-webkit-scrollbar {
                         width: 8px;

package/src/components/ProductItem/index.js

@@ -31,7 +31,7 @@ const ProductItem = () => {
                     </div>
                 </div>
             </div>
-            <style jsx>
+            <style jsx="true">
                 {`
                     .line-clamp-2 {
                         display: -webkit-box;

package/src/components/RFQ/modalRfq.js

@@ -230,7 +230,7 @@ const RFQModalForm = (props) => {
                     </div>
                 </div>
             </Modal>
-            <style jsx>
+            <style jsx="true">
                 {`
                     .react-datepicker__input-container>input:focus-visible,
                     .react-datepicker__input-container>input:focus, 

package/src/components/RFQPage/quoteDetail.js

@@ -316,7 +316,7 @@ const quoteDetail = () => {
                     </div>
                 </div>
             </div>
-            <style jsx>
+            <style jsx="true">
                 {`
                     .chat-container::-webkit-scrollbar {
                         width: 8px;

package/src/components/RMAPage/RMACreate.js

@@ -212,7 +212,7 @@ const RMACreate = () => {
                     </div>
                 </div>
             </div>
-            <style jsx>
+            <style jsx="true">
                 {`
                     .chat-container::-webkit-scrollbar {
                         width: 8px;

package/src/components/RMAPage/RMADetail.js

@@ -292,7 +292,7 @@ const RMADetail = () => {
                     </div>
                 </div>
             </div>
-            <style jsx>
+            <style jsx="true">
                 {`
                     .chat-container::-webkit-scrollbar {
                         width: 8px;

package/src/components/SetsData/setsData.js

@@ -137,13 +137,13 @@ const SetsData = props => {
                 );
 
                 if (parseInt(products_count) > 0) {
-                    setsResult.push(<li className='list-none'>
+                    setsResult.push(<li key={index} className='list-none'>
                         <Link to={categoryUrl} className="hover_bg-darkblue-900 hover_text-white w-full block text-[14px] py-[2px] px-0">
                             {set_name} <span className='text-[12px]'>({products_count})</span>
                         </Link>
                     </li>)
                 } else {
-                    setsResult.push(<li className='list-none'>
+                    setsResult.push(<li key={index} className='list-none'>
                     <span className="text-[#8f8f8f] w-full block text-[14px] py-[2px] px-0">
                         {set_name} <span className='text-[12px]'>({products_count})</span>
                     </span>
@@ -264,26 +264,6 @@ const SetsData = props => {
         <Fragment>
             <StoreTitle>{title}</StoreTitle>
             <Breadcrumbs categoryId={categoryId} currentFilter={activeFilters} customPage={shopby == "singles" ? "Mini-Figures" : title} />
-            {/* <ul className={classes.nav}>
-                <li className={classes.nav_item}>
-                    <button
-                        onClick={() => {
-                            handleActiveTab('year')
-                        }}
-                    >
-                        {activeTab == 'year' ? <b>{byYearTitle}</b> : byYearTitle}
-                    </button>
-                </li>
-                <li className={classes.nav_item}>
-                    <button
-                        onClick={() => {
-                            handleActiveTab('all')
-                        }}
-                    >
-                        {activeTab == 'all' ? <b>{allSetsTitle}</b> : allSetsTitle}
-                    </button>
-                </li>
-            </ul> */}
             {shopby == "secret_lair" ? <>
                 <ul className={classes.nav}>
                     {availableYears.map((group, index) => (
@@ -297,7 +277,7 @@ const SetsData = props => {
                         </button>
                     </li>
                     ))}
-                    <li className={classes.nav_item}>
+                    <li key={"all"} className={classes.nav_item}>
                         <button
                             onClick={() => {
                                 handleActiveYear('')
@@ -321,7 +301,7 @@ const SetsData = props => {
                         </button>
                     </li>
                     ))}
-                    <li className={classes.nav_item}>
+                    <li key={"all"} className={classes.nav_item}>
                         <button
                             onClick={() => {
                                 handleActiveFilter('')
@@ -347,7 +327,7 @@ const SetsData = props => {
                     </button>
                 </li>
             ))}
-            <li className={classes.nav_item}>
+            <li key={'all'} className={classes.nav_item}>
                 <button
                     onClick={() => {
                         handleActive('all')
@@ -369,7 +349,7 @@ const SetsData = props => {
                         </button>
                     </li>
                 ))}
-                {availableGroups && availableGroups.length ? <li className={classes.nav_item}>
+                {availableGroups && availableGroups.length ? <li key={'all'} className={classes.nav_item}>
                     <button
                         onClick={() => {
                             handleActive('all')
@@ -390,7 +370,7 @@ const SetsData = props => {
                 ) : ''}
                 {shopby != "secret_lair" && <section className='single_list-indexing-container relative m-auto pt-5'>
                     {shopby != "secret_lair" && !activeFilter && activeTab != "year" && <ul className='flex gap-2 justify-center flex-wrap'>
-                        <li>
+                        <li key={'all'}>
                             <button
                                 className={cn(
                                     'rounded-md border border-solid border-gray-100 p-2 min-w-[28px]',

package/src/components/Xendit/summary.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { shape, string, func } from 'prop-types';
+
+import { useSummary } from '@magento/peregrine/lib/talons/CheckoutPage/PaymentInformation/useSummary';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+import defaultClasses from './summary.module.css';
+import LoadingIndicator from '@magento/venia-ui/lib/components/LoadingIndicator';
+import summaryPayments from '@magento/venia-ui/lib/components/CheckoutPage/PaymentInformation/summaryPaymentCollection';
+
+const Summary = props => {
+    const { classes: propClasses, onEdit } = props;
+    const classes = useStyle(defaultClasses, propClasses);
+
+    const talonProps = useSummary();
+
+    const { isLoading, selectedPaymentMethod } = talonProps;
+
+    if (isLoading && !selectedPaymentMethod) {
+        return (
+            <LoadingIndicator classes={{ root: classes.loading }}>
+                <FormattedMessage
+                    id={'checkoutPage.loadingPaymentInformation'}
+                    defaultMessage={'Fetching Payment Information'}
+                />
+            </LoadingIndicator>
+        );
+    }
+
+    const hasCustomSummaryComp = Object.keys(summaryPayments).includes(
+        selectedPaymentMethod.code
+    );
+
+    if (hasCustomSummaryComp) {
+        const SummaryPaymentMethodComponent =
+            summaryPayments[selectedPaymentMethod.code];
+        return <SummaryPaymentMethodComponent onEdit={onEdit} />;
+    } else {
+        return (
+            <div className={classes.root}>
+                <div className={classes.heading_container}>
+                    <h5 className={classes.heading}>
+                        <FormattedMessage
+                            id={'checkoutPage.paymentInformation'}
+                            defaultMessage={'Payment Information'}
+                        />
+                    </h5>
+                </div>
+                <div className={classes.card_details_container}>
+                    <span className={classes.payment_details}>
+                        {selectedPaymentMethod.title}
+                    </span>
+                </div>
+            </div>
+        );
+    }
+};
+
+export default Summary;
+
+Summary.propTypes = {
+    classes: shape({
+        root: string,
+        heading_container: string,
+        heading: string,
+        card_details_container: string,
+        payment_details: string
+    }),
+    onEdit: func.isRequired
+};

package/src/components/Xendit/summary.module.css

@@ -0,0 +1,23 @@
+.root {
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: p-md from global;
+}
+
+.heading_container {
+    composes: grid from global;
+    composes: grid-cols-1 from global;
+    composes: grid-flow-col from global;
+}
+
+.heading {
+    composes: font-semibold from global;
+}
+
+.card_details_container {
+    composes: gap-2xs from global;
+    composes: grid from global;
+}
+
+.payment_details {
+}

package/src/components/Xendit/xendit.js

@@ -0,0 +1,348 @@
+import React, { useMemo, useCallback } from 'react';
+import { useIntl } from 'react-intl';
+import { bool, func, shape, string } from 'prop-types';
+import { useXendit } from '@riosst100/src/talons/Xendit/useXendit';
+
+import { isRequired } from '@magento/venia-ui/lib/util/formValidators';
+import Country from '@magento/venia-ui/lib/components/Country';
+import Region from '@magento/venia-ui/lib/components/Region';
+import Postcode from '@magento/venia-ui/lib/components/Postcode';
+import Checkbox from '@magento/venia-ui/lib/components/Checkbox';
+import Field from '@magento/venia-ui/lib/components/Field';
+import TextInput from '@magento/venia-ui/lib/components/TextInput';
+import BrainTreeDropin from './brainTreeDropIn';
+import LoadingIndicator from '@magento/venia-ui/lib/components/LoadingIndicator';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+import defaultClasses from './xendit.module.css';
+import FormError from '@magento/venia-ui/lib/components/FormError';
+import GoogleReCaptcha from '@magento/venia-ui/lib/components/GoogleReCaptcha';
+
+const STEP_DESCRIPTIONS = [
+    { defaultMessage: 'Loading Payment', id: 'checkoutPage.step0' },
+    {
+        defaultMessage: 'Checking Credit Card Information',
+        id: 'checkoutPage.step1'
+    },
+    {
+        defaultMessage: 'Checking Credit Card Information',
+        id: 'checkoutPage.step2'
+    },
+    {
+        defaultMessage: 'Checking Credit Card Information',
+        id: 'checkoutPage.step3'
+    },
+    {
+        defaultMessage: 'Saved Credit Card Information Successfully',
+        id: 'checkoutPage.step4'
+    }
+];
+
+/**
+ * The initial view for the Braintree payment method.
+ */
+const Xendit = props => {
+    const {
+        classes: propClasses,
+        onPaymentSuccess: onSuccess,
+        onPaymentReady: onReady,
+        onPaymentError: onError,
+        resetShouldSubmit,
+        shouldSubmit
+    } = props;
+    const { formatMessage } = useIntl();
+
+    const classes = useStyle(defaultClasses, propClasses);
+
+    const talonProps = useXendit({
+        onSuccess,
+        onReady,
+        onError,
+        shouldSubmit,
+        resetShouldSubmit
+    });
+
+    const {
+        errors,
+        shouldRequestPaymentNonce,
+        onPaymentError,
+        onPaymentSuccess,
+        onPaymentReady,
+        isBillingAddressSame,
+        isLoading,
+        /**
+         * `stepNumber` depicts the state of the process flow in credit card
+         * payment flow.
+         *
+         * `0` No call made yet
+         * `1` Billing address mutation intiated
+         * `2` Braintree nonce requsted
+         * `3` Payment information mutation intiated
+         * `4` All mutations done
+         */
+        stepNumber,
+        initialValues,
+        shippingAddressCountry,
+        shouldTeardownDropin,
+        resetShouldTeardownDropin,
+        recaptchaWidgetProps
+    } = talonProps;
+
+    const creditCardComponentClassName = isLoading
+        ? classes.credit_card_root_hidden
+        : classes.credit_card_root;
+
+    const billingAddressFieldsClassName = isBillingAddressSame
+        ? classes.billing_address_fields_root_hidden
+        : classes.billing_address_fields_root;
+
+    /**
+     * Instead of defining classes={root: classes.FIELD_NAME}
+     * we are using useMemo to only do it once (hopefully).
+     */
+    const fieldClasses = useMemo(() => {
+        return [
+            'first_name',
+            'last_name',
+            'country',
+            'street1',
+            'street2',
+            'city',
+            'region',
+            'postal_code',
+            'phone_number'
+        ].reduce((acc, fieldName) => {
+            acc[fieldName] = { root: classes[fieldName] };
+
+            return acc;
+        }, {});
+    }, [classes]);
+
+    /**
+     * These 2 functions are wrappers around the `isRequired` function
+     * of `formValidators`. They perform validations only if the
+     * billing address is different from shipping address.
+     *
+     * We write this function in `venia-ui` and not in the `peregrine` talon
+     * because it references `isRequired` which is a `venia-ui` function.
+     */
+    const isFieldRequired = useCallback((value, { isBillingAddressSame }) => {
+        if (isBillingAddressSame) {
+            /**
+             * Informed validator functions return `undefined` if
+             * validation is `true`
+             */
+            return undefined;
+        } else {
+            return isRequired(value);
+        }
+    }, []);
+
+    const stepTitle = STEP_DESCRIPTIONS[stepNumber].defaultMessage
+        ? formatMessage({
+            id: STEP_DESCRIPTIONS[stepNumber].id,
+            defaultMessage: STEP_DESCRIPTIONS[stepNumber].defaultMessage
+        })
+        : formatMessage({
+            id: 'checkoutPage.loadingPayment',
+            defaultMessage: 'Loading Payment'
+        });
+
+    const loadingIndicator = isLoading ? (
+        <LoadingIndicator>{stepTitle}</LoadingIndicator>
+    ) : null;
+
+    return (
+        <div className={classes.root} data-cy="Xendit-root">
+            <div className={creditCardComponentClassName}>
+                <FormError
+                    allowErrorMessages
+                    classes={{ root: classes.formErrorContainer }}
+                    errors={Array.from(errors.values())}
+                />
+                <div className={classes.dropin_root}>
+                    <BrainTreeDropin
+                        onError={onPaymentError}
+                        onReady={onPaymentReady}
+                        onSuccess={onPaymentSuccess}
+                        shouldRequestPaymentNonce={shouldRequestPaymentNonce}
+                        shouldTeardownDropin={shouldTeardownDropin}
+                        resetShouldTeardownDropin={resetShouldTeardownDropin}
+                    />
+                </div>
+                <div
+                    data-cy="Xendit-AddressCheck-root"
+                    className={classes.address_check}
+                >
+                    <Checkbox
+                        data-cy="PaymentInformation-billingAddressSame"
+                        field="isBillingAddressSame"
+                        label={formatMessage({
+                            id: 'checkoutPage.billingAddressSame',
+                            defaultMessage:
+                                'Billing address same as shipping address'
+                        })}
+                        initialValue={initialValues.isBillingAddressSame}
+                    />
+                </div>
+                <div
+                    data-cy="Xendit-billingAddressFields"
+                    className={billingAddressFieldsClassName}
+                >
+                    <Field
+                        id="firstName"
+                        classes={fieldClasses.first_name}
+                        label={formatMessage({
+                            id: 'global.firstName',
+                            defaultMessage: 'First Name'
+                        })}
+                    >
+                        <TextInput
+                            data-cy="Xendit-billingAddress-firstname"
+                            id="firstName"
+                            field="firstName"
+                            validate={isFieldRequired}
+                            initialValue={initialValues.firstName}
+                        />
+                    </Field>
+                    <Field
+                        id="lastName"
+                        classes={fieldClasses.last_name}
+                        label={formatMessage({
+                            id: 'global.lastName',
+                            defaultMessage: 'Last Name'
+                        })}
+                    >
+                        <TextInput
+                            data-cy="Xendit-billingAddress-lastname"
+                            id="lastName"
+                            field="lastName"
+                            validate={isFieldRequired}
+                            initialValue={initialValues.lastName}
+                        />
+                    </Field>
+                    <Country
+                        data-cy="Xendit-billingAddress-country"
+                        classes={fieldClasses.country}
+                        validate={isFieldRequired}
+                        initialValue={
+                            /**
+                             * If there is no initial value to start with
+                             * use the country from shipping address.
+                             */
+                            initialValues.country || shippingAddressCountry
+                        }
+                    />
+                    <Field
+                        id="street1"
+                        classes={fieldClasses.street1}
+                        label={formatMessage({
+                            id: 'global.streetAddress',
+                            defaultMessage: 'Street Address'
+                        })}
+                    >
+                        <TextInput
+                            data-cy="Xendit-billingAddress-street1"
+                            id="street1"
+                            field="street1"
+                            validate={isFieldRequired}
+                            initialValue={initialValues.street1}
+                        />
+                    </Field>
+                    <Field
+                        id="street2"
+                        classes={fieldClasses.street2}
+                        label={formatMessage({
+                            id: 'global.streetAddress2',
+                            defaultMessage: 'Street Address 2'
+                        })}
+                        optional={true}
+                    >
+                        <TextInput
+                            data-cy="Xendit-billingAddress-street2"
+                            id="street2"
+                            field="street2"
+                            initialValue={initialValues.street2}
+                        />
+                    </Field>
+                    <Field
+                        id="city"
+                        classes={fieldClasses.city}
+                        label={formatMessage({
+                            id: 'global.city',
+                            defaultMessage: 'City'
+                        })}
+                    >
+                        <TextInput
+                            data-cy="Xendit-billingAddress-city"
+                            id="city"
+                            field="city"
+                            validate={isFieldRequired}
+                            initialValue={initialValues.city}
+                        />
+                    </Field>
+                    <Region
+                        data-cy="Xendit-billingAddress-region"
+                        classes={fieldClasses.region}
+                        initialValue={initialValues.region}
+                        validate={isFieldRequired}
+                        fieldInput={'region[label]'}
+                        fieldSelect={'region[region_id]'}
+                        optionValueKey={'id'}
+                    />
+                    <Postcode
+                        data-cy="Xendit-billingAddress-postcode"
+                        classes={fieldClasses.postal_code}
+                        validate={isFieldRequired}
+                        initialValue={initialValues.postcode}
+                    />
+                    <Field
+                        id="phoneNumber"
+                        classes={fieldClasses.phone_number}
+                        label={formatMessage({
+                            id: 'global.phoneNumber',
+                            defaultMessage: 'Phone Number'
+                        })}
+                    >
+                        <TextInput
+                            data-cy="Xendit-billingAddress-phoneNumber"
+                            id="phoneNumber"
+                            field="phoneNumber"
+                            validate={isFieldRequired}
+                            initialValue={initialValues.phoneNumber}
+                        />
+                    </Field>
+                </div>
+                <GoogleReCaptcha {...recaptchaWidgetProps} />
+            </div>
+            {loadingIndicator}
+        </div>
+    );
+};
+
+export default Xendit;
+
+Xendit.propTypes = {
+    classes: shape({
+        root: string,
+        dropin_root: string,
+        billing_address_fields_root: string,
+        first_name: string,
+        last_name: string,
+        city: string,
+        region: string,
+        postal_code: string,
+        phone_number: string,
+        country: string,
+        street1: string,
+        street2: string,
+        address_check: string,
+        credit_card_root: string,
+        credit_card_root_hidden: string
+    }),
+    shouldSubmit: bool.isRequired,
+    onPaymentSuccess: func,
+    onPaymentReady: func,
+    onPaymentError: func,
+    resetShouldSubmit: func.isRequired
+};

package/src/components/Xendit/xendit.module.css

@@ -0,0 +1,58 @@
+.root {
+}
+
+.credit_card_root {
+    composes: visible from global;
+    composes: opacity-100 from global;
+    transition-delay: 64ms;
+    transition-duration: 384ms;
+    transition-property: opacity, visbility;
+    transition-timing-function: var(--venia-global-anim-standard);
+}
+
+.credit_card_root_hidden {
+    composes: h-0 from global;
+    composes: invisible from global;
+    composes: opacity-0 from global;
+    composes: overflow-hidden from global;
+}
+
+.dropin_root {
+}
+
+.billing_address_fields_root {
+    composes: gap-x-xs from global;
+    composes: gap-y-sm from global;
+    composes: grid from global;
+    composes: px-0 from global;
+    composes: py-xs from global;
+}
+
+.billing_address_fields_root_hidden {
+    composes: h-0 from global;
+    composes: invisible from global;
+    composes: opacity-0 from global;
+    composes: overflow-hidden from global;
+}
+
+.formErrorContainer {
+    composes: pt-sm from global;
+}
+
+.first_name,
+.last_name {
+    composes: col-end-span2 from global;
+
+    composes: lg_col-end-span1 from global;
+}
+
+.country,
+.street1,
+.street2,
+.address_check,
+.city,
+.region,
+.postal_code,
+.phone_number {
+    composes: col-end-span2 from global;
+}

package/src/intercept.js

@@ -220,4 +220,18 @@ module.exports = targets => {
     routesArray.push(...routes);
     return routesArray;
   });
+
+  targets.of('@magento/venia-ui').checkoutPagePaymentTypes.tap(checkoutPagePaymentTypes =>
+    checkoutPagePaymentTypes.add({
+      paymentCode: 'xendit',
+      importPath: '@riosst100/pwa-marketplace/src/components/Xendit/xendit.js'
+    })
+  );
+
+  // targets.of('@magento/venia-ui').summaryPagePaymentTypes.tap(summaryPagePaymentTypes =>
+  //   summaryPagePaymentTypes.add({
+  //     paymentCode: 'xendit',
+  //     importPath: '@riosst100/pwa-marketplace/src/components/Xendit/summary.js'
+  //   })
+  // );
 };