add route locked content component (#357)

Co-authored-by: Šimon Macek <simon.macek@proficio.cz>

ride_to_work_by_bike_config.toml

@@ -29,6 +29,7 @@ urlTwitter = "https://twitter.com/spolekautomat"
 urlYoutube = "https://www.youtube.com/@spolekautomat"
 urlAppStore = "https://apps.apple.com/cz/app/do-pr%C3%A1ce-na-kole/id1564442780"
 urlGooglePlay = "https://play.google.com/store/apps/details?id=cz.dopracenakole"
+urlVideoLoggingRoutes = "https://www.youtube.com/embed/ItfTtrEutgo?rel=0"
 urlVideoOnboarding = "https://www.youtube.com/embed/ItfTtrEutgo?rel=0"
 
 challengeMonth = "may"

src/components/__tests__/RouteLockedContent.cy.js

@@ -0,0 +1,55 @@
+import RouteLockedContent from 'components/routes/RouteLockedContent.vue';
+import { i18n } from '../../boot/i18n';
+import { rideToWorkByBikeConfig } from 'src/boot/global_vars';
+
+describe('<RouteLockedContent>', () => {
+  it('has translation for all strings', () => {
+    cy.testLanguageStringsInContext(
+      ['hintLockedSection', 'hintWatchVideo'],
+      'routes',
+      i18n,
+    );
+  });
+
+  context('desktop', () => {
+    beforeEach(() => {
+      cy.mount(RouteLockedContent, {
+        props: {},
+      });
+      cy.viewport('macbook-16');
+    });
+
+    coreTests();
+  });
+
+  context('mobile', () => {
+    beforeEach(() => {
+      cy.mount(RouteLockedContent, {
+        props: {},
+      });
+      cy.viewport('iphone-6');
+    });
+
+    coreTests();
+  });
+});
+
+function coreTests() {
+  it('renders component', () => {
+    cy.dataCy('route-locked-content').should('be.visible');
+    cy.dataCy('route-locked-hint-section')
+      .should('be.visible')
+      .and('have.css', 'font-size', '14px')
+      .and('have.css', 'font-weight', '500')
+      .and('contain', i18n.global.t('routes.hintLockedSection'));
+    cy.dataCy('route-locked-hint-video')
+      .should('be.visible')
+      .and('have.css', 'font-size', '14px')
+      .and('have.css', 'font-weight', '700')
+      .and('contain', i18n.global.t('routes.hintWatchVideo'));
+    cy.dataCy('route-locked-video').should('be.visible');
+    cy.dataCy('route-locked-video')
+      .find('iframe')
+      .should('have.attr', 'src', rideToWorkByBikeConfig.urlVideoLoggingRoutes);
+  });
+}

src/components/routes/RouteLockedContent.vue

@@ -0,0 +1,49 @@
+<script lang="ts">
+/**
+ * RouteLockedContent Component
+ *
+ * @description * Use this component to display information in routes tab
+ * when route is locked.
+ *
+ * @example
+ * <route-locked-content></route-locked-content>
+ *
+ * @see [Figma Design](https://www.figma.com/file/L8dVREySVXxh3X12TcFDdR/Do-pr%C3%A1ce-na-kole?type=design&node-id=4858%3A106366&mode=dev)
+ */
+
+// libraries
+import { defineComponent } from 'vue';
+
+// config
+import { rideToWorkByBikeConfig } from '../../boot/global_vars';
+
+export default defineComponent({
+  name: 'RouteLockedContent',
+  setup() {
+    const { urlVideoLoggingRoutes } = rideToWorkByBikeConfig;
+
+    return {
+      urlVideoLoggingRoutes,
+    };
+  },
+});
+</script>
+
+<template>
+  <div data-cy="route-locked-content">
+    <div class="text-center text-subtitle2">
+      <p class="text-black" data-cy="route-locked-hint-section">
+        {{ $t('routes.hintLockedSection') }}
+      </p>
+      <p class="text-black text-weight-bold" data-cy="route-locked-hint-video">
+        {{ $t('routes.hintWatchVideo') }}
+      </p>
+    </div>
+    <q-video
+      :ratio="16 / 9"
+      :src="urlVideoLoggingRoutes"
+      class="q-mt-lg"
+      data-cy="route-locked-video"
+    />
+  </div>
+</template>

src/components/types/Config.ts

@@ -22,6 +22,7 @@ export interface ConfigGlobal {
   urlYoutube: string;
   urlGooglePlay: string;
   urlAppStore: string;
+  urlVideoLoggingRoutes: string;
   urlVideoOnboarding: string;
   challengeMonth: 'may' | 'october' | 'september';
   containerWidth: string;

src/i18n/cs.toml

@@ -384,6 +384,8 @@ hintPassword = "Musí obsahovat alespoň 6 znaků a alespoň 1 písmeno."
 
 [routes]
 actionInputDistance = "Zadat vzdálenost"
+hintLockedSection = "Tato sekce s vám otevře ihned, jakmile začne výzva."
+hintWatchVideo = "Nahlédněte, jak to bude fungovat:"
 labelDistance = "Trasa"
 labelDirectionFromWork = "Z práce"
 labelDirectionToWork = "Do práce"

src/i18n/en.toml

@@ -383,6 +383,8 @@ hintPassword = "It must contain at least 6 characters and at least 1 letter."
 
 [routes]
 actionInputDistance = "Input distance"
+hintLockedSection = "This section will open as soon as the challenge starts."
+hintWatchVideo = "Take a peek at how it will work:"
 labelDistance = "Route"
 labelDirectionFromWork = "From work"
 labelDirectionToWork = "To work"

src/i18n/sk.toml

@@ -383,6 +383,8 @@ hintPassword = "Musí obsahovať aspoň 6 znakov a aspoň 1 písmeno."
 
 [routes]
 actionInputDistance = "Zadať vzdialenosť"
+hintLockedSection = "Táto časť sa otvorí hneď po začatí výzvy."
+hintWatchVideo = "Pozrite sa, ako to bude fungovať:"
 labelDistance = "Trasa"
 labelDirectionFromWork = "Z práce"
 labelDirectionToWork = "Do práce"

src/utils/get_app_conf.js

@@ -50,6 +50,8 @@ const getAppConfig = (process) => {
     config['urlAppStore'] = process.env.URL_APP_STORE;
   } else if (process.env.URL_GOOGLE_PLAY) {
     config['urlGooglePlay'] = process.env.URL_GOOGLE_PLAY;
+  } else if (process.env.URL_VIDEO_LOGGING_ROUTES) {
+    config['urlVideoLoggingRoutes'] = process.env.URL_VIDEO_LOGGING_ROUTES;
   } else if (process.env.URL_VIDEO_ONBOARDING) {
     config['urlVideoOnboarding'] = process.env.URL_VIDEO_ONBOARDING;
   } else if (process.env.CHALLENGE_MONTH) {