feat: cart drawer - coupon feature

packages/api-client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-storefront/shopify-api",
-  "version": "1.0.17",
+  "version": "1.0.19",
   "sideEffects": false,
   "main": "lib/index.cjs.js",
   "module": "lib/index.es.js",
@@ -15,7 +15,7 @@
   "dependencies": {
     "@nuxtjs/composition-api": "^0.30.0",
     "@vue-storefront/core": "~2.5.0",
-    "@vue-storefront/shopify-apollo": "^1.0.17",
+    "@vue-storefront/shopify-apollo": "^1.0.19",
     "graphql": "^14.5.8",
     "shopify-buy": "~2.14.0"
   },

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

@@ -2,6 +2,7 @@
 import { CustomQuery } from '@vue-storefront/core';
 import { gql } from '@apollo/client/core'
 import { print } from 'graphql'
+import { getCountry } from '../../helpers/utils'
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export default async function addToCart(context, params, _customQuery?: CustomQuery) {
   const { currentCart, product, quantity, customQuery } = params;
@@ -145,7 +146,7 @@ export default async function addToCart(context, params, _customQuery?: CustomQu
   }`
   const payload = {
     lineItems: lineItemsToAdd,
-    country: (context.res.req.cookies['vsf-locale'] === "en") ? "US" : (context.res.req.cookies['vsf-locale']).toUpperCase(),
+    country: getCountry(context),
     checkoutId: currentCart.id
   }
 

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

@@ -0,0 +1,181 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { CustomQuery } from '@vue-storefront/core';
+import { gql } from '@apollo/client/core'
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export default async function applyCoupon(context, params, _customQuery?: CustomQuery) {
+  const { currentCart, couponCode, customQuery } = params;
+  const DEFAULT_MUTATION = gql`mutation APPLY_COUPON($checkoutId: ID!, $discountCode: String!){ 
+    checkoutDiscountCodeApplyV2(checkoutId: $checkoutId, discountCode: $discountCode) {
+        checkout {
+      		appliedGiftCards{
+          id
+          amountUsedV2{
+            currencyCode
+            amount
+          }
+          balanceV2{
+            currencyCode
+            amount
+          }
+
+        }
+        completedAt
+        createdAt
+        currencyCode
+        customAttributes{
+          key
+          value
+        }
+        discountApplications(first:20){
+          edges{
+            node{
+              value{
+                ... on MoneyV2{
+                  amount
+                  currencyCode
+                }
+                ... on PricingPercentageValue{
+                  percentage
+                }
+              }
+            }
+          }
+        }
+        email
+        id
+        lineItems(first:250){
+          edges{
+            node{
+              customAttributes{
+                key
+                value
+              }
+              id
+              quantity
+              title
+              variant{
+                availableForSale
+                compareAtPriceV2{
+                  currencyCode
+                  amount
+                }
+                id
+                image{
+                  altText
+                  id
+                  height
+                  width
+                  src
+                }
+                priceV2{
+                  currencyCode
+                  amount
+                }
+                compareAtPriceV2{
+                  currencyCode
+                  amount
+                }
+                product{
+                  handle
+                  id
+                }
+                selectedOptions{
+                  name
+                  value
+                }
+                sku
+                title
+                unitPrice{
+                  currencyCode
+                  amount
+                }
+              }
+            }
+          }
+        }
+        lineItemsSubtotalPrice{
+          currencyCode
+          amount
+        }
+        note
+        order {
+          id
+        }
+        orderStatusUrl
+        paymentDueV2{
+          currencyCode
+          amount
+        }
+        ready
+        requiresShipping
+        shippingAddress {
+          id
+        }
+        shippingLine{
+          handle
+          priceV2{
+            currencyCode
+            amount
+          }
+          title
+        }
+        subtotalPriceV2{
+          currencyCode
+          amount
+        }
+        taxExempt
+        taxesIncluded
+        totalPriceV2{
+          currencyCode
+          amount
+        }
+        totalTaxV2{
+          currencyCode
+          amount
+        }
+        updatedAt
+        webUrl
+      }
+      checkoutUserErrors {
+          code
+          field
+          message
+      }
+    }
+  }`
+  const payload = {
+    discountCode: couponCode,
+    checkoutId: currentCart.id
+  }
+
+    const { checkoutDiscountCodeApplyV2 } = context.extendQuery(
+      _customQuery,
+      {
+        checkoutDiscountCodeApplyV2: {
+          mutation: DEFAULT_MUTATION,
+          payload
+        }
+      }
+    )
+
+
+  return await context.client.apolloClient.mutate({
+    mutation: checkoutDiscountCodeApplyV2.mutation,
+    variables: checkoutDiscountCodeApplyV2.payload
+  }).then((result) => {
+    const discountApplications = result.data.checkoutDiscountCodeApplyV2.checkout.discountApplications.edges.map((discountApplications => discountApplications.node));
+    const lineItems = result.data.checkoutDiscountCodeApplyV2.checkout.lineItems.edges.map((lineItem => lineItem.node));
+    const checkoutUserErrors = result.data.checkoutDiscountCodeApplyV2.checkoutUserErrors ? result.data.checkoutDiscountCodeApplyV2.checkoutUserErrors.map((UserErrors => UserErrors.message)) : [];
+    delete (result.data.checkoutDiscountCodeApplyV2.checkout.lineItems);
+    delete (result.data.checkoutDiscountCodeApplyV2.checkout.discountApplications);
+    delete (result.data.checkoutDiscountCodeApplyV2.checkoutUserErrors);
+    result.data.checkoutDiscountCodeApplyV2.checkout = {
+        ...result.data.checkoutDiscountCodeApplyV2.checkout,
+        discountApplications,
+        lineItems,
+        checkoutUserErrors,
+        couponCode
+    };
+    return result.data.checkoutDiscountCodeApplyV2;
+  });
+}

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

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { CustomQuery } from '@vue-storefront/core';
 import { gql } from '@apollo/client/core'
-import { print } from 'graphql'
+import { getCountry } from '../../helpers/utils';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
@@ -30,14 +30,17 @@ export default async function checkOut(context, checkoutId, customQuery?: Custom
           key
           value
         }
-        discountApplications(first:250){
+        discountApplications(first:20){
           edges{
             node{
-              allocationMethod
-              targetSelection
-              targetType
               value{
-                __typename
+                ... on MoneyV2{
+                  amount
+                  currencyCode
+                }
+                ... on PricingPercentageValue{
+                  percentage
+                }
               }
             }
           }
@@ -142,7 +145,7 @@ export default async function checkOut(context, checkoutId, customQuery?: Custom
 
   const payload = {
     id: checkoutId,
-    country: (context.res.req.cookies['vsf-locale'] === "en") ? "US" : (context.res.req.cookies['vsf-locale']).toUpperCase()
+    country: getCountry(context),
   }
 
   const { node } = context.extendQuery(

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

@@ -3,6 +3,7 @@
 import { CustomQuery } from '@vue-storefront/core';
 import { gql } from '@apollo/client/core'
 import { print } from 'graphql'
+import { getCountry } from '../../helpers/utils';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
@@ -132,7 +133,7 @@ export default async function getProduct(
     }`
     const variables = {
       handle: params.slug,
-      country: (context.res.req.cookies['vsf-locale'] === "en") ? "US" : (context.res.req.cookies['vsf-locale']).toUpperCase(),
+      country: getCountry(context),
       selectedOptions: chosenVariant
     }
 
@@ -495,7 +496,7 @@ export default async function getProduct(
       first: (params.limit ? params.limit : 20),
       sortKey: (params.sortBy ? params.sortBy : 'CREATED_AT'),
       reverse: false,
-      country: (context.res.req.cookies['vsf-locale'] === "en") ? "US" : (context.res.req.cookies['vsf-locale']).toUpperCase()
+      country: getCountry(context),
     }
 
     const { products } = context.extendQuery(