Chore: update main from develop (#444)

.devcontainer/postCreateCommands.sh

@@ -6,4 +6,6 @@ yarn install
 
 #Copy .env files
 cp apps/dashboard/.env.example apps/dashboard/.env 
-cp apps/point-of-sale/.env.example apps/point-of-sale/.env
+cp apps/point-of-sale/.env.example apps/point-of-sale/.env
+
+yarn build-libraries

README.md

@@ -60,14 +60,15 @@ You can quickly start development directly in your browser by using [Codespaces]
 #### Step 1: Installing
 - Use git to [clone](https://github.com/git-guides#how-do-i-use-git) the repository.
 - Run `yarn install`
-- Copy the .env.example file to .env in the `apps/dashboard` and `apps/point-of-sale` directories
+- Copy the `.env.example` file to `.env` file in the `apps/dashboard` and `apps/point-of-sale` directories
+- Run `yarn build-libraries` to have the SudoSOS libraries also ready
 
 #### Step 2: Running the dashboard/point-of-sale
 - Run `yarn dev-dashboard` or `yarn dev-pos` to start the development environment.
 - You can access the dashboard and point of sale at `localhost:5173` and `localhost:5174` respectively.
 
 ### Proxying requests to different backends
-In the respective `.env` files, you can change which backend the frontend uses in development by changing the `VITE_DEV_API_BASE`. By default, this is set to the test backend (`https://sudosos.test.gewis.nl/api/v1`), but you can also change it to `https://sudosos.gewis.nl/api/v1` for the production backend. Or you can change it to `http://localhost:3000` if you are running the backend locally.   
+In the respective `.env` files, you can change which backend the frontend uses in development by changing the proxy target in vite.config.ts. By default, this is set to the test backend (`https://sudosos.test.gewis.nl/api/v1`), but you can also change it to `https://sudosos.gewis.nl/api/v1` for the production backend. Or you can change it to `http://localhost:3000` if you are running the backend locally.   
 
 ## Contributors
 

apps/dashboard/.env.example

@@ -1,10 +1,3 @@
-VITE_APP_API_BASE='http://localhost:5173/api'
-VITE_APP_IMAGE_BASE='https://sudosos.test.gewis.nl/static/'
-VITE_APP_GEWIS_TOKEN=sudosos-dev
-VITE_APP_STRIPE_PUBLISHABLE_KEY='pk_test_51GsQ83CTbnWP3CTYRobkOgrA4EjkHqvAN6FpDCccxfXayLzj4prFU0GeMIefYW0pvdwXuXqpmqJVLnf6bUyvNJ2T009bK0Sn1L'
-VITE_APP_STRIPE_RETURN_URL='http://localhost:5173/'
 VITE_APP_TREASURER_EMAIL='test@test.com'
 VITE_GIT_COMMIT_BRANCH=''
-VITE_GIT_COMMIT_SHA=''
-# Where the local api requests should be proxied to
-VITE_DEV_API_BASE='https://sudosos.test.gewis.nl/api/v1'
+VITE_GIT_COMMIT_SHA=''

apps/dashboard/src/modules/auth/views/AuthLoginView.vue

@@ -28,9 +28,11 @@ import { useAuthStore } from "@sudosos/sudosos-frontend-common";
 import apiService from "@/services/ApiService";
 import router from "@/router";
 import { useI18n } from "vue-i18n";
+import { useSettingsStore } from "@/stores/settings.store";
 
 const { t } = useI18n();
 
+const settingStore = useSettingsStore();
 const authStore = useAuthStore();
 const route = useRoute();
 const returning = ref();
@@ -58,7 +60,7 @@ onBeforeMount(() => {
   returning.value = hasToken();
 });
 const loginViaGEWIS = () => {
-  window.location.href = `https://gewis.nl/token/${import.meta.env.VITE_APP_GEWIS_TOKEN}`;
+  window.location.href = `https://gewis.nl/token/${settingStore.getToken}`;
 };
 </script>
 

apps/dashboard/src/modules/user/components/balance/BalanceTopupModal.vue

@@ -32,6 +32,7 @@ import apiService from '@/services/ApiService';
 import type { Dinero } from "@sudosos/sudosos-client";
 import { formatPrice } from "@/utils/formatterUtils";
 import { useI18n } from "vue-i18n";
+import { useSettingsStore } from "@/stores/settings.store";
 import { useToast } from "primevue/usetoast";
 
 const { t } = useI18n();
@@ -58,9 +59,10 @@ const toast = useToast();
 const stripe = ref();
 const paymentElement = ref();
 const elements = ref();
+const settingStore = useSettingsStore();
 onBeforeMount(async () => {
   loadStripe.setLoadParameters({ advancedFraudSignals: false });
-  stripe.value = await loadStripe(`${import.meta.env.VITE_APP_STRIPE_PUBLISHABLE_KEY}`);
+  stripe.value = await loadStripe(`${settingStore.getStripe}`);
 
 });
 
@@ -85,7 +87,7 @@ const submitPay = async () => {
   await stripe.value.confirmPayment({
     elements: elements.value,
     confirmParams: {
-      return_url: import.meta.env.VITE_APP_STRIPE_RETURN_URL
+      return_url: window.location.origin
     }
   }).then((result: PaymentIntentResult) => {
     if (result.error) {

apps/dashboard/src/services/ApiService.ts

@@ -1,3 +1,3 @@
 import { ApiService } from "@sudosos/sudosos-frontend-common";
-const apiService = new ApiService(import.meta.env.VITE_APP_API_BASE);
+const apiService = new ApiService(window.location.origin + "/api/v1");
 export default apiService;

apps/dashboard/src/stores/settings.store.ts

@@ -4,16 +4,41 @@ import type { ServerStatusResponse } from '@sudosos/sudosos-client';
 
 export const useSettingsStore = defineStore('settings', {
   state: () => ({
-    settings: {} as ServerStatusResponse
+    status: {} as ServerStatusResponse,
+    token: "",
+    stripe: ""
   }),
   actions: {
     async fetchMaintenanceMode() {
-      this.settings.maintenanceMode = (await apiService.rootApi.ping()).data.maintenanceMode;
+      this.status.maintenanceMode = (await apiService.rootApi.ping()).data.maintenanceMode;
+    },
+    async fetchToken(){
+      await apiService.authenticate.getGEWISWebPublic().then((res) => {
+        this.token = res.data;
+        },
+      ).catch(() => {
+        this.status.maintenanceMode = true;
+      });
+    },
+    async fetchStripe(){
+      await apiService.stripe.getStripePublicKey().then((res) =>{
+        this.stripe = res.data;
+      });
+    },
+    async fetchKeys(){
+      await this.fetchToken();
+      await this.fetchStripe();
     }
   },
   getters: {
     activeSettings(): ServerStatusResponse {
-      return this.settings;
+      return this.status;
+    },
+    getToken(): String {
+      return this.token;
+    },
+    getStripe(): String {
+      return this.stripe;
     }
   }
 });

apps/dashboard/src/utils/beforeLoadUtil.ts

@@ -6,6 +6,7 @@ export default async function beforeLoad() {
 
   const settingsStore = useSettingsStore();
   await settingsStore.fetchMaintenanceMode();
+  await settingsStore.fetchKeys();
 
   await populateStoresFromToken(apiService).catch(() => {
     clearTokenInStorage();

apps/dashboard/src/utils/urlUtils.ts

@@ -12,22 +12,22 @@ export function getProductImageSrc(product: ProductResponse): string {
             return product.image;
         } else {
             // If product.image is not a URL, construct the URL
-            return `${import.meta.env.VITE_APP_IMAGE_BASE}products/${product.image}`;
+            return `${window.location.origin}/static/products/${product.image}`;
         }
     }
 }
 export function getBannerImageSrc(banner: BannerResponse): string {
-    return `${import.meta.env.VITE_APP_IMAGE_BASE}banners/${banner.image}`;
+    return `${window.location.origin}/static/banners/${banner.image}`;
 }
 
 export function getInvoicePdfSrc(pdf: string): string {
-    return `${import.meta.env.VITE_APP_IMAGE_BASE}invoices/${pdf}`;
+    return `${window.location.origin}/static/invoices/${pdf}`;
 }
 
 export function getPayoutPdfSrc(pdf: string): string {
-    return `${import.meta.env.VITE_APP_IMAGE_BASE}payouts/${pdf}`;
+    return `${window.location.origin}/static/payouts/${pdf}`;
 }
 
 export function getSellerPayoutPdfSrc(pdf: string): string {
-    return `${import.meta.env.VITE_APP_IMAGE_BASE}sellerPayouts/${pdf}`;
+    return `${window.location.origin}/static/sellerPayouts/${pdf}`;
 }

apps/dashboard/vite.config.ts

@@ -1,7 +1,9 @@
 import { fileURLToPath, URL } from 'node:url';
-
 import { defineConfig, loadEnv } from 'vite';
 import vue from '@vitejs/plugin-vue';
+
+const PROXY_URL = 'https://sudosos.test.gewis.nl';
+
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd());
@@ -28,10 +30,15 @@ export default defineConfig(({ mode }) => {
     server: {
       port: 5173,
       proxy: {
-        '/api': {
-          target: env.VITE_DEV_API_BASE,
+        '/api/v1': {
+          target: PROXY_URL + '/api/v1',
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/api\/v1/, ''),
+        },
+        'static': {
+          target:  PROXY_URL + '/static',
           changeOrigin: true,
-          rewrite: (path) => path.replace(/^\/api/, ''),
+          rewrite: (path) => path.replace(/^\/static/, ''),
         }
       }
     }

apps/point-of-sale/.env.example

@@ -1,6 +1,3 @@
-VITE_APP_API_BASE='http://localhost:5174/api'
-VITE_APP_IMAGE_BASE='https://sudosos.test.gewis.nl/static/'
 VITE_GIT_COMMIT_BRANCH=''
 VITE_GIT_COMMIT_SHA=''
-# Where the local api requests should be proxied to
-VITE_DEV_API_BASE='https://sudosos.test.gewis.nl/api/v1'
+

apps/point-of-sale/index.html

@@ -6,6 +6,11 @@
       <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
       <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
       <link rel="manifest" href="favicon/manifest.json">
+      <script>
+          // @ts-ignore
+          window.__BASE_URL__ = ((path) => path !== '//' ? `/${path}/` : '/')
+          (window.location.pathname.split('/')[1] || '');
+      </script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
     <title>SudoSOS Point Of Sale</title>
     <!-- For OpenGraph -->

apps/point-of-sale/src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <RouterView/>
-    <img class="image-underlay" src="@/assets/splash.svg" alt="Overlay Image" />
+  <img class="image-underlay" src="@/assets/splash.svg" alt="Overlay Image" />
 </template>
 
 <style lang="scss">
@@ -15,8 +15,8 @@
 
   position: fixed;
   top: -25%;
-  right: 0px;
+  right: -7%;
   height: 175%;
-  width: 33%;
+  width: 45%;
 }
 </style>

apps/point-of-sale/src/components/Keypad/KeypadComponent.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="keypad flex-column">
     <div class="key-row flex justify-content-center" v-for="row in keypadLayout" :key="row[0]">
-      <div :class="['key c-btn active square shadow-2', { outlined: key === keypadBackspace || key === keypadExternal }]"
+      <div :class="['key c-btn active square shadow-2',
+       { outlined: key === keypadBackspace || key === keypadExternal }]"
         v-for="key in row" :key="key" @click="handleKeyClick(key)">
         <i class="pi pi-delete-left text-6xl" v-if="key === keypadBackspace" />
         {{ key !== keypadBackspace ? key : '' }}

apps/point-of-sale/src/components/PointOfSaleDisplay/PointOfSaleDisplayComponent.vue

@@ -36,7 +36,8 @@
     </div>
     <Message v-if="isCategoryAlcoholic && !useSettingStore().isAlcoholTime" severity="warn" class="mr-4">
       Please note that today, alcoholic drinks are only allowed to be served after
-      {{ new Date(useSettingStore().alcoholTimeToday).toLocaleTimeString('nl-NL', { hour: "2-digit", minute: "2-digit" }) }}.
+      {{ new Date(useSettingStore().alcoholTimeToday)
+      .toLocaleTimeString('nl-NL', { hour: "2-digit", minute: "2-digit" }) }}.
       This also applies to non-alcoholic alternatives on this page.
     </Message>
     <PointOfSaleProductsComponent

apps/point-of-sale/src/components/EanLoginComponent.vue → apps/point-of-sale/src/components/ScannersLoginComponent.vue

@@ -1,12 +1,16 @@
 <template>
-  <div class="ean-scanner" />
+  <div class="scanners" />
 </template>
 
 <script setup lang="ts">
 import { onMounted, onUnmounted, PropType } from "vue";
 
 const props = defineProps({
-  handleLogin: {
+  handleNfcLogin: {
+    type: Function as PropType<(nfcCode: string) => Promise<void>>,
+    required: true
+  },
+  handleEanLogin: {
     type: Function as PropType<(eanCode: string) => Promise<void>>,
     required: true
   }
@@ -17,13 +21,23 @@ let captures: KeyboardEvent[] = [];
 /**
  * Handle the input event. When the enter key is pressed, the captured
  * key events are reduced to a string and passed to the handleLogin
- * function. The captures are then reset.
+ * functions. The captures are then reset.
  */
 const onInput = (event: KeyboardEvent): void => {
     if (event.code === 'Enter') {
-    const code = captures.reduce((input, e) => input + e.key, '');
-    props.handleLogin(code);
-    captures = [];
+      const capturedCode = captures.reduce((input, e) => input + e.key, '');
+      const checkCode = capturedCode.substring(0, 3);
+      switch (checkCode) {
+        case 'nfc':
+          props.handleNfcLogin(capturedCode.substring(3));
+          break;
+        case 'ean':
+          // capturedCode.substring(3)
+          break;
+        default:
+          //TODO toast error for user
+      }
+      captures = [];
   } else {
     captures.push(event);
   }
@@ -34,7 +48,7 @@ onMounted(() => {
 });
 
 onUnmounted(() => {
-  document.addEventListener('keydown', onInput);
+  document.removeEventListener('keydown', onInput);
 });
 </script>