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

package/old/client/HttpClient.js

@@ -0,0 +1,111 @@
+class HTTPError extends Error {
+    constructor(code, statusText, message, response) {
+        super(message || statusText);
+        if (arguments.length >= 4 && response) {
+            Object.assign(this, response);
+        }
+        this.statusText = statusText;
+        this.statusCode = code;
+        this.response = response;
+    }
+}
+
+/**
+ * Wrapper for fetch.
+ * Inspired by https://kentcdodds.com/blog/replace-axios-with-a-simple-custom-fetch-wrapper
+ *
+ * @param {String} url The url of the ressource to fetch.
+ * @param {Object=} json Optional. Data used as json-serialized payload.
+ * @param {String=} method Optional. The HTTP method, e.g. POST. Default: GET (if json is unset).
+ * @param {Object=} params Optional. Params used as body for POST and get-query-String for others.
+ * @param {Object=} customConfig Some custom values for the fetch call.
+ * @returns {Promise<Response>} Returns the raw request a promise, or throws a HTTPError.
+ */
+function request(url, {json, method, params, ...customConfig} = {}) {
+    if (!method) {
+        method = json ? 'POST' : 'GET'
+    }
+    const config = {
+        credentials: 'include',
+        method: method,
+        headers: {
+            ...customConfig.headers,
+        },
+        ...customConfig,
+    }
+    if (url.startsWith('/') || url.startsWith(window.location.origin)) {
+        // TODO: Additional headers causes CORS problems
+        //  and preflight OPTION requests are not working with the current viur-core
+        config.headers['X-Requested-With'] = 'Fetch';
+    }
+    if (json) {
+        config.body = JSON.stringify(json);
+        config.headers['Content-Type'] = 'application/json';
+    } else if (params && method === 'POST') {
+        if (typeof params === 'string' || params instanceof String) {
+            // provided a query string, e.g.: foo=1&bar=2
+            config.body = new URLSearchParams(params);
+        } else if (params instanceof HTMLFormElement) {
+            // provided a HTML form element
+            config.body = new FormData(params);
+        } else {
+            // provided a object, e.g.: {foo: 1, bar: 2, baz: [3, 4]}
+            config.body = new FormData();
+            Object.entries(params).forEach(([key, value]) => {
+                if (Array.isArray(value)) {
+                    for (const val of value) {
+                        config.body.append(key, val)
+                    }
+                } else {
+                    config.body.append(key, value)
+                }
+            });
+        }
+    }
+    if (params && (method === 'GET' || json)) {
+        const getParams = new URLSearchParams(params)
+        url += `?${getParams.toString()}`;
+    }
+    return window
+        .fetch(url, config)
+        .then(async response => {
+            if (response.ok || (config.mode === 'no-cors' && response.type === 'opaque')) {
+                return response
+            } else {
+                const errorMessage = `${response.status} ${response.statusText}: ${response.headers.get('x-viur-error')}`
+                return Promise.reject(new HTTPError(response.status, response.statusText, errorMessage, response))
+            }
+        }).catch((error) => {
+            const errorMessage = `${error.statusCode} ${error.statusText}: ${error.response.headers.get('x-viur-error')}`
+            return Promise.reject(new HTTPError(error.statusCode, error.statusText, errorMessage, error))
+        })
+}
+
+/**
+ * Return a new skey.
+ * @returns {Promise<String>} The resolved json-Promise (the skey).
+ */
+function getSkey() {
+    return request('/json/skey')
+        .then(request => request.json())
+}
+
+/**
+ * Shows a alert with an error-message.
+ * @param {any} error The exception. Could be an instance of HTTPError or any other error/value.
+ */
+function errorHandler(error) {
+    console.error(error);
+    let headline = `Error`;
+    if (error instanceof HTTPError) {
+        headline += ` ${error.statusCode} ${error.statusText}`;
+    }
+    alert(
+        `Sorry, an unexpected error occurred.
+${headline}
+${error}
+Please try again our contact our customer service.`,
+    )
+}
+
+export {HTTPError, request, getSkey, errorHandler};

package/old/client/ViURShopClient.js

@@ -0,0 +1,472 @@
+import {getSkey, request} from './HttpClient.js';
+
+// Note: Order of functions should always be RCUD (this is NOT a typo of CRUD!)
+
+/**
+ * ViUR Shop Client
+ */
+export class ViURShopClient {
+
+    /**
+     * URL to the shop-backend (ViUR server)
+     */
+    host_url;
+
+    /**
+     * Name of the shop root module
+     */
+    shop_module;
+
+    /**
+     * URL to shop root module with the default renderer
+     */
+    shop_url;
+
+    /**
+     * URL to shop root module with the json renderer
+     */
+    shop_json_url;
+
+    /**
+     * URL to shop API module with the default renderer
+     */
+    shop_api_url;
+
+    constructor({
+                    host_url = null,
+                    shop_module = 'shop',
+                } = {}) {
+        if (host_url === null) {
+            try {
+                this.host_url = import.meta.env.VITE_API_URL ? import.meta.env.VITE_API_URL : window.location.origin;
+            } catch (e) {
+                // The import crashes in a bundled runtime
+                this.host_url = window.location.origin;
+            }
+        } else {
+            this.host_url = host_url;
+        }
+        this.shop_module = shop_module;
+        this.shop_url = `${this.host_url}/${this.shop_module}`;
+        this.shop_json_url = `${this.host_url}/json/${this.shop_module}`;
+        this.shop_api_url = `${this.shop_url}/api`;
+        this.getStructure_url = `${this.host_url}/vi/getStructure`;
+    }
+
+
+    // --- Article ------------------------------------------------------------
+
+    article_view({
+                     article_key,
+                     parent_cart_key,
+                 } = {}) {
+        return request(`${this.shop_api_url}/article_view`, {
+            params: {
+                'article_key': article_key,
+                'parent_cart_key': parent_cart_key,
+            },
+        })
+            .then(req => req.json());
+    }
+
+
+    article_add({
+                    article_key,
+                    parent_cart_key,
+                    quantity = 1,
+                    quantity_mode = 'increase',
+                } = {}) {
+        return request(`${this.shop_api_url}/article_add`, {
+            method: 'POST',
+            params: {
+                article_key,
+                parent_cart_key,
+                quantity,
+                quantity_mode,
+            },
+        })
+            .then(req => req.json());
+    }
+
+    article_update({
+                       article_key,
+                       parent_cart_key,
+                       quantity = 1,
+                       quantity_mode = 'increase',
+                   } = {}) {
+        return request(`${this.shop_api_url}/article_update`, {
+            method: 'POST',
+            params: {
+                article_key,
+                parent_cart_key,
+                quantity,
+                quantity_mode,
+            },
+        })
+            .then(req => req.json());
+    }
+
+
+    article_remove({
+                       article_key,
+                       parent_cart_key,
+                   } = {}) {
+        return request(`${this.shop_api_url}/article_remove`, {
+            method: 'POST',
+            params: {
+                article_key,
+                parent_cart_key,
+            },
+        })
+            .then(req => req.json());
+    }
+
+    // --- Basket ---------------------------------------------------------------
+    basket_list() {
+        return request(`${this.shop_api_url}/basket_list`).then(req => req.json());
+    }
+
+    // --- Cart ---------------------------------------------------------------
+
+    /**
+     * List root nodes or children of a cart
+     *
+     * If a cart key is provided, the direct children (nodes and leafs) will
+     * be returned.
+     * Otherwise (without a key), the root nodes will be returned.
+     *
+     * @param {string} cart_key list direct children (nodes and leafs) of this parent node
+     * @returns {Promise<Response>}
+     */
+    cart_list({cart_key = null} = {}) {
+        const self = this;
+        return request(`${this.shop_api_url}/cart_list`, {
+            params: cart_key === null ? {} : {cart_key},
+        })
+            .then(req => req.json());
+    }
+
+    /**
+     * Add a new cart node
+     *
+     * @param {string} parent_cart_key Key of the parent cart
+     * @param {CartType} cart_type Type of the cart node, see `CartType`
+     * @param {string=} name Optional. Name of the cart node
+     * @param {string=} customer_comment Optional. Comment to this node, by customer.
+     * @param {string=} shipping_address_key Optional. Key of the address
+     * @param {string=} shipping_key Optional. Key of the shipping
+     * @param {string=} discount_key Optional. Key of the discount
+     * @returns {Promise<Response>}
+     */
+    cart_add({
+                 parent_cart_key,
+                 cart_type,
+                 name,
+                 customer_comment,
+                 shipping_address_key,
+                 shipping_key,
+                 discount_key,
+             } = {}) {
+        return request(`${this.shop_api_url}/cart_add`, {
+            method: 'POST',
+            params: this.removeUndefinedValues({
+                parent_cart_key,
+                name,
+                cart_type,
+                customer_comment,
+                shipping_address_key,
+                shipping_key,
+                discount_key,
+            }),
+        })
+            .then(req => req.json());
+    }
+
+    /**
+     * Update an existing cart node
+     *
+     * @param {string} cart_key Key of the cart node to be updated
+     * @param {CartType} cart_type Type of the cart node, see `CartType`
+     * @param {string=} name Optional. Name of the cart node
+     * @param {string=} customer_comment Optional. Comment to this node, by customer.
+     * @param {string=} shipping_address_key Optional. Key of the address
+     * @param {string=} shipping_key Optional. Key of the shipping
+     * @param {string=} discount_key Optional. Key of the discount
+     * @returns {Promise<Response>}
+     */
+    cart_update({
+                    cart_key,
+                    cart_type,
+                    name,
+                    customer_comment,
+                    shipping_address_key,
+                    shipping_key,
+                    discount_key,
+                } = {}) {
+        return request(`${this.shop_api_url}/cart_update`, {
+            method: 'POST',
+            params: this.removeUndefinedValues({
+                cart_key,
+                cart_type,
+                name,
+                customer_comment,
+                shipping_address_key,
+                shipping_key,
+                discount_key,
+            }),
+        })
+            .then(req => req.json());
+    }
+
+    /**
+     * Remove a cart node.
+     * Removes itself and all children
+     *
+     * @param {string} cart_key Key of the cart node to be removed
+     * @returns {Promise<Response>}
+     */
+    cart_remove({cart_key} = {}) {
+        return request(`${this.shop_api_url}/cart_remove`, {
+            method: 'POST',
+            params: {
+                cart_key,
+            },
+        })
+            .then(req => req.json());
+    }
+
+    cart_structure() {
+        return request(`${this.getStructure_url}/${this.shop_module}.cart`, {
+            method: 'GET',
+        })
+            .then(req => req.json());
+    }
+
+    // --- Address ------------------------------------------------------------
+
+    address_list({} = {}) {
+        const self = this;
+        return request(`${this.shop_json_url}/address/list`, {
+            params: {
+                limit: 100,
+            },
+        })
+            .then(req => req.json())
+            .then(response => response.skellist);
+    }
+
+    address_add({
+                    customer_type,
+                    salutation,
+                    company_name,
+                    firstname,
+                    lastname,
+                    street_name,
+                    street_number,
+                    address_addition,
+                    zip_code,
+                    city,
+                    country,
+                    customer_key,
+                    is_default,
+                    address_type,
+                } = {}) {
+        return getSkey()
+            .then(skey => {
+                return request(`${this.shop_json_url}/address/add`, {
+                    method: 'POST',
+                    params: this.removeUndefinedValues({
+                        skey,
+                        customer_type,
+                        salutation,
+                        company_name,
+                        firstname,
+                        lastname,
+                        street_name,
+                        street_number,
+                        address_addition,
+                        zip_code,
+                        city,
+                        country,
+                        customer: customer_key,
+                        is_default,
+                        address_type,
+                    }),
+                })
+                    .then(req => req.json())
+                    .then(response => response.values);
+            });
+    }
+
+    address_structure() {
+        return request(`${this.shop_json_url}/address/structure`, {
+            method: 'GET',
+        })
+            .then(req => req.json());
+    }
+
+    // --- Order --------------------------------------------------------------
+
+    payment_providers_list({} = {}) {
+        return request(`${this.shop_url}/order/payment_providers_list`)
+            .then(req => req.json());
+    }
+
+    order_add({
+                  cart_key,
+                  payment_provider,
+                  billing_address_key,
+                  email,
+                  customer_key,
+                  state_ordered,
+                  state_paid,
+                  state_rts,
+              } = {}) {
+        return request(`${this.shop_api_url}/order_add`, {
+            method: 'POST',
+            params: this.removeUndefinedValues({
+                cart_key,
+                payment_provider,
+                billing_address_key,
+                email,
+                customer_key,
+                state_ordered,
+                state_paid,
+                state_rts,
+            }),
+        })
+            .then(req => req.json());
+    }
+
+    order_update({
+                     order_key,
+                     payment_provider,
+                     billing_address_key,
+                     email,
+                     customer_key,
+                     state_ordered,
+                     state_paid,
+                     state_rts,
+                 } = {}) {
+        return request(`${this.shop_api_url}/order_update`, {
+            method: 'POST',
+            params: this.removeUndefinedValues({
+                order_key,
+                payment_provider,
+                billing_address_key,
+                email,
+                customer_key,
+                state_ordered,
+                state_paid,
+                state_rts,
+            }),
+        })
+            .then(req => req.json());
+    }
+
+    order_checkout_start({
+                             order_key,
+                         } = {}) {
+        return request(`${this.shop_url}/order/checkout_start`, {
+            method: 'POST',
+            params: {order_key},
+        })
+            .then(req => req.json());
+    }
+
+    order_checkout_order({
+                             order_key,
+                         } = {}) {
+        return request(`${this.shop_url}/order/checkout_order`, {
+            method: 'POST',
+            params: {order_key},
+        })
+            .then(req => req.json());
+    }
+
+    order_pp_get_settings({
+                              order_key,
+                          } = {}) {
+        return request(`${this.shop_url}/order/checkout_order`, {
+            method: 'POST',
+            params: {order_key},
+        })
+            .then(req => req.json());
+    }
+
+
+    // --- User ---------------------------------------------------------------
+
+    user_view({
+                  user_key = 'self',
+              } = {}) {
+        return request(`${this.host_url}/json/user/view/${user_key}`)
+            .then(req => req.json())
+            .then(response => response.values);
+    }
+
+
+    // --- Discount -----------------------------------------------------------
+    /**
+     * Add a Discount to the current Cart.
+     * @param {string} code Human readable Discount Code
+     * @param {string} discount_key Database Key from a Discount.
+     * @returns {Response<Response>}
+     */
+    discount_add({
+                     code,
+                     discount_key,
+                 } = {}) {
+        return request(`${this.shop_api_url}/discount_add`, {
+            method: 'POST',
+            params: this.removeUndefinedValues({
+                code,
+                discount_key,
+            }),
+        })
+            .then(req => req.json());
+    }
+
+    /**
+     * Removes a Discount by the Database Key
+     * @param {string} discount_key Database Key from a Discount.
+     * @returns {Promise<Response>}
+     */
+    discount_remove({
+                        discount_key,
+                    } = {}) {
+        return request(`${this.shop_api_url}/discount_remove`, {
+            method: 'POST',
+            params: {discount_key},
+        })
+            .then(req => req.json());
+    }
+
+
+    // --- Shipping -----------------------------------------------------------
+
+    /**
+     * Lists available shipping options for a (sub)cart
+     * @param {string} cart_key Key of the parent cart
+     * @returns {Promise<Response>} List of ShippingsSkels
+     */
+    shipping_list({
+                      cart_key,
+                  } = {}) {
+        return request(`${this.shop_api_url}/shipping_list`, {
+            method: 'GET',
+            params: {cart_key},
+        })
+            .then(req => req.json());
+    }
+
+
+    // --- Utils -------------------------------------------------------------
+
+    removeUndefinedValues(obj) {
+        return Object.fromEntries(
+            Object.entries(obj)
+                .filter(([key, value]) => value !== undefined),
+        );
+    }
+}

package/old/client/index.js

@@ -0,0 +1,23 @@
+import {
+    HTTPError,
+    request,
+    getSkey,
+    errorHandler,
+} from './HttpClient.js'
+import {
+    ViURShopClient,
+} from './ViURShopClient.js'
+import {
+    CartType,
+    CustomerType,
+} from './types.js';
+
+export {
+    HTTPError,
+    request,
+    getSkey,
+    errorHandler,
+    ViURShopClient,
+    CartType,
+    CustomerType,
+}

package/old/client/types.js

@@ -0,0 +1,10 @@
+export const CartType = Object.freeze({
+    WISHLIST: 'wishlist',
+    BASKET: 'basket',
+});
+
+
+export const CustomerType = Object.freeze({
+    PRIVATE: 'private',
+    BUSINESS: 'business',
+});

package/old/components/ExampleUsage.vue

@@ -0,0 +1,95 @@
+<template>
+  <sl-spinner v-if="!rootNode"></sl-spinner>
+  <shop-order-stepper
+    :tabs="state.tabs"
+    @tabChange="handleTabs"
+    :sidebar="true"
+    :sidebar-bottom="false"
+    :show-discount="true"
+    :custom-shipping-component="state.customShipping"
+    v-else
+  >
+    <!-- customize slots -->
+    <!-- <template #main> The Order Stepper </template> -->
+    <!-- <template #trigger> Buttons for Stepper control </template> -->
+    <!-- <template #sidebar> the side/bottom bar </template> -->
+  </shop-order-stepper>
+</template>
+
+<script setup>
+import { onBeforeMount, reactive, shallowRef, computed } from "vue";
+
+import ShopCart from "./ShopCart.vue";
+import ShopOrderConfirm from "./ShopOrderConfirm.vue";
+import ShopOrderStepper from "./ShopOrderStepper.vue";
+import ShopOrderComplete from "./ShopOrderComplete.vue";
+import ShopUserData from "./ShopUserData.vue";
+import ShopPaymentProvider from "./ShopPaymentProvider.vue";
+import ShopShippingMethod from "./ShopShippingMethod.vue";
+
+import { useCartStore } from "../stores/cart";
+
+const cartStore = useCartStore();
+
+const rootNode = computed(() =>
+  cartStore.state.basket.key ? cartStore.state.basket.key : "",
+);
+
+const state = reactive({
+  tabs: {
+    cart: {
+      component: shallowRef(ShopCart),
+      displayName: "Warenkorb",
+      props: {
+        standalone: false,
+        cartKey: rootNode,
+      },
+      icon: { name: "bag" },
+      position: 1,
+    },
+    userData: {
+      component: shallowRef(ShopUserData),
+      props: {
+        multiMode: false,
+      },
+      displayName: "Daten Eingeben",
+      icon: { name: "card-list" },
+      position: 2, //reihfolge ändern
+    },
+    selectShippingMethod: {
+      component: shallowRef(ShopShippingMethod),
+      displayName: "Versandart wählen",
+      icon: { name: "truck" },
+      position: 3,
+    },
+    selectPaymentProvider: {
+      component: shallowRef(ShopPaymentProvider),
+      props: {},
+      displayName: "Zahlungsart auswählen",
+      icon: { name: "card-list" },
+      position: 4, //reihfolge ändern
+    },
+    orderConfirm: {
+      component: shallowRef(ShopOrderConfirm),
+      props: {},
+      displayName: "Bestellung prüfen",
+      icon: { name: "clipboard-check" },
+      position: 5,
+    },
+
+    orderComplete: {
+      component: shallowRef(ShopOrderComplete),
+      props: {},
+      displayName: "Bestellung Abgeschlossen",
+      icon: { name: "bag-check" },
+      position: 6,
+      showNext: false,
+    },
+  },
+});
+
+onBeforeMount(async () => {
+  await cartStore.setConfig("shop", "path/to/placeholder");
+  await cartStore.init(false, false);
+});
+</script>