feat(default-theme): promotion code functionality

docs/guide/FEATURELIST.md

@@ -79,7 +79,7 @@ sidebar: auto
  * Go to Checkout button
 
 ### Checkout / Payment
-
+ * Add/Remove promotion codes
  * Select shipping address
  * Select billing address
  * Select payment & shipping method

packages/composables/__tests__/useCart.spec.ts

@@ -139,6 +139,31 @@ describe("Composables - useCart", () => {
  expect(subtotal.value).toEqual(123);
  });
  });
+ describe("appliedPromotionCodes", () => {
+ it("should be empty array on not loaded cart", () => {
+ stateCart.value = null;
+ const { appliedPromotionCodes } = useCart(rootContextMock);
+ expect(appliedPromotionCodes.value).toEqual([]);
+ });
+
+ it("should return an array", () => {
+ stateCart.value = {};
+ const { appliedPromotionCodes } = useCart(rootContextMock);
+ expect(appliedPromotionCodes.value).toEqual([]);
+ });
+
+ it("should return only promotion items", () => {
+ stateCart.value = {
+ lineItems: [
+ { quantity: 2, type: "product" },
+ { quantity: 3, type: "product" },
+ { quantity: 1, type: "promotion" },
+ ],
+ };
+ const { appliedPromotionCodes } = useCart(rootContextMock);
+ expect(appliedPromotionCodes.value.length).toEqual(1);
+ });
+ });
  });
 
  describe("methods", () => {
@@ -212,6 +237,47 @@ describe("Composables - useCart", () => {
  });
  });
 
+ describe("addPromotionCode", () => {
+ it("should add promotion code to cart", async () => {
+ const { appliedPromotionCodes, addPromotionCode } = useCart(
+ rootContextMock
+ );
+ expect(appliedPromotionCodes.value).toEqual([]);
+ mockedShopwareClient.addPromotionCode.mockResolvedValueOnce({
+ lineItems: [{ quantity: 1, type: "promotion" }],
+ } as any);
+ await addPromotionCode("test-code");
+ expect(appliedPromotionCodes.value.length).toEqual(1);
+ });
+ });
+
+ describe("removePromotionCode", () => {
+ it("should remove promotion code from cart", async () => {
+ const { appliedPromotionCodes, removePromotionCode } = useCart(
+ rootContextMock
+ );
+ stateCart.value = {
+ lineItems: [{ quantity: 1, type: "promotion" }],
+ };
+ expect(appliedPromotionCodes.value.length).toEqual(1);
+ mockedShopwareClient.removeCartItem.mockResolvedValueOnce({
+ lineItems: [],
+ } as any);
+ await removePromotionCode({ id: "qwe" });
+ expect(appliedPromotionCodes.value.length).toEqual(0);
+ });
+
+ it("should invoke client with correct params", async () => {
+ const { removeProduct } = useCart(rootContextMock);
+ mockedShopwareClient.removeCartItem.mockResolvedValueOnce({} as any);
+ await removeProduct({ id: "qwe" });
+ expect(mockedShopwareClient.removeCartItem).toBeCalledWith(
+ "qwe",
+ rootContextMock.$shopwareApiInstance
+ );
+ });
+ });
+
  describe("changeProductQuantity", () => {
  it("should change product quantity in cart", async () => {
  const { count, changeProductQuantity } = useCart(rootContextMock);

packages/composables/src/hooks/useCart/index.ts

@@ -2,23 +2,32 @@ import { ref, Ref, computed } from "@vue/composition-api";
 import {
  getCart,
  addProductToCart,
+ addPromotionCode,
  removeCartItem,
  changeCartItemQuantity,
 } from "@shopware-pwa/shopware-6-client";
 import { ClientApiError } from "@shopware-pwa/commons/interfaces/errors/ApiError";
 import { Cart } from "@shopware-pwa/commons/interfaces/models/checkout/cart/Cart";
 import { Product } from "@shopware-pwa/commons/interfaces/models/content/product/Product";
 import { LineItem } from "@shopware-pwa/commons/interfaces/models/checkout/cart/line-item/LineItem";
-import { getApplicationContext } from "@shopware-pwa/composables";
+import {
+ getApplicationContext,
+ useNotifications,
+} from "@shopware-pwa/composables";
 import { ApplicationVueContext } from "../../appContext";
 
+const TYPE_PROMOTION = "promotion";
+const TYPE_PRODUCT = "product";
+
 /**
  * interface for {@link useCart} composable
  *
  * @beta
  */
 export interface IUseCart {
  addProduct: ({ id, quantity }: { id: string; quantity?: number }) => void;
+ addPromotionCode: (promoCode: string) => void;
+ appliedPromotionCodes: Readonly<Ref<Readonly<LineItem[]>>>;
  cart: Readonly<Ref<Readonly<Cart>>>;
  cartItems: Readonly<Ref<Readonly<LineItem[]>>>;
  changeProductQuantity: ({
@@ -33,6 +42,7 @@ export interface IUseCart {
  loading: Readonly<Ref<Readonly<boolean>>>;
  refreshCart: () => void;
  removeProduct: ({ id }: Partial<Product>) => void;
+ removePromotionCode: ({ id }: Partial<Product>) => void;
  totalPrice: Readonly<Ref<Readonly<number>>>;
  subtotal: Readonly<Ref<Readonly<number>>>;
 }
@@ -51,6 +61,8 @@ export const useCart = (rootContext: ApplicationVueContext): IUseCart => {
  const loading: Ref<boolean> = ref(false);
  const error: Ref<any> = ref(null);
 
+ const { pushSuccess, pushError } = useNotifications(rootContext);
+
  async function refreshCart(): Promise<void> {
  loading.value = true;
  try {
@@ -85,6 +97,39 @@ export const useCart = (rootContext: ApplicationVueContext): IUseCart => {
  vuexStore.commit("SET_CART", result);
  }
 
+ async function submitPromotionCode(promoCode: string) {
+ try {
+ const result = await addPromotionCode(promoCode, apiInstance);
+ vuexStore.commit("SET_CART", result);
+
+ // It's strange that success also ends up as an error in the API response
+ const err = <any>Object.values(result.errors)[0];
+ switch (err.messageKey) {
+ case "promotion-discount-added":
+ pushSuccess(rootContext.$t("Promotion code added successfully"));
+ break;
+ case "promotion-not-found":
+ pushError(rootContext.$t("Promotion code does not exist"));
+ break;
+ default:
+ pushError(err.message.toString());
+ }
+ } catch (e) {
+ const err: ClientApiError = e;
+ error.value = err.message;
+ }
+ }
+
+ async function removePromotionCode(lineItem: Product) {
+ await removeProduct(lineItem);
+ }
+
+ const appliedPromotionCodes = computed(() => {
+ return cartItems.value.filter(
+ (cartItem) => cartItem.type === TYPE_PROMOTION
+ );
+ });
+
  const cart: Readonly<Ref<Readonly<Cart>>> = computed(() => {
  return vuexStore.getters.getCart;
  });
@@ -96,7 +141,7 @@ export const useCart = (rootContext: ApplicationVueContext): IUseCart => {
  const count = computed(() => {
  return cartItems.value.reduce(
  (accumulator: number, lineItem: LineItem) =>
- lineItem.type === "product"
+ lineItem.type === TYPE_PRODUCT
  ? lineItem.quantity + accumulator
  : accumulator,
  0
@@ -116,6 +161,8 @@ export const useCart = (rootContext: ApplicationVueContext): IUseCart => {
 
  return {
  addProduct,
+ addPromotionCode: submitPromotionCode,
+ appliedPromotionCodes,
  cart,
  cartItems,
  changeProductQuantity,
@@ -124,6 +171,7 @@ export const useCart = (rootContext: ApplicationVueContext): IUseCart => {
  loading,
  refreshCart,
  removeProduct,
+ removePromotionCode,
  totalPrice,
  subtotal,
  };

packages/default-theme/components/SwPromoCode.vue

@@ -0,0 +1,104 @@
+<template>
+ <div class="promo-code">
+ <div class="promo-code__input-wrapper">
+ <SwInput
+ v-model="promoCode"
+ name="promoCode"
+ :label="$t('Enter promo code')"
+ class="sf-input--filled promo-code__input"
+ @keyup.enter="addPromotionCode(promoCode)"
+ />
+ <SfCircleIcon
+ class="promo-code__circle-icon"
+ icon="check"
+ @click="addPromotionCode(promoCode)"
+ />
+ </div>
+ <div v-if="showPromotionCodes" class="applied-codes">
+ <SfHeading
+ :title="$t('Applied promo codes:')"
+ :level="4"
+ class="sf-heading--left sf-heading--no-underline title"
+ />
+ <ul class="applied-codes__list">
+ <SwPromoCodeItem
+ v-for="appliedPromotionCode in appliedPromotionCodes"
+ :key="appliedPromotionCode.id"
+ :code="appliedPromotionCode"
+ :remove-promotion-code="removePromotionCode"
+ />
+ </ul>
+ </div>
+ </div>
+</template>
+
+<script>
+import SwInput from "@/components/atoms/SwInput"
+import { SfCircleIcon, SfHeading } from "@storefront-ui/vue"
+import SwPromoCodeItem from "@/components/SwPromoCodeItem"
+import { useCart } from "@shopware-pwa/composables"
+import { computed } from "@vue/composition-api"
+
+export default {
+ name: "SwPromoCode",
+ setup(props, { root }) {
+ const {
+ appliedPromotionCodes,
+ addPromotionCode,
+ removePromotionCode,
+ } = useCart(root)
+
+ const showPromotionCodes = computed(
+ () => appliedPromotionCodes.value.length > 0
+ )
+
+ return {
+ appliedPromotionCodes,
+ addPromotionCode,
+ removePromotionCode,
+ showPromotionCodes,
+ }
+ },
+ components: {
+ SwPromoCodeItem,
+ SfHeading,
+ SwInput,
+ SfCircleIcon,
+ },
+ data: () => {
+ return {
+ promoCode: "",
+ }
+ },
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/scss/variables";
+
+.promo-code {
+ padding: var(--spacer-lg) 0 var(--spacer-base) 0;
+ &__input-wrapper {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+
+ .promo-code__circle-icon {
+ --button-size: 2rem;
+ --icon-size: 0.6875rem;
+ }
+
+ .promo-code__input {
+ --input-background: var(--c-white);
+ flex: 1;
+ margin: 0 var(--spacer-lg) 0 0;
+ }
+ }
+ .applied-codes {
+ &__list {
+ list-style: none;
+ padding: 0;
+ }
+ }
+}
+</style>

packages/default-theme/components/SwPromoCodeItem.vue

@@ -0,0 +1,41 @@
+<template>
+ <li class="promo-code-item">
+ <span>{{ code.label }}</span>
+ <SfCircleIcon
+ class="promo-code-item__remove"
+ icon="cross"
+ @click="removePromotionCode(code)"
+ />
+ </li>
+</template>
+
+<script>
+import { SfCircleIcon } from "@storefront-ui/vue"
+
+export default {
+ name: "SwPromoCodeItem",
+ components: {
+ SfCircleIcon,
+ },
+ props: {
+ code: {
+ type: Object,
+ },
+ removePromotionCode: {
+ type: Function,
+ },
+ },
+}
+</script>
+
+<style lang="scss" scoped>
+.promo-code-item {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ &__remove {
+ --button-size: 2rem;
+ --icon-size: 0.6875rem;
+ }
+}
+</style>