refactor: Organize the files by domain, app, infra and ui folders (#20)

src/application/README.md

@@ -0,0 +1,6 @@
+## Application
+
+* This layer contains application logic.
+* It only knows of the Domain Layer and the Infrastructure Layer. 
+* The services are implemented with [Vue Composable Functions](https://vueschool.io/articles/vuejs-tutorials/what-is-a-vue-js-composable/)
+

src/composable-functions/useShoppingInit.ts → src/application/services/useShoppingInit.ts

@@ -1,7 +1,6 @@
 import { onMounted } from "vue";
-import { useStore } from "@/store";
-
-import { ACTIONS } from "@/enums/shopping";
+import { useStore } from "@/infrastructure/store";
+import { ACTIONS } from "@/infrastructure/store/shopping/shopping.types";
 
 export default function useShoppingInit() {
   const store = useStore();

src/composable-functions/useShoppingProducts.ts → src/application/services/useShoppingProducts.ts

@@ -1,10 +1,11 @@
 import { computed } from "vue";
-import { useStore } from "@/store";
+import { useStore } from "@/infrastructure/store";
 
-import { Product } from "@/domain/checkout/checkout.types";
-
-import PRODUCT_CODE from "@/enums/product";
-import { ACTIONS, GETTERS } from "@/enums/shopping";
+import { Product, PRODUCT_CODE } from "@/domain/checkout/checkout.types";
+import {
+  ACTIONS,
+  GETTERS
+} from "@/infrastructure/store/shopping/shopping.types";
 
 export default function useShopping() {
   const store = useStore();

src/composable-functions/useShoppingSummary.ts → src/application/services/useShoppingSummary.ts

@@ -1,8 +1,8 @@
 import { computed } from "vue";
-import { useStore } from "@/store";
+import { useStore } from "@/infrastructure/store";
 
-import { GETTERS } from "@/enums/shopping";
 import { TotalDiscountItem } from "@/domain/checkout/checkout.types";
+import { GETTERS } from "@/infrastructure/store/shopping/shopping.types";
 
 export default function useShopping() {
   const store = useStore();

src/domain/README.md

@@ -0,0 +1,5 @@
+## Domain
+
+* This layer is for domain/business logic.
+* Only business logic lives in the Domain layer
+* It is just pure TypeScript code with no frameworks/libraries whatsoever here.

src/domain/checkout/checkout.service.ts

@@ -1,5 +1,5 @@
-import PRODUCT_CODE from "@/enums/product";
-import DISCOUNT_CODE from "@/enums/discount";
+import { PRODUCT_CODE } from "@/domain/checkout/checkout.types";
+import { DISCOUNT_CODE } from "@/domain/discount-rules/discount.rules.types";
 
 import {
   PricingRule,

src/domain/checkout/checkout.types.ts

@@ -1,5 +1,11 @@
-import PRODUCT_CODE from "@/enums/product";
-import DISCOUNT_CODE from "@/enums/discount";
+import { DISCOUNT_CODE } from "@/domain/discount-rules/discount.rules.types";
+
+export enum PRODUCT_CODE {
+  CAP = "CAP",
+  TSHIRT = "TSHIRT",
+  MUG = "MUG",
+  EMPTY = "EMPTY"
+}
 
 export interface PricingRule {
   code: PRODUCT_CODE;

src/domain/discount-rules/discount.rules.factory.ts

@@ -1,5 +1,5 @@
-import PRODUCT_CODE from "@/enums/product";
-import DISCOUNT_CODE from "@/enums/discount";
+import { PRODUCT_CODE } from "@/domain/checkout/checkout.types";
+import { DISCOUNT_CODE } from "@/domain/discount-rules/discount.rules.types";
 
 import { ScannerItem } from "@/domain/checkout/checkout.types";
 import { DiscountRule } from "@/domain/discount-rules/discount.rules.types";

src/domain/discount-rules/discount.rules.service.ts

@@ -1,4 +1,4 @@
-import DISCOUNT_CODE from "@/enums/discount";
+import { DISCOUNT_CODE } from "@/domain/discount-rules/discount.rules.types";
 
 import { DiscountRule } from "@/domain/discount-rules/discount.rules.types";
 import { discountFactory } from "@/domain/discount-rules/discount.rules.factory";

src/domain/discount-rules/discount.rules.types.ts

@@ -1,8 +1,12 @@
-import PRODUCT_CODE from "@/enums/product";
-import DISCOUNT_CODE from "@/enums/discount";
-
+import { PRODUCT_CODE } from "@/domain/checkout/checkout.types";
 import { ScannerItem } from "@/domain/checkout/checkout.types";
 
+export enum DISCOUNT_CODE {
+  TWO_X_ONE = "TWO_X_ONE",
+  BULK = "BULK",
+  PROMO_CODE = "PROMO_CODE"
+}
+
 export interface DiscountRule {
   code: DISCOUNT_CODE;
   literal: string;

src/infrastructure/README.md

@@ -0,0 +1,7 @@
+## Infrastructure
+
+* This layer is responsible for communications with the outside world (sending requests/receiving responses) and storing local data.
+* HTTP: Fetch API
+* State Management: Vuex
+
+

src/api/index.ts → src/infrastructure/http/index.ts

@@ -5,7 +5,7 @@ import { Product } from "@/domain/checkout/checkout.types";
  */
 function mockProducts() {
   return import(
-    /* webpackChunkName: "async-mock-products" */ "@/api/mocks/products.json"
+    /* webpackChunkName: "async-mock-products" */ "@/infrastructure/http/mocks/products.json"
   );
 }
 

src/store/index.ts → src/infrastructure/store/index.ts

@@ -5,8 +5,8 @@ import {
   useStore as baseUseStore
 } from "vuex";
 
-import { StateRoot } from "@/store/types";
-import Shopping from "@/store/shopping";
+import { StateRoot } from "@/infrastructure/store/store.types";
+import Shopping from "@/infrastructure/store/shopping";
 
 export const key: InjectionKey<VuexStore<StateRoot>> = Symbol();
 

src/store/shopping/actions.ts → src/infrastructure/store/shopping/actions.ts

@@ -1,16 +1,19 @@
 import { ActionContext, ActionTree } from "vuex";
 
-import API from "@/api";
+import http from "@/infrastructure/http";
 import CheckoutService from "@/domain/checkout/checkout.service";
 import DiscountRulesService from "@/domain/discount-rules/discount.rules.service";
 
-import { StateRoot } from "@/store/types";
-import { ShoppingActions } from "@/store/shopping/types";
+import { StateRoot } from "@/infrastructure/store/store.types";
+import { ShoppingActions } from "@/infrastructure/store/shopping/shopping.types";
 import { Product, PricingRule } from "@/domain/checkout/checkout.types";
 import { DiscountRule } from "@/domain/discount-rules/discount.rules.types";
 
-import PRODUCT_CODE from "@/enums/product";
-import { ACTIONS, MUTATION } from "@/enums/shopping";
+import { PRODUCT_CODE } from "@/domain/checkout/checkout.types";
+import {
+  ACTIONS,
+  MUTATION
+} from "@/infrastructure/store/shopping/shopping.types";
 
 let checkoutService: CheckoutService;
 const discountRulesService = new DiscountRulesService();
@@ -27,7 +30,7 @@ const actions: ActionTree<StateRoot, StateRoot> & ShoppingActions = {
     const { commit } = context;
 
     try {
-      const products: Product[] = await API.products();
+      const products: Product[] = await http.products();
 
       const pricingRules: PricingRule[] = products.map(product => ({
         code: product.code,

src/store/shopping/getters.ts → src/infrastructure/store/shopping/getters.ts

@@ -1,9 +1,9 @@
 import { GetterTree } from "vuex";
 
-import { GETTERS } from "@/enums/shopping";
+import { GETTERS } from "@/infrastructure/store/shopping/shopping.types";
 
-import { StateRoot } from "@/store/types";
-import { ShoppingGetters } from "@/store/shopping/types";
+import { StateRoot } from "@/infrastructure/store/store.types";
+import { ShoppingGetters } from "@/infrastructure/store/shopping/shopping.types";
 import { Product, TotalDiscountItem } from "@/domain/checkout/checkout.types";
 
 const getters: GetterTree<StateRoot, StateRoot> & ShoppingGetters = {

src/infrastructure/store/shopping/index.ts

@@ -0,0 +1,18 @@
+import { StoreOptions } from "vuex";
+
+import { StateRoot } from "@/infrastructure/store/store.types";
+
+import initialState from "@/infrastructure/store/shopping/initialState";
+import actions from "@/infrastructure/store/shopping/actions";
+import getters from "@/infrastructure/store/shopping/getters";
+import mutations from "@/infrastructure/store/shopping/mutations";
+
+const Shopping: StoreOptions<StateRoot> = {
+  strict: true,
+  state: initialState,
+  actions,
+  mutations,
+  getters
+};
+
+export default Shopping;

src/store/shopping/initialState.ts → src/infrastructure/store/shopping/initialState.ts

@@ -1,4 +1,4 @@
-import { StateRoot } from "@/store/types";
+import { StateRoot } from "@/infrastructure/store/store.types";
 import { Product, Summary } from "@/domain/checkout/checkout.types";
 
 const products: Product[] = [];

src/store/shopping/mutations.ts → src/infrastructure/store/shopping/mutations.ts

@@ -1,10 +1,9 @@
 import { MutationTree } from "vuex";
 
-import { MUTATION } from "@/enums/shopping";
-
-import { StateRoot } from "@/store/types";
-import { ShoppingMutations } from "@/store/shopping/types";
+import { StateRoot } from "@/infrastructure/store/store.types";
+import { MUTATION } from "@/infrastructure/store/shopping/shopping.types";
 import { Product, TotalDiscountItem } from "@/domain/checkout/checkout.types";
+import { ShoppingMutations } from "@/infrastructure/store/shopping/shopping.types";
 
 const mutations: MutationTree<StateRoot> & ShoppingMutations = {
   [MUTATION.SAVE_PRODUCTS](state: StateRoot, payload: Product[]) {

src/store/shopping/types.ts → src/infrastructure/store/shopping/shopping.types.ts

@@ -1,10 +1,33 @@
 import { ActionContext } from "vuex";
 
-import { StateRoot } from "@/store/types";
+import { StateRoot } from "@/infrastructure/store/store.types";
 import { Product, TotalDiscountItem } from "@/domain/checkout/checkout.types";
 
-import PRODUCT_CODE from "@/enums/product";
-import { ACTIONS, MUTATION, GETTERS } from "@/enums/shopping";
+import { PRODUCT_CODE } from "@/domain/checkout/checkout.types";
+
+export enum MUTATION {
+  SAVE_PRODUCTS = "SAVE_PRODUCTS",
+  SAVE_TOTAL_COST = "SAVE_TOTAL_COST",
+  SAVE_TOTAL_ITEMS = "SAVE_TOTAL_ITEMS",
+  SAVE_DISCOUNTS_APPLIED = "SAVE_DISCOUNTS_APPLIED",
+  SAVE_TOTAL_COST_WITH_DISCOUNTS = "SAVE_TOTAL_COST_WITH_DISCOUNTS"
+}
+
+export enum ACTIONS {
+  INIT_SHOPPING_CART = "INIT_SHOPPING_CART",
+  SCAN_PRODUCT = "SCAN_PRODUCT",
+  REMOVE_PRODUCT = "REMOVE_PRODUCT"
+}
+
+export enum GETTERS {
+  PRODUCTS = "PRODUCTS",
+  TOTAL_COST = "TOTAL_COST",
+  TOTAL_ITEMS = "TOTAL_ITEMS",
+  DISCOUNTS_APPLIED = "DISCOUNTS_APPLIED",
+  TOTAL_COST_WITH_DISCOUNTS = "TOTAL_COST_WITH_DISCOUNTS",
+  HAS_TOTAL_COST = "HAS_TOTAL_COST",
+  HAS_DISCOUNTS_APPLIED = "HAS_DISCOUNTS_APPLIED"
+}
 
 type AugmentedActionContext = {
   commit<K extends keyof ShoppingMutations>(

src/store/types.ts → src/infrastructure/store/store.types.ts

@@ -3,7 +3,7 @@ import {
   ShoppingMutations,
   ShoppingActions,
   ShoppingGetters
-} from "@/store/shopping/types";
+} from "@/infrastructure/store/shopping/shopping.types";
 import { Store as VuexStore, CommitOptions, DispatchOptions } from "vuex";
 
 export interface StateRoot {

src/main.ts

@@ -1,7 +1,7 @@
 import { createApp } from "vue";
 
-import App from "@/App.vue";
-import { store, key } from "@/store";
+import App from "@/ui/App.vue";
+import { store, key } from "@/infrastructure/store";
 
 createApp(App)
   .use(store, key)

src/App.vue → src/ui/App.vue

@@ -7,12 +7,12 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import useShoppingInit from "@/composable-functions/useShoppingInit";
-import Products from "@/views/Products.vue";
-import Summary from "@/views/Summary.vue";
+import Products from "@/ui/views/Products.vue";
+import Summary from "@/ui/views/Summary.vue";
+import useShoppingInit from "@/application/services/useShoppingInit";
 
-import "./assets/styles/reset.css";
-import "./assets/styles/commons.css";
+import "@/ui/assets/styles/reset.css";
+import "@/ui/assets/styles/commons.css";
 
 export default defineComponent({
   name: "App",

src/ui/README.md

@@ -0,0 +1,6 @@
+## User Interface
+
+* This layer is directly coupled to the Application Layer.
+* This layer is basically made of [Vue Single File Components](https://vuejs.org/v2/guide/single-file-components.html).
+
+

src/components/Checkout.vue → src/ui/components/Checkout.vue

@@ -38,8 +38,8 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import useShoppingSummary from "@/composable-functions/useShoppingSummary";
-import Title from "@/components/Title.vue";
+import useShoppingSummary from "@/application/services/useShoppingSummary";
+import Title from "@/ui/components/Title.vue";
 
 export default defineComponent({
   name: "Checkout",

src/components/Modal.vue → src/ui/components/Modal.vue

@@ -22,8 +22,8 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import EVENT from "@/enums/event";
-import ShopButton from "@/components/core/Button.vue";
+import EVENT from "@/ui/types/event";
+import ShopButton from "@/ui/components/core/Button.vue";
 
 const { HIDE_MODAL } = EVENT;