@magento/peregrine 12.2.0-beta.1 → 12.3.0-beta.1

package/lib/talons/CartPage/PriceSummary/useDiscountSummary.js

@@ -0,0 +1,71 @@
+import { useCallback, useState } from 'react';
+
+const DEFAULT_AMOUNT = {
+    currency: 'USD',
+    value: 0
+};
+
+/**
+ * Reduces discounts array into a single amount.
+ *
+ * @param {Array} discounts
+ */
+const getTotalDiscount = (discounts = []) => {
+    // discounts from data can be null
+    if (!discounts || !discounts.length) {
+        return DEFAULT_AMOUNT;
+    } else {
+        return {
+            currency: discounts[0].amount.currency,
+            value: discounts.reduce(
+                (acc, discount) => acc + discount.amount.value,
+                0
+            )
+        };
+    }
+};
+
+/**
+ * This talon contains the logic for the discount summary component.
+ *
+ * @param {Object} props
+ * @param {Array} props.data Discount data
+ * @returns {DiscountSummaryProps}
+ */
+export const useDiscountSummary = props => {
+    const { data: discountData } = props;
+
+    const totalDiscount = getTotalDiscount(discountData);
+
+    const [expanded, setExpanded] = useState(false);
+
+    const handleClick = useCallback(() => {
+        setExpanded(value => !value);
+    }, [setExpanded]);
+
+    return {
+        totalDiscount,
+        discountData,
+        expanded,
+        handleClick
+    };
+};
+
+/** JSDocs type definitions */
+
+/**
+ * @typedef {Object} DiscountSummaryProps
+ *
+ * @property {DiscountObject} discount Object containing discount information
+ * @property {Array} discountData Array of discounts
+ * @property {Boolean} expanded
+ * @property {Function} handleClick Click handler for toggling the expanded state
+ *
+ */
+
+/**
+ * @typedef {Object} DiscountObject
+ *
+ * @property {String} currency Currency code
+ * @property {Number} value Discount amount
+ */

package/lib/talons/CartPage/PriceSummary/usePriceSummary.js

@@ -21,6 +21,7 @@ const flattenData = data => {
         total: data.cart.prices.grand_total,
         discounts: data.cart.prices.discounts,
         giftCards: data.cart.applied_gift_cards,
+        giftOptions: data.cart.prices.gift_options,
         taxes: data.cart.prices.applied_taxes,
         shipping: data.cart.shipping_addresses
     };
@@ -86,8 +87,9 @@ export const usePriceSummary = (props = {}) => {
  *
  * @property {String} subtotal Cart subtotal (excluding tax)
  * @property {String} total Cart grand total
- * @property {Array<Object>} discounts Discounts applied to the cart
+ * @property {Array<Object>} discounts Applied discounts to the cart
  * @property {Array<Object>} giftCards Gift cards applied to the cart
+ * @property {Array<Object>} giftOptions Gift Options applied to the cart
  * @property {Array<Object>} taxes Taxes applied to the cart
  * @property {Array<Object>} shipping Shipping addresses associated with this cart
  */

package/lib/talons/CartPage/ProductListing/EditModal/__fixtures__/configurableThumbnailSource.js

@@ -0,0 +1,8 @@
+export const configurableThumbnailSourceResponse = {
+    data: {
+        storeConfig: {
+            store_code: 1,
+            configurable_thumbnail_source: 'parent'
+        }
+    }
+};

package/lib/talons/CartPage/ProductListing/EditModal/productForm.gql.js

@@ -74,7 +74,18 @@ const UPDATE_CONFIGURABLE_OPTIONS_MUTATION = gql`
     ${CartPageFragment}
 `;
 
+const GET_CONFIGURABLE_THUMBNAIL_SOURCE = gql`
+    query getConfigurableThumbnailSource {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        storeConfig {
+            store_code
+            configurable_thumbnail_source
+        }
+    }
+`;
+
 export default {
+    getConfigurableThumbnailSourceQuery: GET_CONFIGURABLE_THUMBNAIL_SOURCE,
     getConfigurableOptionsQuery: GET_CONFIGURABLE_OPTIONS,
     updateQuantityMutation: UPDATE_QUANTITY_MUTATION,
     updateConfigurableOptionsMutation: UPDATE_CONFIGURABLE_OPTIONS_MUTATION

package/lib/talons/CartPage/ProductListing/EditModal/useProductForm.js

@@ -35,6 +35,7 @@ export const useProductForm = props => {
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
 
     const {
+        getConfigurableThumbnailSourceQuery,
         getConfigurableOptionsQuery,
         updateConfigurableOptionsMutation,
         updateQuantityMutation
@@ -87,6 +88,13 @@ export const useProductForm = props => {
         }
     });
 
+    const { data: storeConfigData } = useQuery(
+        getConfigurableThumbnailSourceQuery,
+        {
+            fetchPolicy: 'cache-and-network'
+        }
+    );
+
     const handleOptionSelection = useCallback(
         (optionId, selection) => {
             const nextOptionSelections = new Map([...optionSelections]);
@@ -137,6 +145,10 @@ export const useProductForm = props => {
         }
     }, [cartItem, configItem, configurableOptionCodes, optionSelections]);
 
+    const configurableThumbnailSource = useMemo(() => {
+        return storeConfigData?.storeConfig?.configurable_thumbnail_source;
+    }, [storeConfigData]);
+
     useEffect(() => {
         let variantPrice = null;
 
@@ -208,7 +220,8 @@ export const useProductForm = props => {
         isLoading: !!loading,
         isSaving,
         isDialogOpen: cartItem !== null,
-        handleClose
+        handleClose,
+        configurableThumbnailSource
     };
 };
 
@@ -228,4 +241,5 @@ export const useProductForm = props => {
  * @property {boolean} isSaving True if the form is saving data. False otherwise.
  * @property {boolean} isDialogOpen True if the form is visible. False otherwise.
  * @property {function} handleClose A callback function for handling form closing
+ * @property {String} configurableThumbnailSource A string indicating which thumbnail should be used for configurable products
  */

package/lib/talons/CheckoutPage/OrderConfirmationPage/useCreateAccount.js

@@ -5,6 +5,7 @@ import mergeOperations from '../../../util/shallowMerge';
 import { useUserContext } from '../../../context/user';
 import { useCartContext } from '../../../context/cart';
 import { useAwaitQuery } from '../../../hooks/useAwaitQuery';
+import { useGoogleReCaptcha } from '../../../hooks/useGoogleReCaptcha';
 
 import DEFAULT_OPERATIONS from './createAccount.gql';
 
@@ -23,7 +24,8 @@ import DEFAULT_OPERATIONS from './createAccount.gql';
  *   errors: Map,
  *   handleSubmit: function,
  *   isDisabled: boolean,
- *   initialValues: object
+ *   initialValues: object,
+ *   recaptchaWidgetProps: { containerElement: function, shouldRender: boolean }
  * }}
  */
 export const useCreateAccount = props => {
@@ -62,10 +64,22 @@ export const useCreateAccount = props => {
     const fetchUserDetails = useAwaitQuery(getCustomerQuery);
     const fetchCartDetails = useAwaitQuery(getCartDetailsQuery);
 
+    const {
+        generateReCaptchaData,
+        recaptchaLoading,
+        recaptchaWidgetProps
+    } = useGoogleReCaptcha({
+        currentForm: 'CUSTOMER_CREATE',
+        formAction: 'createAccount'
+    });
+
     const handleSubmit = useCallback(
         async formValues => {
             setIsSubmitting(true);
             try {
+                // Get reCaptchaV3 Data for createAccount mutation
+                const recaptchaDataForCreateAccount = await generateReCaptchaData();
+
                 // Create the account and then sign in.
                 await createAccount({
                     variables: {
@@ -74,13 +88,19 @@ export const useCreateAccount = props => {
                         lastname: formValues.customer.lastname,
                         password: formValues.password,
                         is_subscribed: !!formValues.subscribe
-                    }
+                    },
+                    ...recaptchaDataForCreateAccount
                 });
+
+                // Get reCaptchaV3 Data for signIn mutation
+                const recaptchaDataForSignIn = await generateReCaptchaData();
+
                 const signInResponse = await signIn({
                     variables: {
                         email: formValues.customer.email,
                         password: formValues.password
-                    }
+                    },
+                    ...recaptchaDataForSignIn
                 });
                 const token = signInResponse.data.generateCustomerToken.token;
                 await setToken(token);
@@ -117,6 +137,7 @@ export const useCreateAccount = props => {
             fetchCartDetails,
             fetchCartId,
             fetchUserDetails,
+            generateReCaptchaData,
             getCartDetails,
             getUserDetails,
             onSubmit,
@@ -147,7 +168,8 @@ export const useCreateAccount = props => {
     return {
         errors,
         handleSubmit,
-        isDisabled: isSubmitting || isGettingDetails,
-        initialValues: sanitizedInitialValues
+        isDisabled: isSubmitting || isGettingDetails || recaptchaLoading,
+        initialValues: sanitizedInitialValues,
+        recaptchaWidgetProps
     };
 };

package/lib/talons/CheckoutPage/PaymentInformation/useCreditCard.js

@@ -6,6 +6,7 @@ import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
 import { useCartContext } from '../../../context/cart';
 
 import DEFAULT_OPERATIONS from './creditCard.gql';
+import { useGoogleReCaptcha } from '../../../hooks/useGoogleReCaptcha';
 
 const getRegion = region => {
     return region.region_id || region.label || region.code;
@@ -107,6 +108,15 @@ export const useCreditCard = props => {
         setCreditCardDetailsOnCartMutation
     } = operations;
 
+    const {
+        recaptchaLoading,
+        generateReCaptchaData,
+        recaptchaWidgetProps
+    } = useGoogleReCaptcha({
+        currentForm: 'BRAINTREE',
+        formAction: 'braintree'
+    });
+
     /**
      * Definitions
      */
@@ -121,9 +131,9 @@ export const useCreditCard = props => {
      * payment flow.
      *
      * `0` No call made yet
-     * `1` Billing address mutation intiated
-     * `2` Braintree nonce requsted
-     * `3` Payment information mutation intiated
+     * `1` Billing address mutation initiated
+     * `2` Braintree nonce requested
+     * `3` Payment information mutation initiated
      * `4` All mutations done
      */
     const [stepNumber, setStepNumber] = useState(0);
@@ -133,7 +143,10 @@ export const useCreditCard = props => {
     const { validate: validateBillingAddressForm } = useFormApi();
     const [{ cartId }] = useCartContext();
 
-    const isLoading = isDropinLoading || (stepNumber >= 1 && stepNumber <= 3);
+    const isLoading =
+        isDropinLoading ||
+        recaptchaLoading ||
+        (stepNumber >= 1 && stepNumber <= 3);
 
     const { data: billingAddressData } = useQuery(getBillingAddressQuery, {
         skip: !cartId,
@@ -306,17 +319,24 @@ export const useCreditCard = props => {
      * this case `braintree`.
      */
     const updateCCDetailsOnCart = useCallback(
-        braintreeNonce => {
-            const { nonce } = braintreeNonce;
-            updateCCDetails({
-                variables: {
-                    cartId,
-                    paymentMethod: 'braintree',
-                    paymentNonce: nonce
-                }
-            });
+        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]
+        [updateCCDetails, cartId, generateReCaptchaData]
     );
 
     /**
@@ -545,6 +565,7 @@ export const useCreditCard = props => {
         initialValues,
         shippingAddressCountry,
         shouldTeardownDropin,
-        resetShouldTeardownDropin
+        resetShouldTeardownDropin,
+        recaptchaWidgetProps
     };
 };

package/lib/talons/CheckoutPage/useCheckoutPage.js

@@ -14,6 +14,7 @@ import mergeOperations from '../../util/shallowMerge';
 import DEFAULT_OPERATIONS from './checkoutPage.gql.js';
 
 import CheckoutError from './CheckoutError';
+import { useGoogleReCaptcha } from '../../hooks/useGoogleReCaptcha';
 
 export const CHECKOUT_STEP = {
     SHIPPING_ADDRESS: 1,
@@ -74,6 +75,11 @@ export const useCheckoutPage = (props = {}) => {
         placeOrderMutation
     } = operations;
 
+    const { generateReCaptchaData, recaptchaWidgetProps } = useGoogleReCaptcha({
+        currentForm: 'PLACE_ORDER',
+        formAction: 'placeOrder'
+    });
+
     const [reviewOrderButtonClicked, setReviewOrderButtonClicked] = useState(
         false
     );
@@ -83,6 +89,9 @@ export const useCheckoutPage = (props = {}) => {
 
     const apolloClient = useApolloClient();
     const [isUpdating, setIsUpdating] = useState(false);
+    const [placeOrderButtonClicked, setPlaceOrderButtonClicked] = useState(
+        false
+    );
     const [activeContent, setActiveContent] = useState('checkout');
     const [checkoutStep, setCheckoutStep] = useState(
         CHECKOUT_STEP.SHIPPING_ADDRESS
@@ -227,6 +236,7 @@ export const useCheckoutPage = (props = {}) => {
                 cartId
             }
         });
+        setPlaceOrderButtonClicked(true);
         setIsPlacingOrder(true);
     }, [cartId, getOrderDetails]);
 
@@ -240,10 +250,13 @@ export const useCheckoutPage = (props = {}) => {
     useEffect(() => {
         async function placeOrderAndCleanup() {
             try {
+                const reCaptchaData = await generateReCaptchaData();
+
                 await placeOrder({
                     variables: {
                         cartId
-                    }
+                    },
+                    ...reCaptchaData
                 });
                 // Cleanup stale cart and customer info.
                 await removeCart();
@@ -257,8 +270,7 @@ export const useCheckoutPage = (props = {}) => {
                     'An error occurred during when placing the order',
                     err
                 );
-                setReviewOrderButtonClicked(false);
-                setCheckoutStep(CHECKOUT_STEP.PAYMENT);
+                setPlaceOrderButtonClicked(false);
             }
         }
 
@@ -271,6 +283,7 @@ export const useCheckoutPage = (props = {}) => {
         cartId,
         createCart,
         fetchCartId,
+        generateReCaptchaData,
         orderDetailsData,
         placeOrder,
         removeCart,
@@ -299,6 +312,7 @@ export const useCheckoutPage = (props = {}) => {
             (placeOrderData && placeOrderData.placeOrder.order.order_number) ||
             null,
         placeOrderLoading,
+        placeOrderButtonClicked,
         setCheckoutStep,
         setGuestSignInUsername,
         setIsUpdating,
@@ -312,6 +326,7 @@ export const useCheckoutPage = (props = {}) => {
         resetReviewOrderButtonClicked,
         handleReviewOrder,
         reviewOrderButtonClicked,
+        recaptchaWidgetProps,
         toggleAddressBookContent,
         toggleSignInContent
     };

package/lib/talons/CmsDynamicBlock/client-schema.graphql

@@ -0,0 +1,4 @@
+# Save cart conditions data in cache
+extend type DynamicBlocks {
+    salesRulesData: String
+}

package/lib/talons/CmsDynamicBlock/cmsDynamicBlock.gql.js

@@ -0,0 +1,113 @@
+import { gql } from '@apollo/client';
+
+export const GET_CMS_DYNAMIC_BLOCKS = gql`
+    query GetCmsDynamicBlocks(
+        $cartId: String
+        $productId: ID
+        $type: DynamicBlockTypeEnum!
+        $locations: [DynamicBlockLocationEnum]
+        $uids: [ID]!
+    ) {
+        dynamicBlocks(
+            input: {
+                cart_id: $cartId
+                product_uid: $productId
+                dynamic_block_uids: $uids
+                locations: $locations
+                type: $type
+            }
+        ) {
+            items {
+                content {
+                    html
+                }
+                uid
+            }
+            salesRulesData @client
+        }
+    }
+`;
+
+export const GET_SALES_RULES_DATA = gql`
+    query SalesRulesDataQuery($cartId: String!) {
+        cart(cart_id: $cartId) {
+            id
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
+            items {
+                uid
+                # eslint-disable-next-line @graphql-eslint/require-id-when-available
+                product {
+                    uid
+                    ... on PhysicalProductInterface {
+                        weight
+                    }
+                }
+                quantity
+                # eslint-disable-next-line @graphql-eslint/require-id-when-available
+                ... on ConfigurableCartItem {
+                    # eslint-disable-next-line @graphql-eslint/require-id-when-available
+                    configured_variant {
+                        uid
+                        ... on PhysicalProductInterface {
+                            weight
+                        }
+                    }
+                }
+            }
+            prices {
+                subtotal_excluding_tax {
+                    value
+                }
+                subtotal_including_tax {
+                    value
+                }
+            }
+            selected_payment_method {
+                code
+            }
+            shipping_addresses {
+                country {
+                    code
+                }
+                postcode
+                region {
+                    code
+                    region_id
+                }
+                street
+                selected_shipping_method {
+                    method_code
+                }
+            }
+            total_quantity
+        }
+    }
+`;
+
+export const GET_STORE_CONFIG_DATA = gql`
+    query getStoreConfigData {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        storeConfig {
+            product_url_suffix
+        }
+    }
+`;
+
+export const GET_PRODUCT_DETAIL_QUERY = gql`
+    query getProductDetailForProductPage($urlKey: String!) {
+        products(filter: { url_key: { eq: $urlKey } }) {
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
+            items {
+                uid
+                url_key
+            }
+        }
+    }
+`;
+
+export default {
+    getCmsDynamicBlocksQuery: GET_CMS_DYNAMIC_BLOCKS,
+    getSalesRulesDataQuery: GET_SALES_RULES_DATA,
+    getStoreConfigData: GET_STORE_CONFIG_DATA,
+    getProductDetailQuery: GET_PRODUCT_DETAIL_QUERY
+};