feat: dummy checkout (#357)

* feat: enable placing an order for logged in user; redirect to success page

* fix: global date format (minutes)

* refactor(theme): split ReviewOrder into smaller parts

* feat(client): place an order for logged in and guest users

* feat(composables): refactor isLoggedIn, handle placing an order

* refactor(defaul-theme): split views into components, delete unused imports

* docs(client): createGuestOrder and createOrder added

api/helpers.api.md

@@ -74,10 +74,8 @@ export const getFilterSearchCriteria: (selectedFilters: any) => any[];
 // @alpha (undocumented)
 export function getNavigationRoutes(navigationElements: NavigationElement[]): NavigationRoute[];
 
-// @alpha (undocumented)
-export function getProductMainImageUrl({ product }?: {
-    product?: Product;
-}): string;
+// @alpha
+export function getProductMainImageUrl(product: Product): string;
 
 // @alpha (undocumented)
 export function getProductMediaGallery({ product }?: {

api/shopware-6-client.api.md

@@ -51,6 +51,12 @@ export interface ConfigChangedArgs {
 // @alpha
 export function createCustomerAddress(params: CustomerAddressParam): Promise<string>;
 
+// @alpha
+export function createGuestOrder(email: string): Promise<Order>;
+
+// @alpha
+export function createOrder(): Promise<Order>;
+
 // @alpha (undocumented)
 export interface CustomerAddressParam extends Partial<CustomerAddress> {
 }

packages/composables/__tests__/useCart.spec.ts

@@ -17,14 +17,24 @@ const mockedShopwareClient = shopwareClient as jest.Mocked<
 
 describe("Composables - useCart", () => {
   const stateCart: Ref<Object | null> = ref(null);
+  const stateUser: Ref<Object | null> = ref(null);
   beforeEach(() => {
     // mock vuex store
     jest.resetAllMocks();
     stateCart.value = null;
+    stateUser.value = null;
     setStore({
-      getters: reactive({ getCart: computed(() => stateCart.value) }),
+      getters: reactive({
+        getCart: computed(() => stateCart.value),
+        getUser: computed(() => stateUser.value)
+      }),
       commit: (name: string, value: any) => {
-        stateCart.value = value;
+        if (name === "SET_CART") {
+          stateCart.value = value;
+        }
+        if (name === "SET_USER") {
+          stateUser.value = value;
+        }
       }
     });
   });
@@ -101,9 +111,56 @@ describe("Composables - useCart", () => {
         expect(totalPrice.value).toEqual(123);
       });
     });
+    describe("subtotal", () => {
+      it("should show items totalPrice as 0", () => {
+        const { subtotal } = useCart();
+        expect(subtotal.value).toEqual(0);
+      });
+
+      it("should show 0 on empty price object", () => {
+        stateCart.value = {
+          price: {}
+        };
+        const { subtotal } = useCart();
+        expect(subtotal.value).toEqual(0);
+      });
+
+      it("should show correct subtotal price", () => {
+        stateCart.value = {
+          price: { positionPrice: 123 }
+        };
+        const { subtotal } = useCart();
+        expect(subtotal.value).toEqual(123);
+      });
+    });
   });
 
   describe("methods", () => {
+    describe("placeOrder", () => {
+      it("should assign the appropriate error if user email is unknown or is not logged in", async () => {
+        const { error, placeOrder } = useCart();
+        await placeOrder();
+        expect(error.value).toStrictEqual({
+          message: "Order cannot be placed"
+        });
+      });
+      it("should try to place an order if user is logged in and return the order object", async () => {
+        mockedShopwareClient.createOrder.mockResolvedValueOnce({
+          id: "some-order-id-123456"
+        } as any);
+        stateUser.value = {
+          id: "user-id-8754321",
+          email: "test@email.com"
+        } as any;
+
+        const { error, placeOrder } = useCart();
+        const result = await placeOrder();
+        expect(mockedShopwareClient.createOrder).toBeCalledTimes(1);
+        expect(mockedShopwareClient.createOrder).toBeCalledWith();
+        expect(error.value).toBeFalsy();
+        expect(result).toHaveProperty("id");
+      });
+    });
     describe("refreshCart", () => {
       it("should correctly refresh the cart", async () => {
         const { count, refreshCart } = useCart();

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

@@ -3,16 +3,20 @@ import {
   getCart,
   addProductToCart,
   removeCartItem,
-  changeCartItemQuantity
+  changeCartItemQuantity,
+  createOrder
 } from "@shopware-pwa/shopware-6-client";
 import { getStore } from "../..";
+import { useUser } from "../useUser";
+import { Order } from "@shopware-pwa/shopware-6-client/src/interfaces/models/checkout/order/Order";
 import { ClientApiError } from "@shopware-pwa/shopware-6-client/src/interfaces/errors/ApiError";
 
 /**
  * @alpha
  */
 export const useCart = (): any => {
   let vuexStore = getStore();
+  const { isLoggedIn } = useUser();
   const loading: Ref<boolean> = ref(false);
   const error: Ref<any> = ref(null);
 
@@ -45,6 +49,22 @@ export const useCart = (): any => {
     vuexStore.commit("SET_CART", result);
   }
 
+  /**
+   * todo: move this method to the separated composable after the implementation of dummy checkout.
+   */
+  async function placeOrder(): Promise<Order | undefined> {
+    if (isLoggedIn.value) {
+      return createOrder();
+    }
+
+    // TODO: related https://github.com/DivanteLtd/shopware-pwa/issues/375
+    // return createGuestOrder(guestUserEmail);
+
+    error.value = {
+      message: "Order cannot be placed"
+    };
+  }
+
   const cart = computed(() => {
     return vuexStore.getters.getCart;
   });
@@ -66,6 +86,11 @@ export const useCart = (): any => {
     return cartPrice || 0;
   });
 
+  const subtotal = computed(() => {
+    const cartPrice = cart.value?.price?.positionPrice;
+    return cartPrice || 0;
+  });
+
   return {
     addProduct,
     cart,
@@ -76,6 +101,8 @@ export const useCart = (): any => {
     loading,
     refreshCart,
     removeProduct,
-    totalPrice
+    totalPrice,
+    subtotal,
+    placeOrder
   };
 };

packages/composables/src/hooks/useUser.ts

@@ -231,7 +231,7 @@ export const useUser = (): UseUser => {
     return true;
   };
 
-  const isLoggedIn = computed(() => !!user.value);
+  const isLoggedIn = computed(() => !!user.value?.id);
 
   return {
     login,

packages/default-theme/.gitignore

@@ -88,3 +88,6 @@ sw.*
 
 # Vim swap files
 *.swp
+
+cypress/screenshots
+cypress/videos

packages/default-theme/components/SwCart.vue

@@ -26,7 +26,7 @@
               <SfPrice :regular="totalPrice | price" class="sf-price--big" />
             </template>
           </SfProperty>
-          <SfButton class="sf-button--full-width">Go to checkout</SfButton>
+          <SfButton class="sf-button--full-width" aria-label="go-to-checkout" @click="goToCheckout()">Go to checkout</SfButton>
         </div>
         <div v-else key="empty-cart" class="empty-cart">
           <div class="empty-cart__banner">
@@ -49,6 +49,7 @@
 import { SfSidebar, SfButton, SfProperty, SfPrice } from '@storefront-ui/vue'
 import { useCart, useCartSidebar } from '@shopware-pwa/composables'
 import SwCartProduct from './SwCartProduct'
+import { PAGE_CHECKOUT } from '../helpers/pages'
 
 export default {
   name: 'Cart',
@@ -76,7 +77,13 @@ export default {
       if (!price) return
       return `$${price}`
     }
-  }
+  },
+  methods: {
+    goToCheckout() {
+      this.toggleSidebar();
+      return this.$router.push(PAGE_CHECKOUT);
+    }
+  },
 }
 </script>
 <style lang="scss" scoped>

packages/default-theme/components/SwCartProduct.vue

@@ -59,7 +59,7 @@ export default {
 
     const quantity = ref(props.product.quantity)
     const productImage = computed(() =>
-      getProductMainImageUrl({ product: props.product })
+      getProductMainImageUrl(props.product)
     )
 
     watch(quantity, async (qty) => {
@@ -78,7 +78,36 @@ export default {
       removeProduct,
       quantity
     }
-  }
+  },
+  computed: {
+    getName() {
+      return getProductName({ product: this.product })
+    },
+    getProductRating() {
+      return this.product && this.product.ratingAverage
+    },
+    // should be replaced with prettyUrl attribute when pretty urls are included in product entity
+    getRouterLink() {
+      return getProductUrl(this.product)
+    },
+    getRegularPrice() {
+      const regular = getProductRegularPrice({ product: this.product })
+      const special = getProductSpecialPrice(this.product)
+      // temporary fix to show proper regular price
+      return '$' + (regular > special ? regular : special)
+    },
+    getSpecialPrice() {
+      const special = getProductSpecialPrice(this.product)
+      const regular = getProductRegularPrice({ product: this.product })
+      // temporary fix to show proper special price
+      return special && '$' + (special < regular ? special : regular)
+    },
+    getImageUrl() {
+      return (
+        getProductMainImageUrl(this.product)
+      )
+    }
+  },
 }
 </script>
 <style lang="scss" scoped>

packages/default-theme/components/SwProductCard.vue

@@ -85,7 +85,7 @@ export default {
     },
     getImageUrl() {
       return (
-        getProductMainImageUrl({ product: this.product }) ||
+        getProductMainImageUrl(this.product) ||
         require('~/assets/productB.jpg')
       )
     }

packages/default-theme/components/TopNavigation.vue

@@ -80,6 +80,7 @@ import {
   useNavigation
 } from '@shopware-pwa/composables'
 import SwLoginModal from './modals/SwLoginModal'
+import { PAGE_ACCOUNT } from '../helpers/pages'
 
 export default {
   components: { SfHeader, SfCircleIcon, SfBadge, SwLoginModal, SfImage },
@@ -113,7 +114,7 @@ export default {
   },
   methods: {
     async userIconClick() {
-      if (this.isLoggedIn) this.$router.push('account')
+      if (this.isLoggedIn) this.$router.push(PAGE_ACCOUNT)
       else this.toggleModal()
     }
   }