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

package/.editorconfig

@@ -0,0 +1,16 @@
+# http://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+max_line_width = 120
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false

package/.github/workflows/npm-publish.yml

@@ -0,0 +1,42 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+
+name: Node.js Package
+
+on:
+  push:
+     tags:
+      - v*
+
+jobs:
+  publish-npm:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: https://registry.npmjs.org/
+      - run: npm ci
+      - name: Publish npm package
+        run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_API_TOKEN}}
+
+
+  gh-release:
+    runs-on: ubuntu-latest
+    permissions: write-all
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: debug
+        run: |
+          echo "${{ contains(github.ref_name, 'dev') }}"
+      - name: Release
+        uses: softprops/action-gh-release@v1
+        # if: "!startsWith(github.ref_name, 'v-test-')"
+        with:
+          generate_release_notes: true
+          prerelease: ${{ contains(github.ref_name, 'dev') }}

package/.gitmodules

@@ -0,0 +1,3 @@
+[submodule "src/style/ignite"]
+	path = src/style/ignite
+	url = git@github.com:viur-framework/ignite.git

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 ViUR
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -6,6 +6,17 @@
     <a href="LICENSE">
         <img src="https://img.shields.io/github/license/viur-framework/shop-components" alt="Badge displaying the license" title="License badge">
     </a>
-    <br>
-    A collection of Vue.js components for the <a href="https://www.viur.dev">ViUR</a> <a href="https://github.com/viur-framework/viur-shop">shop</a>.
+    <br />
+    A collection of Vue.js components for the <a href="https://www.viur.dev">ViUR</a>
+    <a href="https://github.com/viur-framework/viur-shop">shop</a>.
 </div>
+
+### Structure
+* **Main components** have to be exported in `./src/main.js`. Main Components should be in folder `./src/components`.
+* **Ui Elements** for main components should be in `./src/components/ui` so everyone who contributes can see if there is an element/component already for their use.  
+* Components should be as small as possible to make the code easier to access and understand, thats why the directory structure has importance.  
+* Every logic/function according to articles/items/cart or anything else should be in the `cartStore` in `./src/stores/cart.js` - reason is as follows - all components get their data with so called props which are not "reactive" by nature. We want to trigger a rerender if we change/add/edit... items thats why anything according to that should be in the cartStore. Read the cartStore carefully and use the already existing states to grant a clean rerender/reactive process. The props all get updated as soon as the main states get updated in the `cartStore` -> rerender --> profit...
+
+Try to understand this structure and adopt it with new components for easy implementation without much effort.
+
+Real documentation is coming soon...

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),
+        );
+    }
+}