Add new footer element to switch to the correct footer

Relates to MS-714
2023-05-09 22:29:58 +02:00 · 2023-05-09 22:29:58 +02:00 · a856755d96
parent dd66bab53a
commit a856755d96
10 changed files with 311 additions and 57 deletions
--- a/client/cypress/support/component.ts
+++ b/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)
--- a/client/src/helpers/app-flavor.constants.ts
+++ b/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',
--- a/client/src/helpers/flavor.stubabble.js
+++ b/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,
+};
--- a/client/src/helpers/types.ts
+++ b/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;
--- a/client/src/layouts/MyKVFooter.cy.js
+++ b/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');
+  })
+})
--- a/client/src/layouts/MyKVFooter.vue
+++ b/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>
--- a/client/src/layouts/SimpleFooter.cy.js
+++ b/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');
+  });
+});
--- a/client/src/layouts/SimpleFooter.vue
+++ b/client/src/layouts/SimpleFooter.vue
@ -1,40 +1,24 @@
 <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>
+  <component :is="Footer" />
 </template>

-<style scoped lang="scss">
-@import '@/styles/_variables.scss';
-@import '@/styles/_mixins.scss';
+<script setup lang="ts">
+import MyKvFooter from '@/layouts/MyKVFooter.vue';
+import SkillboxSimpleFooter from '@/layouts/SkillboxSimpleFooter.vue';
+import { computed } from 'vue';
+import { Flavor } from '@/helpers/flavor.stubabble';

-.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;
+const flavor = Flavor.getFlavor();
+console.log(flavor);
+console.log(flavor.appFlavor);
+const Footer = computed(() => {
+  switch (flavor.appFlavor) {
+    case 'my-kv':
+    case 'my-dha':
+    case 'my-dhf':
+      return MyKvFooter;
+    default:
+      return SkillboxSimpleFooter;
  }
-
-  &__strong {
-    @include aside-with-cheese;
-    font-weight: 600;
-    grid-column: 2;
-  }
-
-  &__regular {
-    @include aside-text;
-    grid-column: 2;
-  }
-}
-</style>
+});
+</script>
--- a/client/src/layouts/SimpleLayout.vue
+++ b/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 {
-  components: {
-    Cross,
-    SimpleFooter,
-  },
+const Footer = computed(() => {
+  switch (flavor.appFlavor) {
+    case 'my-kv':
+      return MyKvFooter;
+    default:
+      return SimpleFooter;
+  }
+});

-  computed: {
-    enableFooter() {
-      if (this.$route.meta.hideFooter) {
+const enableFooter = computed(() => {
+  if (route.meta.hideFooter) {
    return false;
  }
-      return this.$flavor.showFooter;
-    },
-  },
+  return flavor.showFooter;
+});

-  methods: {
-    back() {
-      this.$router.go(-1);
-    },
-  },
+const back = () => {
+  router.go(-1);
 };
 </script>

--- a/client/src/layouts/SkillboxSimpleFooter.vue
+++ b/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>