@lilaquadrat/design-core 0.2.1 → 0.3.0

package/src/server-entry.ts

@@ -1,113 +1,111 @@
 import { renderToString } from 'vue/server-renderer';
-import { getAppInstance, type AppComponents } from './main';
+import { getAppInstance } from './main';
 
 import { basename } from 'path';
-import type { Content, Customers, List } from '@lilaquadrat/interfaces';
-import type { RouteRecordRaw } from 'vue-router';
-import useContentStore from './stores/content.store';
+import type RenderOptions from './interfaces/RenderOptions.interface';
 import { dynamicRoutes } from './routes';
 import hooks from './mixins/hooks';
 
-export async function render (url: string, context: any, contextData: Content[], recipientData: Customers, list: List, manifest: Record<string, string[]>, options: {cdnUrl: string, components: AppComponents, routes?: readonly RouteRecordRaw[]}) {
-  const { app, router, pinia } = getAppInstance(context, options.routes ?? dynamicRoutes, false, options.components);
+export async function render({ url, context, manifest, cdnUrl, components, routes }: RenderOptions) {
 
-  hooks(router, { initAuth: false });
+    const { app, router, pinia } = getAppInstance(context, routes ?? dynamicRoutes, false, components);
 
-  await router.push(url);
-  await router.isReady();
+    hooks(router, { initAuth: false });
 
-  const contentStore = useContentStore();
+    await router.push(url);
+    await router.isReady();
 
-  /**
+    /**
   * for pdfs all images must be preloaded
   * because there will be no hydration
   */
-  if(context.renderTarget === 'pdf') {
+    if(context.renderTarget === 'pdf' && context.editor) {
 
-    context.settings.preloadImages = true; 
+        context.editor.preloadImages = true;
 
-  }
+    }
 
-  if(contextData) contentStore.addMulti(contextData);
-  if(recipientData) contentStore.recipient = recipientData;
-  if(list) contentStore.list = list;
+    // passing SSR context object which will be available via useSSRContext()
+    // @vitejs/plugin-vue injects code into a component's setup() that registers
+    // itself on ctx.modules. After the render, ctx.modules would contain all the
+    // components that have been instantiated during this render call.
+    const ctx: { modules?: Set<string> } = {};
+    const html = await renderToString(app, ctx);
+    const initialState = JSON.stringify(pinia.state.value).replace(/</g, '\\u003c');
+    // the SSR manifest generated by Vite contains module -> chunk/asset mapping
+    // which we can then use to determine what files need to be preloaded for this
+    // request.
+    const preloadLinks = renderPreloadLinks(ctx.modules as Set<string>, manifest, cdnUrl);
 
-  // passing SSR context object which will be available via useSSRContext()
-  // @vitejs/plugin-vue injects code into a component's setup() that registers
-  // itself on ctx.modules. After the render, ctx.modules would contain all the
-  // components that have been instantiated during this render call.
-  const ctx: { modules?: Set<string> } = {};
-  const html = await renderToString(app, ctx);
-  const initialState = JSON.stringify(pinia.state.value).replace(/</g, '\\u003c');
-  // the SSR manifest generated by Vite contains module -> chunk/asset mapping
-  // which we can then use to determine what files need to be preloaded for this
-  // request.
-  const preloadLinks = renderPreloadLinks(ctx.modules as Set<string>, manifest, options);
+    return { html, preloadLinks, initialState, url };
 
-  return { html, preloadLinks, initialState, url };
 }
 
-function renderPreloadLinks (modulesSet: Set<string>, manifest: Record<string, string[]>, options: {cdnUrl: string}) {
-  let links = '';
-  const seen = new Set();
+function renderPreloadLinks(modulesSet: Set<string>, manifest: Record<string, string[]>, cdnUrl: string) {
 
-  modulesSet?.forEach((id) => {
+    let links = '';
+    const seen = new Set();
 
-    const files = manifest[id];
+    modulesSet?.forEach((id) => {
 
-    if (files) {
+        const files = manifest[id];
 
-      files.forEach((file: string) => {
+        if (files) {
 
-        if (!seen.has(file)) {
-          seen.add(file);
+            files.forEach((file: string) => {
 
-          const filename = basename(file);
+                if (!seen.has(file)) {
 
-          if (manifest[filename]) {
+                    seen.add(file);
 
-            for (const depFile of manifest[filename]) {
-              links += renderPreloadLink(depFile, options.cdnUrl);
-              seen.add(depFile);
-            }
+                    const filename = basename(file);
 
-          }
+                    if (manifest[filename]) {
 
-          links += renderPreloadLink(file, options.cdnUrl);
-        }
+                        for (const depFile of manifest[filename]) {
 
-      });
-    }
+                            links += renderPreloadLink(depFile, cdnUrl);
+                            seen.add(depFile);
+                        
+                        }
+
+                    }
 
-  });
+                    links += renderPreloadLink(file, cdnUrl);
+                
+                }
 
-  return links;
+            });
+        
+        }
+
+    });
+
+    return links;
 
 }
 
-function renderPreloadLink (file: string, base: string) {
-  if (!file) return '';
-  
-  const fileExtMap: Record<string, { rel: string, as?: string, type?: string, crossorigin?: boolean }> = {
-    '.js'   : { rel: 'modulepreload', crossorigin: true },
-    '.css'  : { rel: 'stylesheet' },
-    '.woff' : { rel: 'preload', as: 'font', type: 'font/woff', crossorigin: true },
-    '.woff2': { rel: 'preload', as: 'font', type: 'font/woff2', crossorigin: true },
-    '.gif'  : { rel: 'preload', as: 'image', type: 'image/gif' },
-    '.jpg'  : { rel: 'preload', as: 'image', type: 'image/jpeg' },
-    '.jpeg' : { rel: 'preload', as: 'image', type: 'image/jpeg' },
-    '.png'  : { rel: 'preload', as: 'image', type: 'image/png' }
-  };
-  const ext = Object.keys(fileExtMap).find(ext => file.endsWith(ext));
-
-  if (!ext) return '';
-
-  const { rel, as, type, crossorigin } = fileExtMap[ext];
-  let link = `<link rel="${rel}" href="${base}${file}"`;
-  
-  if (as) link += ` as="${as}"`;
-  if (type) link += ` type="${type}"`;
-  if (crossorigin) link += ' crossorigin';
-  
-  return `${link}>`;
-}
+function renderPreloadLink(file: string, base: string) {
+
+    if (!file) return '';
+
+    const fileExtMap: Record<string, { rel: string, as?: string, type?: string, crossorigin?: boolean }> = {
+        '.js': { rel: 'modulepreload', crossorigin: true },
+        '.css': { rel: 'stylesheet' },
+        '.woff': { rel: 'preload', as: 'font', type: 'font/woff', crossorigin: true },
+        '.woff2': { rel: 'preload', as: 'font', type: 'font/woff2', crossorigin: true }
+    };
+    const ext = Object.keys(fileExtMap).find(ext => file.endsWith(ext));
+
+    if (!ext) return '';
+
+    const { rel, as, type, crossorigin } = fileExtMap[ext];
+    let link = `<link rel="${rel}" href="${base}${file}"`;
+
+    if (as) link += ` as="${as}"`;
+    if (type) link += ` type="${type}"`;
+    if (crossorigin) link += ' crossorigin';
+
+    return `${link}>`;
+
+}

package/src/stores/calls.store.ts

@@ -4,29 +4,29 @@ import { v4 as uuid } from 'uuid';
 
 export const useCallStore = defineStore('calls', () => {
 
-  const calls = ref<Record<string, 'pending' | 'resolved' | 'rejected'>>({});
+    const calls = ref<Record<string, 'pending' | 'resolved' | 'rejected'>>({});
 
-  function addCall () {
+    function addCall() {
 
-    const id = uuid();
+        const id = uuid();
 
-    calls.value[id] = 'pending';
+        calls.value[id] = 'pending';
 
-    return id;
+        return id;
 
-  }
+    }
 
-  function updateCall (id: string, state: 'pending' | 'resolved' | 'rejected') {
+    function updateCall(id: string, state: 'pending' | 'resolved' | 'rejected') {
 
-    calls.value[id] = state;
+        calls.value[id] = state;
 
-  }
+    }
 
-  return { 
-    calls, 
-    addCall,
-    updateCall
-  }
+    return { 
+        calls, 
+        addCall,
+        updateCall
+    }
 
 })
 

package/src/stores/cart.store.ts

@@ -6,180 +6,189 @@ import type { Agreement } from '@lilaquadrat/interfaces';
 
 export const useCartStore = defineStore('cart', () => {
   
-  const products = ref<any[]>([]);
-  const costSummary = ref<number>(0);
-  const itemsQuantity = ref<number>(0);
-  const mainStore = useMainStore();
-  const paymentProvider = PaymentProviderFactory(mainStore.config?.payment?.type as 'internal' | 'shopify' | 'stripe', mainStore.config?.payment?.options);
-  const cartCache = ref();
+    const products = ref<any[]>([]);
+    const costSummary = ref<number>(0);
+    const itemsQuantity = ref<number>(0);
+    const mainStore = useMainStore();
+    const paymentProvider = PaymentProviderFactory(mainStore.paymentProvider?.type as 'internal' | 'shopify' | 'stripe', mainStore.paymentProvider?.options);
+    const cartCache = ref();
+    const prename = ref<string>('');
+    const name = ref<string>('');
 
-  async function getCart (attributes?: Record<string, string>) {
+    async function getCart(attributes?: Record<string, string>) {
 
-    if(cartCache.value) return Promise.resolve(cartCache.value);
-    if(!attributes) return Promise.reject('ATTRIBUTES_MISSING');
+        if(cartCache.value) return Promise.resolve(cartCache.value);
+        if(!attributes) return Promise.reject('ATTRIBUTES_MISSING');
 
-    const list = attributes.list;
+        const list = attributes.list;
 
-    if(!list) return Promise.reject('NO_LIST_GIVEN');
+        if(!list) return Promise.reject('NO_LIST_GIVEN');
 
-    const cartId = `lila-cart-${list}`;
-    const storedCart = localStorage.getItem(cartId);
+        const cartId = `lila-cart-${list}`;
+        const storedCart = localStorage.getItem(cartId);
 
-    if(storedCart) {
+        if(storedCart) {
 
-      try {
+            try {
         
-        cartCache.value = JSON.parse(storedCart);
-        products.value = await paymentProvider.getCartWithProducts(cartCache.value.id);
+                cartCache.value = JSON.parse(storedCart);
 
-      } catch (error) {
+                const cartDocument = await paymentProvider.getCartWithProducts(cartCache.value.id);
+
+                products.value = cartDocument.items || [];
+                prename.value = cartDocument.prename || '';
+                name.value = cartDocument.name || '';
+
+            } catch (error) {
         
-        console.error(error);
-        localStorage.removeItem(cartId);
-        cartCache.value = undefined;
-        await getCart(attributes);
+                console.error(error);
+                localStorage.removeItem(cartId);
+                cartCache.value = undefined;
+                await getCart(attributes);
 
-      }
+            }
 
-      updateSummary();
+            updateSummary();
       
-    } else {
+        } else {
 
-      const newCart = await paymentProvider.getCart(attributes);
+            const newCart = await paymentProvider.getCart(attributes);
 
-      localStorage.setItem(cartId, JSON.stringify(newCart));
+            localStorage.setItem(cartId, JSON.stringify(newCart));
 
-      cartCache.value = newCart;
+            cartCache.value = newCart;
       
-    }
+        }
 
-    return Promise.resolve(cartCache.value);
+        return Promise.resolve(cartCache.value);
 
-  }
+    }
 
-  function getFinishedCart (cartId: string) {
+    function getFinishedCart(cartId: string) {
 
-    return paymentProvider.getFinishedCart(cartId);
+        return paymentProvider.getFinishedCart(cartId);
 
-  }
+    }
 
-  function importCart (cart: any[]) {
+    function importCart(cart: any[]) {
 
-    console.log(cart);
+        console.log(cart);
 
-    products.value = cart;
-    updateSummary();
+        products.value = cart;
+        updateSummary();
 
-  }
+    }
 
-  function updateSummary () {
+    function updateSummary() {
 
-    let costs = 0;
-    let quantity = 0;
+        let costs = 0;
+        let quantity = 0;
 
-    products.value.forEach((single) => {
+        products.value.forEach((single) => {
 
-      costs += ((single.price.amount || 0) / 100) * single.quantity;
-      quantity += single.quantity;
+            costs += ((single.price.amount || 0) / 100) * single.quantity;
+            quantity += single.quantity;
 
-    });
+        });
 
-    costSummary.value = Math.round(costs * 100) / 100
-    itemsQuantity.value = quantity;
+        costSummary.value = Math.round(costs * 100) / 100
+        itemsQuantity.value = quantity;
 
-  }
+    }
 
-  function updateAgreements (acceptedAgreements: Agreement[]) {
+    function updateAgreements(acceptedAgreements: Agreement[], customer?: { prename?: string, name?: string }) {
 
-    const attributes: Record<string, string> = {...cartCache.value.attributes};
+        const attributes: Record<string, string> = {...cartCache.value.attributes};
 
-    acceptedAgreements.forEach((single, index) => {
+        acceptedAgreements.forEach((single, index) => {
       
-      attributes[`agreement_${index}`] = single.contentId;
+            attributes[`agreement_${index}`] = single.contentId;
       
-    });
+        });
 
-    console.log(acceptedAgreements, cartCache.value, attributes);
-    return paymentProvider.updateCartAttributes(cartCache.value.id, attributes);
+        console.log(acceptedAgreements, cartCache.value, attributes);
+        return paymentProvider.updateCartAttributes(cartCache.value.id, attributes, customer);
 
-  }
+    }
 
-  function getProductInCart (productId: string) {
+    function getProductInCart(productId: string) {
 
-    if(!productId) return null;
-    return products.value.find((single) => single.id === productId);
+        if(!productId) return null;
+        return products.value.find((single) => single.id === productId);
 
-  }
+    }
 
-  async function addProduct (productId: string) {
+    async function addProduct(productId: string) {
 
-    const product = await paymentProvider.getProduct(productId);
-    const cart = await getCart();
-    const existingProduct = getProductInCart(product.id);
+        const product = await paymentProvider.getProduct(productId);
+        const cart = await getCart();
+        const existingProduct = getProductInCart(product.id);
 
-    if(!existingProduct) {
+        if(!existingProduct) {
 
-      const updatedProduct = await paymentProvider.addToCart(cart.id, product, 1);
+            const updatedProduct = await paymentProvider.addToCart(cart.id, product, 1);
 
-      products.value.push({...updatedProduct, quantity: 1});
-      updateSummary();
+            products.value.push({...updatedProduct, quantity: 1});
+            updateSummary();
 
-    } else {
+        } else {
 
-      console.log('update instead of add', product.id, existingProduct.quantity);
-      updateQuantity(product.id, existingProduct.quantity + 1);
+            console.log('update instead of add', product.id, existingProduct.quantity);
+            updateQuantity(product.id, existingProduct.quantity + 1);
 
-    }
+        }
 
-  }
+    }
 
-  async function updateQuantity (productId: string, quantity: number) {
+    async function updateQuantity(productId: string, quantity: number) {
 
-    const existingProduct = getProductInCart(productId);
-    const cart = await getCart();
+        const existingProduct = getProductInCart(productId);
+        const cart = await getCart();
 
-    paymentProvider.updateQuantity(cart.id, existingProduct, quantity)
+        paymentProvider.updateQuantity(cart.id, existingProduct, quantity)
 
-    existingProduct.quantity = quantity;
-    updateSummary();
+        existingProduct.quantity = quantity;
+        updateSummary();
 
-  }
+    }
 
-  async function removeProduct (productId: string) {
+    async function removeProduct(productId: string) {
 
-    const existingProduct = getProductInCart(productId);
-    const cart = await getCart();
+        const existingProduct = getProductInCart(productId);
+        const cart = await getCart();
 
-    await paymentProvider.removeFromCart(cart.id, existingProduct);
+        await paymentProvider.removeFromCart(cart.id, existingProduct);
 
-    const index = products.value.findIndex((single) => single.id === productId);
+        const index = products.value.findIndex((single) => single.id === productId);
 
-    products.value.splice(index, 1);
-    updateSummary();
+        products.value.splice(index, 1);
+        updateSummary();
 
-  }
+    }
 
-  function finalize () {
+    function finalize() {
 
-    return paymentProvider.finalize(cartCache.value.id);
+        return paymentProvider.finalize(cartCache.value.id);
 
-  }
+    }
 
-  return { 
-    addProduct, 
-    updateQuantity,
-    removeProduct,
-    updateAgreements,
-    importCart,
-    products,
-    getProductInCart,
-    costSummary,
-    itemsQuantity,
-    getCart,
-    finalize,
-    getFinishedCart,
-    cart: cartCache
-  }
+    return { 
+        addProduct, 
+        updateQuantity,
+        removeProduct,
+        updateAgreements,
+        importCart,
+        products,
+        getProductInCart,
+        costSummary,
+        itemsQuantity,
+        getCart,
+        finalize,
+        getFinishedCart,
+        prename,
+        name,
+        cart: cartCache
+    }
 
 })