feat: add configurable/bundle products to cart

.changeset/little-bottles-switch.md

@@ -0,0 +1,8 @@
+---
+"@vue-storefront/magento-api": minor
+"@vue-storefront/magento-sdk": minor
+---
+
+[ADDED] addBundleProductsToCart method to add one or more bundle products to the specified cart. 
+[ADDED] addConfigurableProductsToCart method to add one or more configurable products to the specified cart.
+

packages/api-client/src/api/addBundleProductsToCart/addBundleProductsToCart.ts

@@ -1,6 +1,4 @@
-import gql from "graphql-tag";
-
-export default gql`
+export default `
   mutation addBundleProductsToCart($input: AddBundleProductsToCartInput) {
     addBundleProductsToCart(input: $input) {
       cart {

packages/api-client/src/api/addBundleProductsToCart/index.ts

@@ -6,7 +6,7 @@ import type {
   AddBundleProductsToCartMutationVariables,
   CustomHeaders,
 } from "@vue-storefront/magento-types";
-
+import gql from "graphql-tag";
 import addBundleProductsToCart from "./addBundleProductsToCart";
 import { Context } from "../../types/context";
 import getHeaders from "../getHeaders";
@@ -25,7 +25,9 @@ export default async (
   });
 
   return context.client.mutate<any, AddBundleProductsToCartMutationVariables>({
-    mutation: addBundleProductsToCartGQL.query,
+    mutation: gql`
+      ${addBundleProductsToCartGQL.query}
+    `,
     variables: addBundleProductsToCartGQL.variables,
     context: {
       headers: getHeaders(context, customHeaders),

packages/api-client/src/api/addConfigurableProductsToCart/addConfigurableProductsToCart.ts

@@ -1,7 +1,5 @@
-import gql from "graphql-tag";
-
 /** GraphQL Mutation that adds configurable products to shopping cart */
-export default gql`
+export default `
   mutation addConfigurableProductsToCart($input: AddConfigurableProductsToCartInput) {
     addConfigurableProductsToCart(input: $input) {
       cart {

packages/api-client/src/api/addConfigurableProductsToCart/index.ts

@@ -5,6 +5,7 @@ import {
   AddConfigurableProductsToCartMutation,
   AddConfigurableProductsToCartMutationVariables,
 } from "@vue-storefront/magento-types";
+import gql from "graphql-tag";
 import type { CustomHeaders } from "@vue-storefront/magento-types";
 import type { Context } from "../../types/context";
 import addConfigurableProductsToCartMutation from "./addConfigurableProductsToCart";
@@ -30,7 +31,9 @@ export default async function addConfigurableProductsToCart(
     },
   });
   return context.client.mutate<any, AddConfigurableProductsToCartMutationVariables>({
-    mutation: addConfigurableProductsToCartGQL.query,
+    mutation: gql`
+      ${addConfigurableProductsToCartGQL.query}
+    `,
     variables: addConfigurableProductsToCartGQL.variables,
     context: {
       headers: getHeaders(context, customHeaders),

packages/sdk/__tests__/integration/__config__/customQueries/addBundleProductsToCart/index.ts

@@ -0,0 +1,13 @@
+export const addBundleProductsToCart = ({ variables, metadata }: { variables: any; metadata: any }) => {
+  return {
+    variables,
+    query: `
+      mutation addBundleProductsToCart($input: AddBundleProductsToCartInput) {
+        addBundleProductsToCart(input: $input) {
+          cart {
+            ${metadata.fields}
+          }
+        }
+      }`,
+  };
+};

packages/sdk/__tests__/integration/__config__/customQueries/addConfigurableProductsToCart/index.ts

@@ -0,0 +1,13 @@
+export const addConfigurableProductsToCart = ({ variables, metadata }: { variables: any; metadata: any }) => {
+  return {
+    variables,
+    query: `
+      mutation addConfigurableProductsToCart($input: AddConfigurableProductsToCartInput) {
+        addConfigurableProductsToCart(input: $input) {
+          cart {
+            ${metadata.fields}
+          }
+        }
+      }`,
+  };
+};

packages/sdk/__tests__/integration/__config__/customQueries/jest.customQueries.ts

@@ -39,6 +39,8 @@ import { setPaymentMethodOnCart } from './setPaymentMethodOnCart';
 import { updateCartItems } from './updateCartItems';
 import { generateCustomerToken } from './generateCustomerToken';
 import { route } from './route';
+import { addConfigurableProductsToCart } from './addConfigurableProductsToCart';
+import { addBundleProductsToCart } from './addBundleProductsToCart';
 
 export const customQueries = {
   'apply-coupon-to-cart-custom-query': applyCouponToCart,
@@ -82,4 +84,6 @@ export const customQueries = {
   'store-config-custom-query': storeConfig,
   'route-custom-query': route,
   'generate-customer-token-custom-query': generateCustomerToken,
+  'add-configurable-products-to-cart-custom-query': addConfigurableProductsToCart,
+  'add-bundle-products-to-cart-custom-query': addBundleProductsToCart,
 };

packages/sdk/__tests__/integration/__config__/jest.const.ts

@@ -4,6 +4,10 @@ export const TEST_USER_PASSWORD = '9uvPv!Vvn2!Uaz.yNy4a';
 export const TEST_CART_ID = 'pCS0ykep1l3wGlPKSyWLJq5fb1DxIQcp';
 export const TEST_COUPON_CODE = 'integration-tests';
 export const TEST_PRODUCT_SKU = 'WSH12';
+export const TEST_CONF_SKU_PARENT = 'MH01';
+export const TEST_CONF_SKU_VARIANT = 'MH01-XS-Black';
+export const TEST_BUNDLE_SKU = '24-WG080';
+
 export const TEST_ADDRESS = {
   firstname: 'John',
   lastname: 'Doe',

packages/sdk/__tests__/integration/__nock-fixtures__/[SDK][Integration-Tests]-addBundleProductsToCart-should-add-product-to-cart

@@ -0,0 +1,103 @@
+[
+    {
+        "scope": "https://magento2-instance.vuestorefront.io:443",
+        "method": "POST",
+        "path": "/graphql",
+        "body": {
+            "operationName": "addBundleProductsToCart",
+            "variables": {
+                "input": {
+                    "cart_id": "pCS0ykep1l3wGlPKSyWLJq5fb1DxIQcp",
+                    "cart_items": [
+                        {
+                            "data": {
+                                "quantity": 1,
+                                "sku": "24-WG080"
+                            },
+                            "bundle_options": [
+                                {
+                                    "id": 1,
+                                    "quantity": 1,
+                                    "value": [
+                                        "1"
+                                    ]
+                                },
+                                {
+                                    "id": 2,
+                                    "quantity": 1,
+                                    "value": [
+                                        "4"
+                                    ]
+                                },
+                                {
+                                    "id": 3,
+                                    "quantity": 1,
+                                    "value": [
+                                        "5"
+                                    ]
+                                },
+                                {
+                                    "id": 4,
+                                    "quantity": 1,
+                                    "value": [
+                                        "8"
+                                    ]
+                                }
+                            ]
+                        }
+                    ]
+                }
+            },
+            "query": "mutation addBundleProductsToCart($input: AddBundleProductsToCartInput) {\n  addBundleProductsToCart(input: $input) {\n    cart {\n      id\n      email\n      is_virtual\n      applied_coupons {\n        code\n        __typename\n      }\n      prices {\n        subtotal_excluding_tax {\n          value\n          __typename\n        }\n        subtotal_including_tax {\n          value\n          __typename\n        }\n        applied_taxes {\n          amount {\n            value\n            __typename\n          }\n          label\n          __typename\n        }\n        discounts {\n          amount {\n            value\n            __typename\n          }\n          label\n          __typename\n        }\n        grand_total {\n          value\n          __typename\n        }\n        __typename\n      }\n      items {\n        uid\n        product {\n          uid\n          __typename\n          sku\n          name\n          stock_status\n          only_x_left_in_stock\n          rating_summary\n          thumbnail {\n            url\n            position\n            disabled\n            label\n            __typename\n          }\n          url_key\n          url_rewrites {\n            url\n            __typename\n          }\n          price_range {\n            maximum_price {\n              final_price {\n                currency\n                value\n                __typename\n              }\n              regular_price {\n                currency\n                value\n                __typename\n              }\n              __typename\n            }\n            minimum_price {\n              final_price {\n                currency\n                value\n                __typename\n              }\n              regular_price {\n                currency\n                value\n                __typename\n              }\n              __typename\n            }\n            __typename\n          }\n          categories {\n            uid\n            name\n            url_suffix\n            url_path\n            breadcrumbs {\n              category_name\n              category_url_path\n              __typename\n            }\n            __typename\n          }\n          review_count\n          reviews {\n            items {\n              average_rating\n              ratings_breakdown {\n                name\n                value\n                __typename\n              }\n              __typename\n            }\n            __typename\n          }\n        }\n        prices {\n          row_total {\n            value\n            __typename\n          }\n          row_total_including_tax {\n            value\n            __typename\n          }\n          total_item_discount {\n            value\n            __typename\n          }\n          __typename\n        }\n        quantity\n        ... on ConfigurableCartItem {\n          configurable_options {\n            configurable_product_option_uid\n            option_label\n            configurable_product_option_value_uid\n            value_label\n            __typename\n          }\n          configured_variant {\n            sku\n            thumbnail {\n              url\n              __typename\n            }\n            __typename\n          }\n          __typename\n        }\n        ... on BundleCartItem {\n          bundle_options {\n            uid\n            label\n            type\n            values {\n              id\n              label\n              price\n              quantity\n              __typename\n            }\n            __typename\n          }\n          __typename\n        }\n        __typename\n      }\n      total_quantity\n      shipping_addresses {\n        firstname\n        lastname\n        street\n        city\n        company\n        region {\n          code\n          region_id\n          label\n          __typename\n        }\n        postcode\n        telephone\n        country {\n          code\n          label\n          __typename\n        }\n        selected_shipping_method {\n          carrier_code\n          carrier_title\n          method_code\n          method_title\n          amount {\n            value\n            currency\n            __typename\n          }\n          __typename\n        }\n        __typename\n      }\n      billing_address {\n        firstname\n        lastname\n        street\n        city\n        company\n        region {\n          code\n          region_id\n          label\n          __typename\n        }\n        postcode\n        telephone\n        country {\n          code\n          label\n          __typename\n        }\n        __typename\n      }\n      __typename\n    }\n    __typename\n  }\n}"
+        },
+        "status": 200,
+        "response": [
+            "1f8b0800000000000003ed5c6b739b3a13fe2b0c1fde4f8118df9399cebcb9b5cd699d367172da9ca6c3c820dbc4802888387627fffdac40d8d85c828d9df874f2a1ae41dad5ee6ab57a1e23f25bd41145e2e16f11e9fab16feb26feea12ddd7a8774d4e904b5993c6ff3774f150744eba95c9083b8a591b7f30bf7eea4ebe7dfeeb57a3df534e1fcf2f3547dc13b1850c13ba3e787dd942036c53221b36c503175183d832c51e957d0fbbff1fb09eb2462c90323cf5c170a98f40b48f4c0fef89c8714c03ebaa467c87d89e7868fba6b9273aaea1618f59e4f93d4a283255fca899be6ed80395a247d6f2804c1f8b8775a525375a7ba2aad289836d64c13db1436c3c119ff6e6e286bd8e78641ec830737efcdc1375c303636dca2e21a616fb1ed3d7aec90d254b9d897a9885ed94eb10973aceee3fc140104b1b4666d6c7f4d7da15b9d1cc1a60e12e9bdcaf6120a1c9a0d80a6df68359ee5c1f8de1df3b91453bc807364ad876311d4c966d3b2176df18f82eeacd1208ba78239fe9fa5aa9c305efd9f51decdae401095d87b854f88a024f3d4ab491ea51447db0433cbf50bbd75f4e3e410bb1cd89faa89ab84f619ed4a06394092ca160d23cdfb2903b81f836f6443af4ad9e1d642058ecb2880e2975bcc3bbfdbb7d9e8e55c9b0612c5bc3f2830fd9485cdc77894d6583401fac1be86e5f83856192c1dd3e0f00bba30df1dd3e6e1cd47bad03add7efe15eb3de6ed7da4abbd1c20d74d06b2a8d36680021f8742a7509e669a24296dbaa22df3b03164fe2196c19443e40cab0a8e9d175940619815a083b0ff539738b4d23b8ab8e60b20f21b5b9b4e43169c909a55907178f5d986f3edd4180d27acb436a99cb03deb8e655280ec345d216b6eff67b845262795270c1e4f9d772aa21f61661d1f222a5c834cb2add805d4997d7d2f7931733155633cc2024ac851e0dcbb7d4e036bbd1376c2850b34bcd775d6c6b6c8acf6eae40f7ac52c92cf9d317be8b07be89dc925ad2322fa820acd132ecb5ecaeb6e483d266e729c9b57aa911ee5e0513014db0fcf180b8065e2c8b67efe6a5ac836dbea43cbfdf3760e310a31967371d448761aac08d9e8b91aeb9509a66dbd852390e869b5cbb98e7191fb0131bf0384cb862832ee4e7b2053f7e470e4ed4056f6677131e2c987b3c53162471315706315758355bc791586dd9a64f7b495df3e067e85b0e78e9804dcfd708586ac55c39017fb2d5f760e0b11a428ec37a7423c05d73b8801eb00b9b8f1aeec4b00357a25dd953d990239d8ceda0271fe72aec385bbb623d6353bb0a86e3dd13315be814046d772d512a2b9bd2f8b38292db0c00f4290eea5d324e00dbfced2d12c8c1f139e25c14525a8de07b1cb2cbb54c029000d4e7a0640eaa7ff9b0fe0c0adb15607e2d869055e2042b34ac59f1068e357907352c04b7d503ff1fcbb4f5ef7f0d6fad47f3f354ab778c76a3337ec70a04ef1be1c613621257dccbd51bf896a97d34fd3cbd9946393053fc012a43a2ae75b189358af53801f8120c1216d1759d7bbc38bd4c71ae6b4c7129dfce2a1727a07caabd4bf8574ba47a9e733fe75600057c40ae81c2bc99931ea95697a2a0ed1a2b01ab1669492eaf588c8a61397396975806b158454b6201059c3f7ec920969dfba369e728c8e9c2e4f25bf7a3a2cc77c9731b0927c4725cec79304d427708587c63f4b2b91bf4720c6c033ebda1a2483d96c16bf1cbac5015249800ef256d2e2e795c3c8361a6762fceb7c6640160f1cb40c9ecaae4101a31d96a0f9113760d5b7231a803d5ba575af9664c4c8fc27a4a37483d1b39bf9115a79e795ab6423d5fdbee95c9e7fd518c0f7c235621fa3926e508e8fdf95a04342d550b10b6c8ab348a15e928cdabeee34434287beb7ab45882b6eddfcaa4346312ca13d3cb5800cfa0540a57b3525920927995f6e5986a7d652a547de3872f479a5f697a4a33d5034556eaeb33d55cf17ca6aab4e56aad3455ad6e98aa9e8f3bd3a3872fe1ef98dba1aae304953b6601d93e530d7deb5c5f56b6c854cf924cb5dade20530d1894546d4b3c683b4f705e88a95e9cde343ad75a1653ad5c0c5667aad5856d7384842bdfb6a1086c98a7b62a3b368dd5b45f1c8a12d5f44815a4a998094b6e28fc1c494de9bc598a5a6a807c82ba09dbb7e0ff3a2adf9e8ac2569e798aa3b0d9794ade88e91b317d23a6bb494c77880e5657b644d99225cd952da9fd616cbd3433adb5e4eafac4344f3a9f97b6e47a26a37d455a7a717abb5d5afa7a4f5043e7fe005e5a65bc74871ea13ec3685e8c990eaa17f79df4c3b92186287e38f76325f6f8f46488a6c22706f65c42848f84e806de182b0d0ae70e4ca275b73f84cf614529713a3723520559a906d2d2884b4bc3483a8396a6f55ef1a82a250e3f3e178a7b12b275c91b6344bda1e1468775cb8db4089f3422f58128d8ba3929ab7803b62d45612d651be4a56db9569ee0e56ad9ce69dd03b9f59a76ff07ceebc659e935e45bb111e7b95980ab6dffa4ee4dcc89b0b679c2ff84eebc5cacea556eddd9a6cb29d494cf4ae629ded84c9427a4b77142aa11e13d2f892bb3d158392d4f45951da7a2a5b98e7250cb611dcfb39d7cf97cbe536bcbcd62af23e4119efa8609cf6d9dd1926d919dcb46ca3338045870fb648739069ce428ed2ceca6c8cefd6d92ec7cef6e90ec30182e7def4a51d0760b26f79855af4775a61954e7f4264175165e619d919c6a5dfaf6a1d2aec47e5c7518a4136ec9203c04896c7604f293f1c73d8333eff67df8f42d244dc059696450a9aa2a359846bcd2db8839012b487abc4045688616a9600665339f4c91e2c07f80910bac7d538afa06b5b1e749f8976f3800126819dd9b23142d456e66be585c1898e76ad90aa168d4e483ec6dbaa8dd8da6dc2a76f2a534a1085fb9e0021f20250a00b941d86d4d4a7171191ff27d987fc259947f05c74fc9dc02b09b3b980695b9536b22e40422adfee7de2f7ba52712a5a171fe927b1619e78ae703e34a69500cc5a917ecf00b70988337fb6fff9f0f016863eb6569e3ea52e4199e701cbe0cc986833617e906892628d4c5542979d242a3216896c8a30c89abc8b583251b535161084d423cf8771090c45ca6758d5582b987e7291ebe27c80af7e763b06cf4ac97f5021ab88f7599bdf9f2b22e76525c0c6ceb521739cf7ad7c811169a429f103af74fa90427275fd6c1cbac39bc62bcdf7dd6c3f633d2916f2db9d9daaa6fcbbdc2d63998ff19d585980d500abca1e138acbe205d67afae70d7fa86eb51aee92f32b48320cdee9c92f079046c2250597e88dde09bc01e61f0af559151ad6014f1028f61dadd51400119309bccd03a1e04a097514e9d293efa2c4677d5a51a70045f9085124f55c0c1a3d0f4ab50db5300a729d7a8542ac1a3150a41738650ead8bd6a4de0ff029ba03e32ae30b3e2a61bcb899b04c18c0d79c265614c8fcf8a3a8ba885e990e8fc4ff700827155aebf6f22580034e0c4bc0526c40c8005340957615b289f22c41b6632c6233085bde4dfb9a93765588009b856a0fa4729d6e5be74425712dd78732c2241a2f50cd38ce5548844df126ab5845a5ccd614417029da22571f328fdef497df1a9e343efa7a77f0101b14f977b4a0000"
+        ],
+        "rawHeaders": [
+            "Server",
+            "nginx/1.14.2",
+            "Date",
+            "Thu, 04 Apr 2024 08:19:44 GMT",
+            "Content-Type",
+            "application/json",
+            "Transfer-Encoding",
+            "chunked",
+            "Connection",
+            "keep-alive",
+            "Vary",
+            "Accept-Encoding",
+            "Set-Cookie",
+            "PHPSESSID=pqgtneeuaa6qamluak8emhdh5o; expires=Thu, 04-Apr-2024 09:19:43 GMT; Max-Age=3600; path=/; domain=magento2-instance.vuestorefront.io; secure; HttpOnly; SameSite=Lax",
+            "Set-Cookie",
+            "private_content_version=20f92e7b3b5b4d2ad95ea06072ed1971; expires=Sun, 02-Apr-2034 08:19:43 GMT; Max-Age=315360000; path=/; secure; SameSite=Lax",
+            "Set-Cookie",
+            "private_content_version=53b98595a264b66e6ca48906c0cdccc7; expires=Sun, 02-Apr-2034 08:19:44 GMT; Max-Age=315360000; path=/; secure; SameSite=Lax",
+            "Set-Cookie",
+            "private_content_version=4ad1e098ac218968778d4812df8ff42b; expires=Sun, 02-Apr-2034 08:19:44 GMT; Max-Age=315360000; path=/; secure; SameSite=Lax",
+            "X-Magento-Cache-Id",
+            "b309d3e32ec01e2fccaf4dd92e430e3576b7d1135b436c3a91b354bb36cec2ec",
+            "X-Content-Type-Options",
+            "nosniff",
+            "X-XSS-Protection",
+            "1; mode=block",
+            "X-Frame-Options",
+            "SAMEORIGIN",
+            "Content-Encoding",
+            "gzip",
+            "X-Varnish",
+            "63689177",
+            "Age",
+            "0",
+            "Pragma",
+            "no-cache",
+            "Expires",
+            "-1",
+            "Cache-Control",
+            "no-store, no-cache, must-revalidate, max-age=0",
+            "Accept-Ranges",
+            "bytes"
+        ],
+        "responseIsBinary": false
+    }
+]