format time zone

components/common/SwitchButton.vue

@@ -12,12 +12,14 @@
       :aria-label="`Change the ${id} to ${option.label}`"
       @click="$emit('click', option.label)"
     >
-      {{ option.label }}
+      {{ formatLabel(option.label) }}
     </Component>
   </div>
 </template>
 
 <script>
+import { formatIANATimeZone } from '~/utils/date-utils'
+
 export default {
   props: {
     id: {
@@ -38,6 +40,15 @@ export default {
       return this.options[0].to ? 'nuxt-link' : 'button'
     },
   },
+  methods: {
+    formatLabel(option) {
+      if (this.type === 'button') {
+        return formatIANATimeZone(option)
+      } else {
+        return option
+      }
+    },
+  },
 }
 </script>
 
@@ -93,9 +104,10 @@ export default {
       color: var(--fc-primary);
     }
     &.nuxt-link-exact-active,
+    &:active,
     &--selected {
       z-index: var(--z-index-switch-on);
-      color: var(--fc-light);
+      color: var(--fc-light) !important;
       background-image: linear-gradient(135deg, #c562f5 0%, #f68084 100%);
     }
   }

components/schedule/Slot.vue

@@ -2,7 +2,7 @@
   <div data-cy="slot" class="slot" :class="isTopic && 'slot--topic'">
     <p v-if="content.time" class="slot__time" data-cy="slotTime">
       <span>{{ time }}</span>
-      <span class="slot__time--timezone">{{ selectedTimeZone }}</span>
+      <span class="slot__time--timezone">{{ timeZoneFormated }}</span>
     </p>
     <p class="slot__title" :class="isTopic && 'slot__title--topic'">
       {{ content.title }}
@@ -21,7 +21,7 @@
 
 <script>
 import { mapState } from 'vuex'
-import { getLocalTime } from '~/utils/date-utils'
+import { getLocalTime, formatIANATimeZone } from '~/utils/date-utils'
 
 export default {
   props: {
@@ -45,6 +45,9 @@ export default {
         this.selectedTimeZone
       )
     },
+    timeZoneFormated() {
+      return formatIANATimeZone(this.selectedTimeZone)
+    },
   },
 }
 </script>

cypress/integration/schedule.spec.js

@@ -11,20 +11,20 @@ describe('Schedule', () => {
   it('displays the correct dates for Asia/Magadan time zone', () => {
     cy.window().then((window) => {
       window.updateUserTimeZone('Asia/Magadan')
-      cy.findByText('Asia/Magadan').click()
+      cy.findByText('Magadan').click()
       cy.findByText('Wednesday ⌁ June 9, 2021').should('be.visible')
       cy.findByText('Thursday ⌁ June 10, 2021').should('be.visible')
     })
   })
 
-  it('changes the timezone when the user is in Europe/Madrid timezone instead of America/Los_Angeles', () => {
+  it('changes the timezone when the user is in Europe/Madrid timezone', () => {
     cy.window().then((window) => {
       window.updateUserTimeZone('Europe/Madrid')
       cy.get('[data-cy=slot] > [data-cy=slotTime]').first().as('firstSlot')
       cy.get('@firstSlot').within(() => {
         cy.findByText('9:00 am')
       })
-      cy.findByText('Europe/Madrid').click()
+      cy.findByText('Madrid').click()
       cy.get('@firstSlot').within(() => {
         cy.findByText('6:00 pm')
       })

utils/date-utils.js

@@ -131,3 +131,16 @@ function getMonth(date) {
 function getYear(date) {
   return date.getUTCFullYear()
 }
+
+/**
+ * Formats IANA time zones to display just the city, e.g:
+ * America/Los_Angeles --> Los Angeles
+ *
+ * @param {String} timeZone
+ */
+export function formatIANATimeZone(timeZone) {
+  if (timeZone) {
+    const timeZoneSplit = timeZone.split('/')
+    return timeZoneSplit[1].replace('_', ' ')
+  }
+}