@viur/shop-components 0.0.1-dev.58 → 0.0.1-dev.60

package/src/main.js

@@ -0,0 +1,50 @@
+// imports
+import { createPinia } from "pinia";
+import { createI18n } from "vue-i18n";
+import {
+  de_translations,
+  en_translations,
+} from "@viur/vue-components/translations/translations";
+
+import { useCartStore } from "./stores/cart";
+import createRouterInstance from "./router/index";
+import CartNode from "./components/cart/CartNode.vue";
+import CartLeaf from "./components/cart/CartLeaf.vue";
+// import { createApp } from "vue";
+// import bone from "@viur/vue-utils/bones/edit/bone.vue";
+// import Wrapper_nested from "@viur/vue-utils/bones/edit/wrapper_nested.vue";
+
+export { useCartStore, createRouterInstance };
+
+// export all main components
+export { default as ShopOrderStepper } from "./components/ShopOrderStepper.vue";
+export { default as ShopUserData } from "./components/ShopUserData.vue";
+
+export { default as CartView } from "./components/cart/CartView.vue";
+export { default as ExampleUsage } from "./components/order/process/ExampleUsage.vue";
+export { default as ConfirmView } from "./components/ShopOrderConfirm.vue";
+export { default as OrderComplete } from "./components/ShopOrderComplete.vue";
+// export { default as UserInformation } from "./components/order/information/UserInformation.vue";
+// export { default as UserInfoMulti } from "./components/order/information/UserInfoMulti.vue";
+export { default as SelectPaymentProvider } from "./components/order/process/SelectPaymentProvider.vue";
+
+const pinia = createPinia();
+const i18n = createI18n({
+  locale: "de",
+  fallbackLocale: "en",
+  messages: {
+    en: { ...en_translations },
+    de: { ...de_translations },
+  },
+});
+
+// Create a plugin to install all components
+const ViurShopComponents = {
+  install(app) {
+    app.use(pinia);
+    app.use(i18n);
+  },
+};
+
+// Export the plugin as default
+export default ViurShopComponents;

package/src/router/index.js

@@ -0,0 +1,103 @@
+// @ts-nocheck
+import { createRouter, createWebHashHistory } from "vue-router";
+import ViewMissing from "../views/ViewMissing.vue";
+
+const default_routes = [
+  {
+    path: "/:pathMatch(.*)*",
+    name: "view_missing",
+    component: ViewMissing,
+  },
+  {
+    path: "/shop/category/:identifier",
+    name: "CategoryView",
+    component: () => import("../components/order/category/CategoryView.vue"),
+  },
+  {
+    path: "/shop/item/:item",
+    name: "itemView",
+    component: () => import("../components/order/item/ItemView.vue"),
+  },
+  {
+    path: "/shop/cart/view",
+    name: "CartView",
+    component: () => import("../components/cart/CartView.vue"),
+  },
+  {
+    path: "/shop/order/",
+    name: "OrderView",
+    component: () => import("../components/order/process/ExampleUsage.vue"),
+  },
+  {
+    path: "/shop/order/confirm",
+    name: "ConfirmView",
+    component: () => import("../components/ShopOrderConfirm.vue"),
+  },
+];4
+
+function createRouterInstance(routes, replace = false) {
+  let newRoutes = [];
+  if (replace) {
+    newRoutes = routes;
+  } else {
+    newRoutes = routes.concat(default_routes);
+  }
+
+  const router = createRouter({
+    // @ts-ignore
+    history: createWebHashHistory(import.meta.env.BASE_URL),
+    routes: newRoutes,
+  });
+
+  // router.afterEach((to, from) => {
+  //   //useUserStore().addAction();
+  // });
+
+  // router.beforeEach((to, from, next) => {
+  //   const contextStore = useContextStore();
+  //   let localContext = {};
+  //   let handlerId = to.query["_"]?.toString();
+  //   if (!handlerId) next();
+  //   if (Object.keys(contextStore.state.localContext).includes(handlerId)) {
+  //     localContext = contextStore.state.localContext[handlerId];
+  //   }
+  //   let newQuery = {
+  //     ...contextStore.state.globalContext,
+  //     ...localContext,
+  //     ...to.query,
+  //   };
+  //   if (
+  //     Object.keys(to.query).every(
+  //       (key) =>
+  //         to.query[key] === newQuery[key] &&
+  //         to.query.hasOwnProperty(key) &&
+  //         newQuery.hasOwnProperty(key),
+  //     ) &&
+  //     Object.keys(newQuery).every(
+  //       (key) =>
+  //         to.query[key] === newQuery[key] &&
+  //         to.query.hasOwnProperty(key) &&
+  //         newQuery.hasOwnProperty(key),
+  //     )
+  //   ) {
+  //     //disabled because of to much context copy and updates
+  //     // Writes query to context
+  //     /*
+  //     for (const [k, v] of Object.entries(to.query)) {
+  //       if (k.startsWith("_")) continue
+  //       if (Object.keys(contextStore.state.localContext).includes(handlerId)) {
+  //         contextStore.state.localContext[handlerId][k] = v
+  //       } else {
+  //         contextStore.state.localContext[handlerId] = { [k]: v }
+  //       }
+  //     }*/
+  //     next(); // no change
+  //   } else {
+  //     to.query = newQuery;
+  //     next(to);
+  //   }
+  // });
+  return router;
+}
+
+export default createRouterInstance;

package/src/stores/cart.js

@@ -0,0 +1,336 @@
+import { reactive, computed, watch } from "vue";
+import { defineStore } from "pinia";
+import { ViURShopClient } from "@viur/viur-shop-client";
+
+export const useCartStore = defineStore("cartstore", () => {
+  const shopClient = new ViURShopClient({
+    host_url:
+      window.location.origin === "http://localhost:8081"
+        ? "http://localhost:8080"
+        : window.location.origin,
+  });
+  let isFetching = false;
+  const waitForFetching = [];
+  const waitForFetchingResolver = [];
+  const state = reactive({
+    basketRootNode: {},
+    basket: [],
+    wishlistRootNodes: [],
+    childrenByNode: {},
+    structure: { address: {}, cart: {} },
+    paymentProviders: {},
+    billingAddressList: [],
+    shippingAddressList: [],
+    cloneBilling: true,
+    activeBillingAddress: {},
+    activeShippingAddress: {},
+    selectedPaymentProvider: {},
+    selectedPaymentProviderName: "",
+    customer: {},
+    isLoggedIn: false,
+    placeholder: "",
+  });
+
+  async function init(placeholder = "") {
+    if (!isFetching) {
+      isFetching = true;
+      await getRootNodes();
+      await getCustomer();
+      await getAddress();
+      await getBasket();
+
+      isFetching = false;
+      for (const waiter of waitForFetchingResolver) {
+        waiter();
+      }
+      waitForFetchingResolver.splice(0, waitForFetchingResolver.length);
+      waitForFetching.splice(0, waitForFetchingResolver.length);
+    } else {
+      const p = new Promise((resolve, reject) => {
+        waitForFetchingResolver.push(resolve);
+      });
+      waitForFetching.push(p);
+      return p;
+    }
+    state.placeholder = placeholder;
+  }
+
+  async function getCustomer() {
+    try {
+      const resp = await shopClient.user_view();
+      state.customer = resp;
+      state.isLoggedIn = true;
+    } catch (e) {
+      state.isLoggedIn = false;
+    }
+
+    console.log("passiert", state.customer);
+  }
+  async function getBasket() {
+    state.basket = await shopClient.basket_list();
+  }
+
+  async function getChildren(parentKey) {
+    return await shopClient.cart_list({ cart_key: parentKey });
+  }
+
+  async function getRootNodes() {
+    let resp = await shopClient.cart_list();
+
+    resp.forEach(async (rootNode) => {
+      if (rootNode.is_root_node) {
+        if (rootNode.cart_type === "basket") {
+          state.basketRootNode = rootNode;
+          const rootChildren = await getChildren(rootNode.key);
+          state.childrenByNode[rootNode.key] = rootChildren;
+        } else {
+          state.whishlistRootNodes.push(rootNode);
+        }
+      }
+    });
+  }
+
+  async function addToCart(articleKey, cartKey) {
+    let resp = await shopClient.article_add({
+      article_key: articleKey,
+      parent_cart_key: cartKey,
+    });
+
+    // await updateCart(cartKey);
+    console.log("addToCart", resp); //TODO: Errorhandling as soon as shop module works again
+  }
+
+  async function getArticleView(articleKey, cartKey) {
+    let article = await shopClient.article_view({
+      article_key: articleKey,
+      parent_cart_key: cartKey,
+    });
+
+    console.log("getArticleView", article); // ? Talk about necessarity
+  }
+
+  async function removeItem(articleKey, cartKey) {
+    let resp = await shopClient.article_remove({
+      article_key: articleKey,
+      parent_cart_key: cartKey,
+    });
+
+    console.log("remove Resp", resp); //TODO: Errorhandling as soon as shop module works again
+  }
+
+  async function updateItem(articleKey, cartKey, quantity) {
+    const resp = await shopClient.article_update({
+      article_key: articleKey,
+      parent_cart_key: cartKey,
+      quantity: quantity,
+      quantity_mode: "replace",
+    });
+
+    console.log("update Resp", resp); //TODO: Errorhandling as soon as shop module works again
+  }
+
+  // async function updateCart(cartKey) {
+  //   await getChildren(cartKey);
+  // }
+
+  async function getAddressStructure() {
+    const structure = await shopClient.address_structure();
+    state.structure.address = struct2dict(structure.addSkel);
+  }
+
+  function getDefaultAddress() {
+    if (!!state.billingAddressList) {
+      state.billingAddressList.forEach((address) => {
+        if (address.is_default) {
+          state.activeBillingAddress = address;
+        }
+      });
+    } else {
+      state.activeBillingAddress = setAddressValues("billing");
+    }
+    if (!!state.shippingAddressList) {
+      state.shippingAddressList.forEach((address) => {
+        if (address.is_default && !state.cloneBilling) {
+          state.activeShippingAddress = address;
+        }
+      });
+    } else {
+      if (state.cloneBilling) {
+        state.activeShippingAddress = { ...state.activeBillingAddress };
+      } else {
+        state.activeShippingAddress = setAddressValues("shipping");
+      }
+    }
+  }
+
+  function setAddressValues(mode) {
+    let structure = state.structure.address;
+    let skel = {};
+
+    Object.entries(structure).forEach(([boneName, boneValue]) => {
+      if (boneName === "customer") {
+        skel[boneName] = state.customer.key;
+      } else if (boneName === "address_type") {
+        skel[boneName] = mode;
+      } else {
+        skel[boneName] = boneValue.emptyvalue;
+      }
+    });
+
+    return skel;
+  }
+
+  async function getAddress() {
+    if (!state.isLoggedIn) {
+      return;
+    }
+    try {
+      const addressList = await shopClient.address_list();
+    } catch (e) {
+      console.log("error", e);
+      return;
+    }
+
+    const addressList = await shopClient.address_list();
+    state.billingAddressList = [];
+    state.shippingAddressList = [];
+
+    for (const address of addressList) {
+      if (address.address_type === "billing") {
+        console.log("add to bill address ?", address);
+        state.billingAddressList.push(address);
+      }
+      if (address.address_type === "shipping") {
+        state.shippingAddressList.push(address);
+      }
+    }
+
+    getDefaultAddress();
+  }
+
+  async function addDiscount(code) {
+    await shopClient.discount_add({ code });
+  }
+
+  async function addNode(
+    parentCart,
+    cartType = "whishlist",
+    cartName = undefined,
+    comment = undefined,
+    shipping_key = undefined,
+    shipping_address_key = undefined,
+    discount_key = undefined,
+  ) {
+    return await shopClient.cart_add({
+      parent_cart_key: parentCart,
+      // cart_type: cartType, // "basket" for main cart, "whishlist" for everything else
+      // name: cartName,
+      // customer_comment: comment,
+      // shipping_address_key: shipping_address_key,
+      // shipping_key: shipping_key,
+      // discount_key: discount_key,
+    });
+  }
+
+  async function getShippingData() {
+    return await shopClient.shipping_list({
+      cart_key: state.basketRootNode.key,
+    });
+  }
+  async function setShiping() {
+    return await shopClient.shipping_set();
+  }
+
+  async function getPaymentProviders() {
+    const paymentProvieders = await shopClient.payment_providers_list();
+    state.paymentProviders = paymentProvieders;
+    //select first paymentprovider as default
+    state.selectedPaymentProvider =
+      paymentProvieders[Object.keys(paymentProvieders)[0]];
+    state.selectedPaymentProviderName = Object.keys(paymentProvieders)[0];
+  }
+
+  function struct2dict(structure) {
+    if (!Array.isArray(structure)) {
+      return structure;
+    }
+
+    let result = {};
+    structure.forEach((bone) => (result[bone[0]] = bone[1]));
+
+    return result;
+  }
+
+  async function orderAdd() {
+    const order = await shopClient.order_add({
+      cart_key: state.basketRootNode.key,
+      payment_provider: state.selectedPaymentProviderName,
+      billing_address_key: state.activeBillingAddress["key"],
+      customer_key: state.customer["key"],
+    });
+    return order;
+  }
+  async function setShipping() {
+    const shipping_skel = shopClient;
+  }
+
+  watch(
+    () => state.activeBillingAddress,
+    (newValue, oldValue) => {
+      if (oldValue) {
+        const isAddress = (address) => address.key === newValue.key;
+
+        let index = state.billingAddressList.findIndex(isAddress);
+
+        state.billingAddressList[index] = newValue;
+      }
+      if (state.cloneBilling) {
+        state.activeShippingAddress = newValue;
+      }
+    },
+  );
+
+  watch(
+    () => state.activeShippingAddress,
+    (newValue, oldValue) => {
+      if (oldValue) {
+        const isAddress = (address) => address.key === newValue.key;
+
+        let index = state.shippingAddressList.findIndex(isAddress);
+
+        state.shippingAddressList[index] = newValue;
+      }
+    },
+  );
+
+  watch(
+    () => state.cloneBilling,
+    (newValue, oldValue) => {
+      if (newValue) {
+        let temp = { ...state.activeBillingAddress };
+        temp.address_type = "shipping";
+        state.activeShippingAddress = { ...temp };
+      }
+    },
+  );
+
+  return {
+    state,
+    addToCart,
+    getArticleView,
+    removeItem,
+    updateItem,
+    init,
+    getAddressStructure,
+    getChildren,
+    addDiscount,
+    getPaymentProviders,
+    getAddress,
+    addNode,
+    getShippingData,
+    getDefaultAddress,
+    orderAdd,
+    getBasket,
+    setShiping,
+  };
+});

package/src/style/ignite/.editorconfig

@@ -0,0 +1,20 @@
+# editorconfig.org
+# source: https://gist.github.com/sveneberth/b30d6639067177a31b5ab68af63a23e9
+
+root = true
+
+[*]
+indent_style = tab
+tab_width = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+max_line_length = 120
+
+[*.{css,less,yml,yaml,json}]
+indent_style = space
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false

package/src/style/ignite/.github/workflows/ignite.yml

@@ -0,0 +1,64 @@
+name: Build Ignite
+
+on:
+  push:
+    tags:
+      - "v5.*"
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [16.x]
+
+    steps:
+    - uses: actions/checkout@v2
+      with:
+        submodules: true
+        path: "app/sources"
+
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v2
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+        cache-dependency-path: 'package-lock.json'
+    - run: npm install
+    - run: npm run build
+    - uses: actions/upload-artifact@master
+      with:
+        name: buildfiles
+        path: dist
+
+
+  release:
+    runs-on: ubuntu-latest
+    needs: [ build ]
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - uses: actions/download-artifact@master
+        with:
+          name: buildfiles
+          path: ./dist
+
+      - name: archive
+        run: cd ./dist && zip viur-ignite.zip -r ./*
+
+      - name: Get version from tag
+        id: tag_name
+        run: |
+          echo ::set-output name=current_version::${GITHUB_REF#refs/tags/v}
+
+      - name: create release
+        uses: softprops/action-gh-release@v1
+        with:
+          files: ./dist/viur-ignite.zip
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+

package/src/style/ignite/.github/workflows/node.yml

@@ -0,0 +1,30 @@
+name: Node.js CI
+
+on:
+  push:
+    tags:
+      - "v5.*"
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [16.x]
+
+    steps:
+    - uses: actions/checkout@v2
+      with:
+        submodules: true
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v2
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+    - run: npm install
+    - run: npm run build
+    - uses: JS-DevTools/npm-publish@v1
+      with:
+        access: "public"
+        token: ${{ secrets.NPM_TOKEN }}

package/src/style/ignite/.postcssrc.cjs

@@ -0,0 +1,25 @@
+const enableBuild = process.env.mode === 'build'
+
+module.exports = ({ ctx }) => ({
+	map: enableBuild ? false : 'inline',
+	plugins: {
+		'postcss-discard-comments': enableBuild ? {} : false,
+		'@csstools/postcss-bundler': {},
+		'postcss-preset-env': {
+			stage: 3,
+			minimumVendorImplementations: 2,
+			autoprefixer: {},
+			debug: true,
+			features: {
+    			'color-mix': true,
+				'nesting-rules': true,
+				'oklab-function': true,
+                //'cascade-layers': true,
+                'custom-media-queries': true,
+  			}
+		},
+		'postcss-focus': {},
+		'postcss-sort-media-queries': {},
+		'cssnano': enableBuild ? {} : false,
+	}
+})