@lilaquadrat/design-core 0.1.0

package/src/stores/cart.store.ts

@@ -0,0 +1,186 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+import PaymentProviderFactory from '../functions/PaymenyProviderFactory';
+import useMainStore from './main.store';
+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();
+
+  async function getCart (attributes?: Record<string, string>) {
+
+    if(cartCache.value) return Promise.resolve(cartCache.value);
+    if(!attributes) return Promise.reject('ATTRIBUTES_MISSING');
+
+    const list = attributes.list;
+
+    if(!list) return Promise.reject('NO_LIST_GIVEN');
+
+    const cartId = `lila-cart-${list}`;
+    const storedCart = localStorage.getItem(cartId);
+
+    if(storedCart) {
+
+      try {
+        
+        cartCache.value = JSON.parse(storedCart);
+        products.value = await paymentProvider.getCartWithProducts(cartCache.value.id);
+
+      } catch (error) {
+        
+        console.error(error);
+        localStorage.removeItem(cartId);
+        cartCache.value = undefined;
+        await getCart(attributes);
+
+      }
+
+      updateSummary();
+      
+    } else {
+
+      const newCart = await paymentProvider.getCart(attributes);
+
+      localStorage.setItem(cartId, JSON.stringify(newCart));
+
+      cartCache.value = newCart;
+      
+    }
+
+    return Promise.resolve(cartCache.value);
+
+  }
+
+  function getFinishedCart (cartId: string) {
+
+    return paymentProvider.getFinishedCart(cartId);
+
+  }
+
+  function importCart (cart: any[]) {
+
+    console.log(cart);
+
+    products.value = cart;
+    updateSummary();
+
+  }
+
+  function updateSummary () {
+
+    let costs = 0;
+    let quantity = 0;
+
+    products.value.forEach((single) => {
+
+      costs += ((single.price.amount || 0) / 100) * single.quantity;
+      quantity += single.quantity;
+
+    });
+
+    costSummary.value = Math.round(costs * 100) / 100
+    itemsQuantity.value = quantity;
+
+  }
+
+  function updateAgreements (acceptedAgreements: Agreement[]) {
+
+    const attributes: Record<string, string> = {...cartCache.value.attributes};
+
+    acceptedAgreements.forEach((single, index) => {
+      
+      attributes[`agreement_${index}`] = single.contentId;
+      
+    });
+
+    console.log(acceptedAgreements, cartCache.value, attributes);
+    return paymentProvider.updateCartAttributes(cartCache.value.id, attributes);
+
+  }
+
+  function getProductInCart (productId: string) {
+
+    if(!productId) return null;
+    return products.value.find((single) => single.id === productId);
+
+  }
+
+  async function addProduct (productId: string) {
+
+    const product = await paymentProvider.getProduct(productId);
+    const cart = await getCart();
+    const existingProduct = getProductInCart(product.id);
+
+    if(!existingProduct) {
+
+      const updatedProduct = await paymentProvider.addToCart(cart.id, product, 1);
+
+      products.value.push({...updatedProduct, quantity: 1});
+      updateSummary();
+
+    } else {
+
+      console.log('update instead of add', product.id, existingProduct.quantity);
+      updateQuantity(product.id, existingProduct.quantity + 1);
+
+    }
+
+  }
+
+  async function updateQuantity (productId: string, quantity: number) {
+
+    const existingProduct = getProductInCart(productId);
+    const cart = await getCart();
+
+    paymentProvider.updateQuantity(cart.id, existingProduct, quantity)
+
+    existingProduct.quantity = quantity;
+    updateSummary();
+
+  }
+
+  async function removeProduct (productId: string) {
+
+    const existingProduct = getProductInCart(productId);
+    const cart = await getCart();
+
+    await paymentProvider.removeFromCart(cart.id, existingProduct);
+
+    const index = products.value.findIndex((single) => single.id === productId);
+
+    products.value.splice(index, 1);
+    updateSummary();
+
+  }
+
+  function finalize () {
+
+    return paymentProvider.finalize(cartCache.value.id);
+
+  }
+
+  return { 
+    addProduct, 
+    updateQuantity,
+    removeProduct,
+    updateAgreements,
+    importCart,
+    products,
+    getProductInCart,
+    costSummary,
+    itemsQuantity,
+    getCart,
+    finalize,
+    getFinishedCart,
+    cart: cartCache
+  }
+
+})
+
+export default useCartStore;

package/src/stores/content.store.ts

@@ -0,0 +1,83 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+import type { BasicData, Content, Customers, List } from '@lilaquadrat/interfaces';
+
+export const useContentStore = defineStore('content', () => {
+
+  const content = ref<BasicData<Content>[]>([]);
+  const recipient = ref<Customers>();
+  const list = ref<List>();
+  const context = ref<Record<string, string | undefined | Record<string, string>>>();
+
+  function add (contentToAdd: Content) {
+
+    content.value.push(contentToAdd)
+
+  }
+
+  function addMulti (contentToAdd: Content[]) {
+
+    content.value.push(...contentToAdd);
+
+  }
+
+  function findById (id: string) {
+
+    return content.value.find((single) => single.id === id);
+
+  }
+
+  function findByinternalId (internalId: string) {
+
+    return content.value.find((single) => single._id?.toString() === internalId);
+
+  }
+
+  function findByFilename (filename: string) {
+
+    return content.value.find((single) => single.settings.filename?.includes(filename));
+
+  }
+
+  function setContext (data: {sitetile?: string, description?: string, [key: string]: string | undefined}) {
+
+    context.value = data;
+
+    if(typeof document === 'undefined') return;
+
+    if(data.sitetitle) {
+      
+      document.title = data.sitetitle;
+
+    }
+    
+    if(data.description) {
+
+      const metaDescription = document.querySelector('meta[name="description"]');
+
+      if (metaDescription) {
+
+        metaDescription.setAttribute('content', data.description);
+
+      }
+
+    }
+
+  }
+
+  return {
+    add,
+    addMulti,
+    findById,
+    findByinternalId,
+    findByFilename,
+    content,
+    recipient,
+    list,
+    context,
+    setContext
+  }
+
+})
+
+export default useContentStore;

package/src/stores/editor.store.ts

@@ -0,0 +1,27 @@
+import { ref, shallowRef } from 'vue'
+import { defineStore } from 'pinia'
+import type { EditorActiveModule } from '@lilaquadrat/interfaces';
+
+export const useEditorStore = defineStore('editor', () => {
+
+  const active = ref<EditorActiveModule>({});
+  const availableModulesWithRevision = ref<{ revision: number, modules: any[]}>();
+  const availableModulesWithRevisionMail = ref<{ revision: number, modules: any[]}>();
+  const modulesBrowser = shallowRef<any>();
+  const modulesMail = shallowRef<any>();
+  const partialsBrowser = shallowRef<any>();
+  const partialsMail = shallowRef<any>();
+
+  return { 
+    active, 
+    availableModulesWithRevision,
+    availableModulesWithRevisionMail,
+    modulesBrowser,
+    modulesMail,
+    partialsBrowser,
+    partialsMail,
+  }
+
+})
+
+export default useEditorStore;

package/src/stores/files.store.ts

@@ -0,0 +1,166 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import StudioSDK, { type UploadFile, type UploadProgressCallback, type UploadResult } from '@lilaquadrat/sdk';
+import useMainStore from './main.store';
+
+export interface TokenData {
+  token: string
+  expiresAt: number
+  createdAt: number
+  expiresIn: number
+  app: string
+  scope: 'company' | 'project'
+}
+
+export interface BackendMedia {
+  _id?: string
+  filename?: string
+  assetId?: string
+  app?: string
+  customer?: string
+  list?: string
+  type?: string
+  project?: string
+  company?: string
+  metadata?: {
+    size?: number
+    mimetype?: string
+    tags?: string[]
+  }
+  history?: { created?: string, version?: number, source?: string }
+}
+
+export type QueueItemState = 'pending' | 'creating' | 'uploading' | 'processing' | 'done' | 'error';
+
+export interface QueueItem {
+  id: string
+  file: File
+  state: QueueItemState
+  progress: number
+  structureInternalId?: string
+  assetId?: string
+  app?: string
+  uploadId?: string
+  error?: string
+}
+
+export interface AddFilesOptions {
+  structureInternalId?: string
+  assetId?: string
+}
+
+export interface UploadContext {
+  list?: string
+  contentId?: string
+  moduleUuid?: string
+}
+
+export const useFilesStore = defineStore('files', () => {
+
+  const token = ref<TokenData>();
+
+  function getSdk () {
+
+    const mainStore = useMainStore();
+
+    return new StudioSDK(mainStore.apiConfig);
+
+  }
+
+  async function fetchToken (app: string, scope: 'company' | 'project'): Promise<string> {
+
+    StudioSDK.flushCache();
+
+    const sdk = getSdk();
+    const response = await sdk.members.storage.token(app, scope);
+    const data = response?.data;
+
+    if (data?.token) {
+
+      token.value = {
+        token    : data.token,
+        expiresAt: data.expiresAt,
+        createdAt: data.createdAt,
+        expiresIn: data.expiresIn,
+        app,
+        scope,
+      };
+
+    }
+
+    return data?.token ?? '';
+
+  }
+
+  function isTokenValid (app: string, scope: 'company' | 'project', bufferSeconds = 30): boolean {
+
+    if (!token.value) return false;
+    if (token.value.app !== app) return false;
+    if (token.value.scope !== scope) return false;
+
+    const now = Date.now() / 1000;
+
+    console.log(now + bufferSeconds, token.value.expiresAt, (now + bufferSeconds) < token.value.expiresAt);
+
+    return (now + bufferSeconds) < token.value.expiresAt;
+
+  }
+
+  async function listFiles (app: string, assetId?: string, model?: string): Promise<BackendMedia[]> {
+
+    const options = assetId 
+      ? {assetId: [assetId]}
+      : undefined;
+    const sdk = getSdk();
+    const response = model === 'customers'
+      ? await sdk.members.storage.listCompany(app, 1, options)
+      : await sdk.members.storage.listProject(app, 1, options);
+    const payload = response?.data?.data as BackendMedia[] | undefined;
+
+    return Array.isArray(payload) ? payload : [];
+
+  }
+
+  async function uploadOne (
+    file: File,
+    bucket: string,
+    options: { list?: string, contentId?: string, moduleUuid?: string, structureInternalId?: string },
+    onProgress?: UploadProgressCallback,
+  ): Promise<UploadResult> {
+
+    const sdk = getSdk();
+    const uploadFile: UploadFile = {
+      filename: file.name,
+      size    : file.size,
+      mimetype: file.type || 'application/octet-stream',
+      data    : file,
+    };
+
+    return sdk.members.storage.upload(uploadFile, bucket, options, onProgress);
+
+  }
+
+  async function deleteFile (app: string, id: string) {
+
+    if (!id) return;
+
+    const sdk = getSdk();
+
+    await sdk.members.storage.remove(app, id);
+    StudioSDK.flushCache('storage', 'listProject');
+    StudioSDK.flushCache('storage', 'listCompany');
+
+  }
+
+  return {
+    token,
+    fetchToken,
+    isTokenValid,
+    listFiles,
+    uploadOne,
+    deleteFile,
+  };
+
+});
+
+export default useFilesStore;

package/src/stores/main.store.ts

@@ -0,0 +1,184 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+import type { BasicData, Content, CustomModule } from '@lilaquadrat/interfaces';
+import type EditorConfiguration from '../interfaces/EditorConfiguration.interface';
+import StudioSDK, { type SDKResponse } from '@lilaquadrat/sdk';
+import { useAuth } from '../plugins/auth';
+import type FrontendConfig from '../interfaces/FrontendConfig.interface';
+import type { AxiosError } from 'axios';
+import { computed } from 'vue';
+import { hardCopy } from '@lilaquadrat/studio/lib/esm/frontend';
+
+export const useMainStore = defineStore('main', () => {
+
+  const startupDone = ref<boolean>(false);
+  const clientOnlyStartupDone = ref<boolean>(false);
+  const data = ref<BasicData<Content>>();
+  const layout = ref<BasicData<Content>>();
+  const editorConfiguration = ref<EditorConfiguration>({});
+  const fullscreen = ref<boolean>(false);
+  const config = ref<FrontendConfig>();
+  const isEditor = ref<boolean>(typeof window !== 'undefined' && window !== window.top);
+  /**
+   * there are case where the content should not update if the lock state changed
+   * e.g. the user is connected after using register-main
+   * this state will be set to false by the next navigation
+   */
+  const disabledLockUpdate = ref<boolean>(false);
+  const staticData = ref<Record<string, Partial<BasicData<Content>>>>();
+  const customModulesBrowser = ref<CustomModule[]>();
+  const customModulesMail = ref<CustomModule[]>();
+  const target = ref<'browser'|'mail'>();
+
+  function setData (value: BasicData<Content>) {
+
+    data.value = value;
+
+  }
+
+  function setFullscreen (value: boolean) {
+
+    fullscreen.value = value;
+
+    if (!document) return;
+
+    const { body } = document;
+
+    if (value) {
+
+      body.classList.add('fullscreen');
+
+    } else {
+
+      if (body.classList.contains('fullscreen')) {
+        body.classList.remove('fullscreen');
+      }
+
+    }
+
+  }
+
+  function checkFullscreen () {
+
+    const elements = document.querySelectorAll('.overlay-background:not(.inactive)');
+
+    if (!elements.length) setFullscreen(false);
+
+  }
+
+  function setConfiguration (value: EditorConfiguration) {
+
+    editorConfiguration.value = value;
+
+  }
+
+  const apiConfig = computed(() => {
+
+    const { authToken } = useAuth();
+
+    return {
+      authToken,
+      ...config.value?.api,
+      company: config.value?.company,
+      project: config.value?.project,
+      app    : config.value?.name as string
+    }
+
+  });
+
+  async function getContent(params: { filename: string }, type: 'public' | 'members'): Promise<SDKResponse<BasicData<Content>|undefined>>
+  async function getContent(params: { id: string }, type: 'public' | 'members'): Promise<SDKResponse<BasicData<Content>|undefined>>
+  async function getContent(params: { internalId: string }, type: 'public' | 'members'): Promise<SDKResponse<BasicData<Content>|undefined>>
+  async function getContent(params: { latest?: boolean, predefined?: boolean, categories?: string[] }, type: 'public' | 'members'): Promise<SDKResponse<BasicData<Content>|undefined>>
+  async function getContent (params: { predefined?: boolean, filename?: string, latest?: boolean, id?: string, internalId?: string, categories?: string[] }, type: 'public' | 'members'): Promise<SDKResponse<BasicData<Content>|undefined>> {
+
+    const sdk = new StudioSDK(apiConfig.value);
+    const targetWithType = sdk[type === 'members' ? 'members' : 'public'];
+
+    if(params.filename && data.value?.settings?.filename?.includes(params.filename)) {
+
+      return hardCopy<SDKResponse<BasicData<Content>>>({ data: data.value, status: 200 });
+
+    }
+
+    if (params.id && data.value?.id === params.id) {
+
+      return hardCopy<SDKResponse<BasicData<Content>>>({ data: data.value, status: 200 });
+
+    }
+
+    if (params.internalId && data.value?._id?.toString() === params.internalId) {
+
+      return hardCopy<SDKResponse<BasicData<Content>>>({ data: data.value, status: 200 });
+
+    }
+
+    try {
+
+      if (params.predefined && !params.latest && params.id && type === 'public') {
+
+        return sdk.public.content.predefined(params.id);
+
+      } else if (params.predefined && params.latest && params.categories && type === 'public') {
+
+        return sdk.public.content.predefinedLatest(params.categories);
+
+      } else if (params.internalId) {
+
+        return targetWithType.content.getByInternalId(params.internalId);
+
+      } else if (params.id) {
+
+        return targetWithType.content.getById(params.id);
+
+      } else if (params.filename) {
+
+        return targetWithType.content.getByFilename(params.filename);
+
+      }
+
+    } catch (e) {
+
+      const error = e as AxiosError;
+
+      if (!error.response?.status) {
+
+        return { status: 400, data: undefined} 
+
+      } else {
+
+        return { status: error?.response?.status, data: undefined };
+
+      }
+
+    }
+
+    return { status: 400, data: undefined};
+
+  }
+
+  return {
+    setData,
+    data,
+    layout,
+    fullscreen,
+    setFullscreen,
+    checkFullscreen,
+    setConfiguration,
+    configuration: editorConfiguration,
+    getContent,
+    startupDone,
+    clientOnlyStartupDone,
+    config,
+    staticData,
+    apiConfig,
+    customModulesBrowser,
+    customModulesMail,
+    target,
+    disabledLockUpdate,
+    isEditor
+  }
+
+});
+
+export default useMainStore;