Add new footer element to switch to the correct footer

Relates to MS-714

client/cypress/support/component.ts

@@ -34,7 +34,9 @@ declare global {
   }
 }
 
-Cypress.Commands.add('mount', mount);
+Cypress.Commands.add('mount', (component, ...args) => {
+  return mount(component, ...args);
+});
 
 // Example use:
 // cy.mount(MyComponent)

client/src/helpers/app-flavor.constants.ts

@@ -4,6 +4,7 @@ export const defaultFlavorValues: FlavorValues = {
   appFlavor: 'skillbox',
   appLogo: '/static/logo.png',
   supportLink: 'https://myskillbox.ch/support',
+  baseUrl: 'myskillbox.ch',
 
   // mySkillbox texts
   textAppName: 'mySkillbox',
@@ -28,6 +29,7 @@ export const myKvValues: FlavorValues = {
   appFlavor: 'my-kv',
   appLogo: 'https://skillbox-my-kv-prod.s3-eu-west-1.amazonaws.com/mykv-logo.png',
   supportLink: 'https://www.mykv.ch/support',
+  baseUrl: 'mykv.ch',
 
   // myKV texts
   textAppName: 'myKV',
@@ -50,12 +52,14 @@ export const myKvValues: FlavorValues = {
 
 export const dhfValues: FlavorValues = Object.assign({}, myKvValues, {
   appFlavor: 'my-dhf',
+  baseUrl: 'mydetailhandel.ch',
   appLogo: 'https://skillbox-my-detailhandel-dhf-prod.s3.eu-central-1.amazonaws.com/myDHF-logo.png',
   textAppName: 'myDHF',
   helloIllustration: 'HelloMyDHFIllustration',
 });
 export const dhaValues: FlavorValues = Object.assign({}, myKvValues, {
   appFlavor: 'my-dha',
+  baseUrl: 'mydetailhandel.ch',
   appLogo: 'https://skillbox-my-detailhandel-dha-prod.s3.eu-central-1.amazonaws.com/myDHA-logo.png',
   textAppName: 'myDHA',
   helloIllustration: 'HelloMyDHAIllustration',

client/src/helpers/flavor.stubabble.js

@@ -0,0 +1,15 @@
+import flavor from './app-flavor';
+
+const getFlavor = () => {
+  return flavor;
+};
+
+/*
+ * We have to do this like this, so we're able to stub the method `getFlavor`,
+ * otherwise we get a `ESModules can't be stubbed` error from cypress
+ *
+ * see: https://github.com/cypress-io/cypress/issues/22355#issuecomment-1485716724
+ */
+export const Flavor = {
+  getFlavor,
+};

client/src/helpers/types.ts

@@ -2,6 +2,7 @@ export interface FlavorValues {
   appFlavor: string;
   appLogo: string;
   supportLink: string;
+  baseUrl: string;
   textAppName: string;
   textTopic: string;
   textTopics: string;

client/src/layouts/MyKVFooter.cy.js

@@ -0,0 +1,21 @@
+import MyKVFooter from './MyKVFooter.vue'
+
+describe('<MyKVFooter />', () => {
+  it('renders', () => {
+    // see: https://on.cypress.io/mounting-vue
+    cy.mount(MyKVFooter, {
+      global: {
+        config: {
+          globalProperties: {
+            $flavor: {}
+          }
+        }
+      }
+    })
+    cy.viewport('macbook-15');
+    cy.get('a').eq(0).should('contain', 'Datenschutz');
+    cy.get('a').eq(1).should('contain', 'Impressum');
+    cy.get('a').eq(2).should('contain', 'AGB');
+    cy.get('a').eq(3).should('contain', 'Support');
+  })
+})

client/src/layouts/MyKVFooter.vue

@@ -0,0 +1,139 @@
+<template>
+  <footer
+    class="default-footer"
+    data-cy="page-footer"
+  >
+    <pre>{{ flavor }}</pre>
+    <div class="default-footer__section">
+      <div class="default-footer__links">
+        <a
+          :href="`https://${flavor.baseUrl}/datenschutz`"
+          target="_blank"
+          class="default-footer__link"
+          >Datenschutz</a
+        >
+        <a
+          :href="`https://${flavor.baseUrl}/impressum`"
+          target="_blank"
+          class="default-footer__link"
+          >Impressum</a
+        >
+        <a
+          href="https://myskillbox.ch/agb"
+          target="_blank"
+          class="default-footer__link"
+          >AGB</a
+        >
+        <a
+          :href="flavor.supportLink"
+          target="_blank"
+          class="default-footer__link"
+          >Support</a
+        >
+        <a
+          href="https://www.hep-verlag.ch/"
+          target="_blank"
+        >
+          <hep-logo class="default-footer__logo-hep" />
+        </a>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<script setup lang="ts">
+import { defineAsyncComponent } from 'vue';
+
+import flavor from '@/helpers/app-flavor';
+const HepLogo = defineAsyncComponent(() => import('@/components/icons/HepLogo.vue'));
+</script>
+
+<style scoped lang="scss">
+@import '@/styles/_variables.scss';
+@import '@/styles/_mixins.scss';
+
+.default-footer {
+  background-color: $color-silver-light;
+  max-width: 100vw;
+  overflow: hidden;
+
+  &__section {
+    width: 100%;
+    border-bottom: $color-silver 1px solid;
+    display: flex;
+    justify-content: center;
+  }
+
+  &__info {
+    width: 100%;
+    max-width: $footer-width;
+    padding: 2 * $large-spacing 0;
+    display: flex;
+    flex-direction: column;
+
+    @include desktop {
+      flex-direction: row;
+      justify-content: space-between;
+    }
+  }
+
+  &__who-are-we {
+    width: 100%;
+    margin-bottom: $large-spacing;
+
+    @include desktop {
+      width: 330px;
+      margin-bottom: 0;
+    }
+  }
+
+  &__logo-hep {
+    width: auto;
+    height: 35px;
+    margin-bottom: $large-spacing;
+
+    @include desktop {
+      width: 147px;
+      margin-bottom: 0;
+    }
+  }
+
+  &__logo-ehb {
+    width: 100px;
+    height: 32px;
+  }
+
+  &__links {
+    width: 100%;
+    max-width: $footer-width;
+    padding: $large-spacing 0;
+    display: flex;
+    flex-direction: column;
+
+    @include desktop {
+      flex-direction: row;
+      align-items: center;
+    }
+  }
+
+  &__link {
+    @include aside-with-cheese;
+    margin-right: $large-spacing;
+    margin-bottom: $small-spacing;
+
+    @include desktop {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.who-are-we {
+  &__title {
+    @include heading-4;
+  }
+
+  &__text {
+    @include aside-text;
+  }
+}
+</style>

client/src/layouts/SimpleFooter.cy.js

@@ -0,0 +1,45 @@
+import SimpleFooter from './SimpleFooter.vue';
+import { Flavor } from '@/helpers/flavor.stubabble';
+import { defaultFlavorValues, dhaValues, dhfValues, myKvValues } from '@/helpers/app-flavor.constants';
+
+const checkLinks = (baseUrl) => {
+  cy.mount(SimpleFooter);
+  cy.viewport('macbook-15');
+  cy.get('a')
+    .eq(0)
+    .should('contain', 'Datenschutz')
+    .and('have.attr', 'href')
+    .and('include', `https://${baseUrl}/datenschutz`);
+  cy.get('a')
+    .eq(1)
+    .should('contain', 'Impressum')
+    .and('have.attr', 'href')
+    .and('include', `https://${baseUrl}/impressum`);
+  cy.get('a').eq(2).should('contain', 'AGB').and('have.attr', 'href').and('include', `https://${baseUrl}/agb`);
+  cy.get('a').eq(3).should('contain', 'Support').and('have.attr', 'href').and('include', `https://${baseUrl}/support`);
+};
+
+describe('<SimpleFooter />', () => {
+  it('renders for MySkillbox', () => {
+    // see: https://on.cypress.io/mounting-vue
+    cy.stub(Flavor, 'getFlavor').returns(defaultFlavorValues);
+    cy.mount(SimpleFooter);
+    cy.viewport('macbook-15');
+    cy.get('p').eq(0).should('contain', 'Copyright');
+  });
+  it('renders for MyKV', () => {
+    // see: https://on.cypress.io/mounting-vue
+    cy.stub(Flavor, 'getFlavor').returns(myKvValues);
+    checkLinks('mykv.ch');
+  });
+  it('renders for MyDHA', () => {
+    // see: https://on.cypress.io/mounting-vue
+    cy.stub(Flavor, 'getFlavor').returns(dhaValues);
+    checkLinks('mydetailhandel.ch');
+  });
+  it('renders for MyDHF', () => {
+    // see: https://on.cypress.io/mounting-vue
+    cy.stub(Flavor, 'getFlavor').returns(dhfValues);
+    checkLinks('mydetailhandel.ch');
+  });
+});

client/src/layouts/SimpleFooter.vue

@@ -1,40 +1,24 @@
 <template>
-  <footer class="simple-footer">
+  <component :is="Footer" />
-    <p class="simple-footer__strong">Copyright © 2022 hep Verlag, in Zusammenarbeit mit der EHB</p>
-    <p class="simple-footer__regular">
-      Alle Inhalte von mySkillbox, insbesondere Texte und Grafiken, sind urheberrechtlich geschützt.
-    </p>
-  </footer>
 </template>
 
-<style scoped lang="scss">
+<script setup lang="ts">
-@import '@/styles/_variables.scss';
+import MyKvFooter from '@/layouts/MyKVFooter.vue';
-@import '@/styles/_mixins.scss';
+import SkillboxSimpleFooter from '@/layouts/SkillboxSimpleFooter.vue';
+import { computed } from 'vue';
+import { Flavor } from '@/helpers/flavor.stubabble';
 
-.simple-footer {
+const flavor = Flavor.getFlavor();
-  width: 100%;
+console.log(flavor);
-  justify-self: center;
+console.log(flavor.appFlavor);
-  padding: $large-spacing $small-spacing;
+const Footer = computed(() => {
-  background-color: $color-silver-light;
+  switch (flavor.appFlavor) {
-  display: grid;
+    case 'my-kv':
-  grid-template-columns: 0 1fr 0;
+    case 'my-dha':
-  box-sizing: border-box;
+    case 'my-dhf':
-  overflow: hidden;
+      return MyKvFooter;
-  height: 105px;
+    default:
-
+      return SkillboxSimpleFooter;
-  @include desktop {
-    grid-template-columns: 1fr $footer-width 1fr;
   }
-
+});
-  &__strong {
+</script>
-    @include aside-with-cheese;
-    font-weight: 600;
-    grid-column: 2;
-  }
-
-  &__regular {
-    @include aside-text;
-    grid-column: 2;
-  }
-}
-</style>

client/src/layouts/SimpleLayout.vue

@@ -10,38 +10,41 @@
       <cross class="close-button__icon" />
     </div>
     <router-view class="layout__content" />
-    <simple-footer
+    <footer
       class="layout__footer"
       v-if="enableFooter"
     />
   </div>
 </template>
 
-<script>
+<script lang="ts" setup>
 import SimpleFooter from '@/layouts/SimpleFooter.vue';
-import { defineAsyncComponent } from 'vue';
+import MyKvFooter from '@/layouts/MyKVFooter.vue';
+import { defineAsyncComponent, computed } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import flavor from '@/helpers/app-flavor';
 const Cross = defineAsyncComponent(() => import('@/components/icons/CrossIcon.vue'));
+const route = useRoute();
+const router = useRouter();
 
-export default {
+const Footer = computed(() => {
-  components: {
+  switch (flavor.appFlavor) {
-    Cross,
+    case 'my-kv':
-    SimpleFooter,
+      return MyKvFooter;
-  },
+    default:
+      return SimpleFooter;
+  }
+});
 
-  computed: {
+const enableFooter = computed(() => {
-    enableFooter() {
+  if (route.meta.hideFooter) {
-      if (this.$route.meta.hideFooter) {
+    return false;
-        return false;
+  }
-      }
+  return flavor.showFooter;
-      return this.$flavor.showFooter;
+});
-    },
-  },
 
-  methods: {
+const back = () => {
-    back() {
+  router.go(-1);
-      this.$router.go(-1);
-    },
-  },
 };
 </script>
 

client/src/layouts/SkillboxSimpleFooter.vue

@@ -0,0 +1,40 @@
+<template>
+  <footer class="simple-footer">
+    <p class="simple-footer__strong">Copyright © 2022 hep Verlag, in Zusammenarbeit mit der EHB</p>
+    <p class="simple-footer__regular">
+      Alle Inhalte von mySkillbox, insbesondere Texte und Grafiken, sind urheberrechtlich geschützt.
+    </p>
+  </footer>
+</template>
+
+<style scoped lang="scss">
+@import '@/styles/_variables.scss';
+@import '@/styles/_mixins.scss';
+
+.simple-footer {
+  width: 100%;
+  justify-self: center;
+  padding: $large-spacing $small-spacing;
+  background-color: $color-silver-light;
+  display: grid;
+  grid-template-columns: 0 1fr 0;
+  box-sizing: border-box;
+  overflow: hidden;
+  height: 105px;
+
+  @include desktop {
+    grid-template-columns: 1fr $footer-width 1fr;
+  }
+
+  &__strong {
+    @include aside-with-cheese;
+    font-weight: 600;
+    grid-column: 2;
+  }
+
+  &__regular {
+    @include aside-text;
+    grid-column: 2;
+  }
+}
+</style>