@riosst100/pwa-marketplace 2.5.1 → 2.5.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@riosst100/pwa-marketplace",
   "author": "riosst100@gmail.com",
-  "version": "2.5.1",
+  "version": "2.5.2",
   "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/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'
+  //   })
+  // );
 };

package/src/overwrites/venia-ui/lib/components/CheckoutPage/OrderSummary/orderSummary.js

@@ -16,7 +16,7 @@ const OrderSummary = props => {
                 />
             </h2>
             <PriceSummary isUpdating={props.isUpdating} />
-            <style jsx>
+            <style jsx="true">
                 {`
                     li[class*="priceSummary-lineItems"] span:first-child {
                         margin-top: 0;

package/src/overwrites/venia-ui/lib/components/CheckoutPage/PaymentInformation/paymentMethods.js

@@ -37,6 +37,12 @@ const PaymentMethods = props => {
         return null;
     }
 
+    console.log('payments')
+    console.log(payments)
+
+    console.log('availablePaymentMethods')
+    console.log(availablePaymentMethods)
+
     const radios = availablePaymentMethods
         .map(({ code, title }) => {
             // If we don't have an implementation for a method type, ignore it.
@@ -74,6 +80,9 @@ const PaymentMethods = props => {
         })
         .filter(paymentMethod => !!paymentMethod);
 
+    console.log('radios != [] harusny')
+    console.log(radios)
+
     const noPaymentMethodMessage = !radios.length ? (
         <div className={classes.payment_errors}>
             <span>

package/src/talons/Xendit/useXendit.js

@@ -0,0 +1,574 @@
+import { useCallback, useEffect, useState, useMemo } from 'react';
+import { useFormState, useFormApi } from 'informed';
+import { useQuery, useApolloClient, useMutation } from '@apollo/client';
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+
+import { useCartContext } from '@magento/peregrine/lib/context/cart';
+
+import DEFAULT_OPERATIONS from './xendit.gql';
+import { useGoogleReCaptcha } from '@magento/peregrine/lib/hooks/useGoogleReCaptcha';
+
+const getRegion = region => {
+    return region.region_id || region.label || region.code;
+};
+
+/**
+ * Maps address response data from GET_BILLING_ADDRESS and GET_SHIPPING_ADDRESS
+ * queries to input names in the billing address form.
+ * {@link creditCard.gql.js}.
+ *
+ * @param {ShippingCartAddress|BillingCartAddress} rawAddressData query data
+ */
+export const mapAddressData = rawAddressData => {
+    if (rawAddressData) {
+        const {
+            firstName,
+            lastName,
+            city,
+            postcode,
+            phoneNumber,
+            street,
+            country,
+            region
+        } = rawAddressData;
+
+        return {
+            firstName,
+            lastName,
+            city,
+            postcode,
+            phoneNumber,
+            street1: street[0],
+            street2: street[1] || '',
+            country: country.code,
+            region: getRegion(region)
+        };
+    } else {
+        return {};
+    }
+};
+
+/**
+ * Talon to handle Credit Card payment method.
+ *
+ * @param {Boolean} props.shouldSubmit boolean value which represents if a payment nonce request has been submitted
+ * @param {Function} props.onSuccess callback to invoke when the a payment nonce has been generated
+ * @param {Function} props.onReady callback to invoke when the braintree dropin component is ready
+ * @param {Function} props.onError callback to invoke when the braintree dropin component throws an error
+ * @param {Function} props.resetShouldSubmit callback to reset the shouldSubmit flag
+ * @param {DocumentNode} props.operations.getBillingAddressQuery query to fetch billing address from cache
+ * @param {DocumentNode} props.operations.getIsBillingAddressSameQuery query to fetch is billing address same checkbox value from cache
+ * @param {DocumentNode} props.operations.getPaymentNonceQuery query to fetch payment nonce saved in cache
+ * @param {DocumentNode} props.operations.setBillingAddressMutation mutation to update billing address on the cart
+ * @param {DocumentNode} props.operations.setCreditCardDetailsOnCartMutation mutation to update payment method and payment nonce on the cart
+ *
+ * @returns {
+ *   errors: Map<String, Error>,
+ *   shouldRequestPaymentNonce: Boolean,
+ *   onPaymentError: Function,
+ *   onPaymentSuccess: Function,
+ *   onPaymentReady: Function,
+ *   isBillingAddressSame: Boolean,
+ *   isLoading: Boolean,
+ *   stepNumber: Number,
+ *   initialValues: {
+ *      firstName: String,
+ *      lastName: String,
+ *      city: String,
+ *      postcode: String,
+ *      phoneNumber: String,
+ *      street1: String,
+ *      street2: String,
+ *      country: String,
+ *      state: String,
+ *      isBillingAddressSame: Boolean
+ *   },
+ *   shippingAddressCountry: String,
+ *   shouldTeardownDropin: Boolean,
+ *   resetShouldTeardownDropin: Function
+ * }
+ */
+export const useXendit = props => {
+    const {
+        onSuccess,
+        onReady,
+        onError,
+        shouldSubmit,
+        resetShouldSubmit
+    } = props;
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+
+    const {
+        getBillingAddressQuery,
+        getIsBillingAddressSameQuery,
+        getPaymentNonceQuery,
+        getShippingAddressQuery,
+        setBillingAddressMutation,
+        setCreditCardDetailsOnCartMutation
+    } = operations;
+
+    const {
+        recaptchaLoading,
+        generateReCaptchaData,
+        recaptchaWidgetProps
+    } = useGoogleReCaptcha({
+        currentForm: 'BRAINTREE',
+        formAction: 'braintree'
+    });
+
+    /**
+     * Definitions
+     */
+
+    const [isDropinLoading, setDropinLoading] = useState(true);
+    const [shouldRequestPaymentNonce, setShouldRequestPaymentNonce] = useState(
+        false
+    );
+    const [shouldTeardownDropin, setShouldTeardownDropin] = useState(false);
+    /**
+     * `stepNumber` depicts the state of the process flow in credit card
+     * payment flow.
+     *
+     * `0` No call made yet
+     * `1` Billing address mutation initiated
+     * `2` Braintree nonce requested
+     * `3` Payment information mutation initiated
+     * `4` All mutations done
+     */
+    const [stepNumber, setStepNumber] = useState(0);
+
+    const client = useApolloClient();
+    const formState = useFormState();
+    const { validate: validateBillingAddressForm } = useFormApi();
+    const [{ cartId }] = useCartContext();
+
+    const isLoading =
+        isDropinLoading ||
+        recaptchaLoading ||
+        (stepNumber >= 1 && stepNumber <= 3);
+
+    const { data: billingAddressData } = useQuery(getBillingAddressQuery, {
+        skip: !cartId,
+        variables: { cartId }
+    });
+    const { data: shippingAddressData } = useQuery(getShippingAddressQuery, {
+        skip: !cartId,
+        variables: { cartId }
+    });
+    const { data: isBillingAddressSameData } = useQuery(
+        getIsBillingAddressSameQuery,
+        { skip: !cartId, variables: { cartId } }
+    );
+    const [
+        updateBillingAddress,
+        {
+            error: billingAddressMutationError,
+            called: billingAddressMutationCalled,
+            loading: billingAddressMutationLoading
+        }
+    ] = useMutation(setBillingAddressMutation);
+
+    const [
+        updateCCDetails,
+        {
+            error: ccMutationError,
+            called: ccMutationCalled,
+            loading: ccMutationLoading
+        }
+    ] = useMutation(setCreditCardDetailsOnCartMutation);
+
+    const shippingAddressCountry = shippingAddressData
+        ? shippingAddressData.cart.shippingAddresses[0].country.code
+        : DEFAULT_COUNTRY_CODE;
+    const isBillingAddressSame = formState.values.isBillingAddressSame;
+
+    const initialValues = useMemo(() => {
+        const isBillingAddressSame = isBillingAddressSameData
+            ? isBillingAddressSameData.cart.isBillingAddressSame
+            : true;
+
+        let billingAddress = {};
+        /**
+         * If billing address is same as shipping address, do
+         * not auto fill the fields.
+         */
+        if (billingAddressData && !isBillingAddressSame) {
+            if (billingAddressData.cart.billingAddress) {
+                const {
+                    // eslint-disable-next-line no-unused-vars
+                    __typename,
+                    ...rawBillingAddress
+                } = billingAddressData.cart.billingAddress;
+                billingAddress = mapAddressData(rawBillingAddress);
+            }
+        }
+
+        return { isBillingAddressSame, ...billingAddress };
+    }, [isBillingAddressSameData, billingAddressData]);
+
+    /**
+     * Helpers
+     */
+
+    /**
+     * This function sets the boolean isBillingAddressSame
+     * in cache for future use. We use cache because there
+     * is no way to save this on the cart in remote.
+     */
+    const setIsBillingAddressSameInCache = useCallback(() => {
+        client.writeQuery({
+            query: getIsBillingAddressSameQuery,
+            data: {
+                cart: {
+                    __typename: 'Cart',
+                    id: cartId,
+                    isBillingAddressSame
+                }
+            }
+        });
+    }, [client, cartId, getIsBillingAddressSameQuery, isBillingAddressSame]);
+
+    /**
+     * This function sets the billing address on the cart using the
+     * shipping address.
+     */
+    const setShippingAddressAsBillingAddress = useCallback(() => {
+        var shippingAddress = shippingAddressData
+            ? mapAddressData(shippingAddressData.cart.shippingAddresses[0])
+            : {};
+
+        shippingAddress.region =
+            shippingAddress.region == null ? '' : shippingAddress.region;
+
+        updateBillingAddress({
+            variables: {
+                cartId,
+                ...shippingAddress,
+                sameAsShipping: true
+            }
+        });
+    }, [updateBillingAddress, shippingAddressData, cartId]);
+
+    /**
+     * This function sets the billing address on the cart using the
+     * information from the form.
+     */
+    const setBillingAddress = useCallback(() => {
+        const {
+            firstName,
+            lastName,
+            country,
+            street1,
+            street2,
+            city,
+            region,
+            postcode,
+            phoneNumber
+        } = formState.values;
+
+        updateBillingAddress({
+            variables: {
+                cartId,
+                firstName,
+                lastName,
+                country,
+                street1,
+                street2: street2 || '',
+                city,
+                region: getRegion(region),
+                postcode,
+                phoneNumber,
+                sameAsShipping: false
+            }
+        });
+    }, [formState.values, updateBillingAddress, cartId]);
+
+    /**
+     * This function sets the payment nonce details in the cache.
+     * We use cache because there is no way to save this information
+     * on the cart in the remote.
+     *
+     * We do not save the nonce code because it is a PII.
+     */
+    const setPaymentDetailsInCache = useCallback(
+        braintreeNonce => {
+            /**
+             * We dont save the nonce code due to PII,
+             * we only save the subset of details.
+             */
+            const { details, description, type } = braintreeNonce;
+            client.writeQuery({
+                query: getPaymentNonceQuery,
+                data: {
+                    cart: {
+                        __typename: 'Cart',
+                        id: cartId,
+                        paymentNonce: {
+                            details,
+                            description,
+                            type
+                        }
+                    }
+                }
+            });
+        },
+        [cartId, client, getPaymentNonceQuery]
+    );
+
+    /**
+     * This function saves the nonce code from braintree
+     * on the cart along with the payment method used in
+     * this case `braintree`.
+     */
+    const updateCCDetailsOnCart = useCallback(
+        async braintreeNonce => {
+            try {
+                const { nonce } = braintreeNonce;
+                const reCaptchaData = await generateReCaptchaData();
+
+                await updateCCDetails({
+                    variables: {
+                        cartId,
+                        paymentMethod: 'braintree',
+                        paymentNonce: nonce
+                    },
+                    ...reCaptchaData
+                });
+            } catch (error) {
+                // Error is logged by apollo link - no need to double log.
+            }
+        },
+        [updateCCDetails, cartId, generateReCaptchaData]
+    );
+
+    /**
+     * Function to be called by the braintree dropin when the
+     * nonce generation is successful.
+     */
+    const onPaymentSuccess = useCallback(
+        braintreeNonce => {
+            setPaymentDetailsInCache(braintreeNonce);
+            /**
+             * Updating payment braintreeNonce and selected payment method on cart.
+             */
+            updateCCDetailsOnCart(braintreeNonce);
+            setStepNumber(3);
+        },
+        [setPaymentDetailsInCache, updateCCDetailsOnCart]
+    );
+
+    /**
+     * Function to be called by the braintree dropin when the
+     * nonce generation is not successful.
+     */
+    const onPaymentError = useCallback(
+        error => {
+            setStepNumber(0);
+            setShouldRequestPaymentNonce(false);
+            resetShouldSubmit();
+            if (onError) {
+                onError(error);
+            }
+        },
+        [onError, resetShouldSubmit]
+    );
+
+    /**
+     * Function to be called by the braintree dropin when the
+     * credit card component has loaded successfully.
+     */
+    const onPaymentReady = useCallback(() => {
+        setDropinLoading(false);
+        setStepNumber(0);
+        if (onReady) {
+            onReady();
+        }
+    }, [onReady]);
+
+    /**
+     * Function to be called by braintree dropin when the payment
+     * teardown is done successfully before re creating the new dropin.
+     */
+    const resetShouldTeardownDropin = useCallback(() => {
+        setShouldTeardownDropin(false);
+    }, []);
+
+    /**
+     * Effects
+     */
+
+    /**
+     * Step 1 effect
+     *
+     * User has clicked the update button
+     */
+    useEffect(() => {
+        try {
+            if (shouldSubmit) {
+                /**
+                 * Validate billing address fields and only process with
+                 * submit if there are no errors.
+                 *
+                 * We do this because the user can click Review Order button
+                 * without fillig in all fields and the form submission
+                 * happens manually. The informed Form component validates
+                 * on submission but that only happens when we use the onSubmit
+                 * prop. In this case we are using manually submission because
+                 * of the nature of the credit card submission process.
+                 */
+                validateBillingAddressForm();
+
+                const hasErrors = Object.keys(formState.errors).length;
+
+                if (!hasErrors) {
+                    setStepNumber(1);
+                    if (isBillingAddressSame) {
+                        setShippingAddressAsBillingAddress();
+                    } else {
+                        setBillingAddress();
+                    }
+                    setIsBillingAddressSameInCache();
+                } else {
+                    throw new Error('Errors in the billing address form');
+                }
+            }
+        } catch (err) {
+            if (process.env.NODE_ENV !== 'production') {
+                console.error(err);
+            }
+            setStepNumber(0);
+            resetShouldSubmit();
+            setShouldRequestPaymentNonce(false);
+        }
+    }, [
+        shouldSubmit,
+        isBillingAddressSame,
+        setShippingAddressAsBillingAddress,
+        setBillingAddress,
+        setIsBillingAddressSameInCache,
+        resetShouldSubmit,
+        validateBillingAddressForm,
+        formState.errors
+    ]);
+
+    /**
+     * Step 2 effect
+     *
+     * Billing address mutation has completed
+     */
+    useEffect(() => {
+        try {
+            const billingAddressMutationCompleted =
+                billingAddressMutationCalled && !billingAddressMutationLoading;
+
+            if (
+                billingAddressMutationCompleted &&
+                !billingAddressMutationError
+            ) {
+                /**
+                 * Billing address save mutation is successful
+                 * we can initiate the braintree nonce request
+                 */
+                setStepNumber(2);
+                setShouldRequestPaymentNonce(true);
+            }
+
+            if (
+                billingAddressMutationCompleted &&
+                billingAddressMutationError
+            ) {
+                /**
+                 * Billing address save mutation is not successful.
+                 * Reset update button clicked flag.
+                 */
+                throw new Error('Billing address mutation failed');
+            }
+        } catch (err) {
+            if (process.env.NODE_ENV !== 'production') {
+                console.error(err);
+            }
+            setStepNumber(0);
+            resetShouldSubmit();
+            setShouldRequestPaymentNonce(false);
+        }
+    }, [
+        billingAddressMutationError,
+        billingAddressMutationCalled,
+        billingAddressMutationLoading,
+        resetShouldSubmit
+    ]);
+
+    /**
+     * Step 3 effect
+     *
+     * Credit card save mutation has completed
+     */
+    useEffect(() => {
+        /**
+         * Saved billing address, payment method and payment nonce on cart.
+         *
+         * Time to call onSuccess.
+         */
+
+        try {
+            const ccMutationCompleted = ccMutationCalled && !ccMutationLoading;
+
+            if (ccMutationCompleted && !ccMutationError) {
+                if (onSuccess) {
+                    onSuccess();
+                }
+                resetShouldSubmit();
+                setStepNumber(4);
+            }
+
+            if (ccMutationCompleted && ccMutationError) {
+                /**
+                 * If credit card mutation failed, reset update button clicked so the
+                 * user can click again and set `stepNumber` to 0.
+                 */
+                throw new Error('Credit card nonce save mutation failed.');
+            }
+        } catch (err) {
+            if (process.env.NODE_ENV !== 'production') {
+                console.error(err);
+            }
+            setStepNumber(0);
+            resetShouldSubmit();
+            setShouldRequestPaymentNonce(false);
+            setShouldTeardownDropin(true);
+        }
+    }, [
+        ccMutationCalled,
+        ccMutationLoading,
+        onSuccess,
+        setShouldRequestPaymentNonce,
+        resetShouldSubmit,
+        ccMutationError
+    ]);
+
+    const errors = useMemo(
+        () =>
+            new Map([
+                ['setBillingAddressMutation', billingAddressMutationError],
+                ['setCreditCardDetailsOnCartMutation', ccMutationError]
+            ]),
+        [billingAddressMutationError, ccMutationError]
+    );
+
+    return {
+        errors,
+        onPaymentError,
+        onPaymentSuccess,
+        onPaymentReady,
+        isBillingAddressSame,
+        isLoading,
+        shouldRequestPaymentNonce,
+        stepNumber,
+        initialValues,
+        shippingAddressCountry,
+        shouldTeardownDropin,
+        resetShouldTeardownDropin,
+        recaptchaWidgetProps
+    };
+};

package/src/talons/Xendit/xendit.js

@@ -0,0 +1,165 @@
+import { gql } from '@apollo/client';
+
+import { PriceSummaryFragment } from '@magento/peregrine/lib/talons/CartPage/PriceSummary/priceSummaryFragments.gql';
+import { AvailablePaymentMethodsFragment } from '@magento/peregrine/lib/talons/CheckoutPage/PaymentInformation/paymentInformation.gql';
+
+export const GET_IS_BILLING_ADDRESS_SAME = gql`
+    query getIsBillingAddressSame($cartId: String!) {
+        cart(cart_id: $cartId) @client {
+            id
+            isBillingAddressSame
+        }
+    }
+`;
+
+export const GET_PAYMENT_NONCE = gql`
+    query getPaymentNonce($cartId: String!) {
+        cart(cart_id: $cartId) @client {
+            id
+            paymentNonce
+        }
+    }
+`;
+
+export const GET_BILLING_ADDRESS = gql`
+    query getBillingAddress($cartId: String!) {
+        cart(cart_id: $cartId) {
+            id
+            billingAddress: billing_address {
+                firstName: firstname
+                lastName: lastname
+                country {
+                    code
+                }
+                street
+                city
+                region {
+                    code
+                    label
+                    region_id
+                }
+                postcode
+                phoneNumber: telephone
+            }
+        }
+    }
+`;
+
+export const GET_SHIPPING_ADDRESS = gql`
+    query getSelectedShippingAddress($cartId: String!) {
+        cart(cart_id: $cartId) {
+            id
+            shippingAddresses: shipping_addresses {
+                firstName: firstname
+                lastName: lastname
+                country {
+                    code
+                }
+                street
+                city
+                region {
+                    code
+                    label
+                    region_id
+                }
+                postcode
+                phoneNumber: telephone
+            }
+        }
+    }
+`;
+
+export const SET_BILLING_ADDRESS = gql`
+    mutation setBillingAddress(
+        $cartId: String!
+        $firstName: String!
+        $lastName: String!
+        $street1: String!
+        $street2: String
+        $city: String!
+        $region: String!
+        $postcode: String!
+        $country: String!
+        $phoneNumber: String!
+    ) {
+        setBillingAddressOnCart(
+            input: {
+                cart_id: $cartId
+                billing_address: {
+                    address: {
+                        firstname: $firstName
+                        lastname: $lastName
+                        street: [$street1, $street2]
+                        city: $city
+                        region: $region
+                        postcode: $postcode
+                        country_code: $country
+                        telephone: $phoneNumber
+                        save_in_address_book: false
+                    }
+                }
+            }
+        ) {
+            cart {
+                id
+                billing_address {
+                    firstname
+                    lastname
+                    country {
+                        code
+                    }
+                    street
+                    city
+                    region {
+                        code
+                        label
+                        region_id
+                    }
+                    postcode
+                    telephone
+                }
+                ...PriceSummaryFragment
+                ...AvailablePaymentMethodsFragment
+            }
+        }
+    }
+    ${PriceSummaryFragment}
+    ${AvailablePaymentMethodsFragment}
+`;
+
+export const SET_CC_DETAILS_ON_CART = gql`
+    mutation setSelectedPaymentMethod(
+        $cartId: String!
+        $paymentNonce: String!
+    ) {
+        setPaymentMethodOnCart(
+            input: {
+                cart_id: $cartId
+                payment_method: {
+                    code: "braintree"
+                    braintree: {
+                        payment_method_nonce: $paymentNonce
+                        is_active_payment_token_enabler: false
+                    }
+                }
+            }
+        ) {
+            cart {
+                id
+                selected_payment_method {
+                    code
+                    title
+                }
+            }
+        }
+    }
+`;
+
+export default {
+    getBillingAddressQuery: GET_BILLING_ADDRESS,
+    getIsBillingAddressSameQuery: GET_IS_BILLING_ADDRESS_SAME,
+    getPaymentNonceQuery: GET_PAYMENT_NONCE,
+    getShippingAddressQuery: GET_SHIPPING_ADDRESS,
+    setBillingAddressMutation: SET_BILLING_ADDRESS,
+    setCreditCardDetailsOnCartMutation: SET_CC_DETAILS_ON_CART
+};