Wrong color on opening hours

components/Fields/Field.vue

@@ -10,7 +10,8 @@ import DateRange, { isDateRangeEmpty } from '~/components/Fields/DateRange.vue'
 import Facebook from '~/components/Fields/Facebook.vue'
 import LinkedIn from '~/components/Fields/LinkedIn.vue'
 import Instagram from '~/components/Fields/Instagram.vue'
-import OpeningHours, { isOpeningHoursSupportedOsmTags } from '~/components/Fields/OpeningHours.vue'
+import OpeningHours from '~/components/Fields/OpeningHours.vue'
+import { isOpeningHoursSupportedOsmTags } from '~/composables/useOpeningHours'
 import Phone from '~/components/Fields/Phone.vue'
 import RoutesField from '~/components/Fields/RoutesField.vue'
 import Stars from '~/components/Fields/Stars.vue'

components/Fields/OpeningHours.vue

@@ -1,201 +1,157 @@
-<script lang="ts">
+<script setup lang="ts">
 import type { optional_conf } from 'opening_hours'
 import OpeningHours from 'opening_hours'
-import { mapState } from 'pinia'
-import type { PropType } from 'vue'
-
-import { defineNuxtComponent } from '#app'
+import { storeToRefs } from 'pinia'
 import RelativeDate from '~/components/UI/RelativeDate.vue'
 import { PropertyTranslationsContextEnum } from '~/plugins/property-translations'
-import { siteStore } from '~/stores/site'
-
-const PointTime = [/^collection_times$/, /^service_times$/]
-
-// List of tag keys regex copied from opening_hours.js
-const SupportedOsmKeys = [
-  ...PointTime,
-  /^opening_hours$/,
-  /^opening_hours:.+/,
-  /.+:opening_hours$/,
-  /.+:opening_hours:.+/,
-  /^smoking_hours$/,
-  /^happy_hours$/,
-  /^lit$/,
-]
-
-function isSupportedOsmTags(keys: RegExp[], key: string): boolean {
-  return keys.some(regexKey => regexKey.test(key))
-}
-
-export function isOpeningHoursSupportedOsmTags(key: string): boolean {
-  return isSupportedOsmTags(SupportedOsmKeys, key)
-}
-
-export default defineNuxtComponent({
-  components: {
-    RelativeDate,
-  },
-
-  props: {
-    context: {
-      type: String as PropType<PropertyTranslationsContextEnum>,
-      required: true,
-    },
-    tagKey: {
-      type: String as PropType<string>,
-      required: true,
-    },
-    openingHours: {
-      type: String as PropType<string>,
-      required: true,
-    },
-    baseDate: {
-      type: Date as PropType<Date>,
-      default: () => new Date(),
-    },
-  },
-
-  computed: {
-    ...mapState(siteStore, ['locale', 'settings']),
+import { siteStore as useSiteStore } from '~/stores/site'
+import { PointTime, isSupportedOsmTags } from '~/composables/useOpeningHours'
+
+//
+// Props
+//
+const props = withDefaults(defineProps<{
+  baseDate?: Date
+  context: PropertyTranslationsContextEnum
+  openingHours: string
+  tagKey: string
+}>(), {
+  baseDate: () => new Date(),
+})
 
-    isPointTime(): boolean {
-      return isSupportedOsmTags(PointTime, this.tagKey)
-    },
+//
+// Composables
+//
+const { locale, settings } = storeToRefs(useSiteStore())
+const { t } = useI18n()
 
-    comment() {
-      const oh = this.OpeningHoursFactory()
-      return oh?.getComment(this.baseDate)
-    },
+//
+// Computed
+//
+const isPointTime = computed(() => isSupportedOsmTags(PointTime, props.tagKey))
 
-    isCompact(): boolean {
-      return this.context === PropertyTranslationsContextEnum.Card
-    },
+const comment = computed(() => {
+  const oh = OpeningHoursFactory()
+  return oh?.getComment(props.baseDate)
+})
 
-    pretty(): [string | undefined, string[]][] | undefined {
-      const oh = this.OpeningHoursFactory()
-      if (oh) {
-        let prettyString
-        try {
-          prettyString = oh
-            .prettifyValue({
-              // @ts-expect-error: Fix typings
-              conf: {
-                locale: this.locale || 'en',
-                rule_sep_string: '\n',
-                print_semicolon: false,
-              },
-            })
-            .replace(/(^\w|\s\w)/g, c => c.toUpperCase())
-            .split('\n')
-        }
-        catch (e) {
-          return undefined
-        }
-        if (!this.variable) {
-          return [[undefined, prettyString]]
-        }
-        else {
-          const ret: [string | undefined, string[]][] = []
-          // Stable group by month
-          prettyString
-            .map(
-              row =>
-                (row.includes(': ')
-                  ? [
-                      row.slice(0, row.indexOf(': ')),
-                      row.slice(row.indexOf(': ') + 1 + 1),
-                    ]
-                  : [undefined, row]) as [string | undefined, string],
-            )
-            .forEach(([month, date]) => {
-              const i = ret.findIndex(r => r[0] === month)
-              if (i >= 0)
-                ret[i][1].push(date)
-              else
-                ret.push([month, [date]])
-            })
-          return ret
-        }
-      }
-      else {
-        return undefined
-      }
-    },
+const isCompact = computed(() => props.context === PropertyTranslationsContextEnum.Card)
 
-    variable(): boolean {
-      const oh = this.OpeningHoursFactory()
-      try {
-        return !oh?.isWeekStable()
-      }
-      catch (e) {
-        return false
-      }
-    },
+const variable = computed(() => {
+  const oh = OpeningHoursFactory()
+  try {
+    return !oh?.isWeekStable()
+  }
+  catch (e) {
+    return false
+  }
+})
 
-    nextChange():
-      | undefined
-      | {
-        type: 'opened' | 'openAt'
-        nextChange: Date
-      } {
-      const oh = this.OpeningHoursFactory()
-      if (oh) {
-        try {
-          const nextChange = oh.getNextChange(this.baseDate)
-          if (nextChange) {
-            return {
-              type: oh.getState(this.baseDate) ? 'opened' : 'openAt',
-              nextChange,
-            }
-          }
-        }
-        catch (e) {
-          return undefined
-        }
-      }
+const pretty = computed((): [string | undefined, string[]][] | undefined => {
+  const oh = OpeningHoursFactory()
+  if (oh) {
+    let prettyString
+    try {
+      prettyString = oh
+        .prettifyValue({
+          // @ts-expect-error: Fix typings
+          conf: {
+            locale: locale.value || 'en',
+            rule_sep_string: '\n',
+            print_semicolon: false,
+          },
+        })
+        .replace(/(^\w|\s\w)/g, (c: any) => c.toUpperCase())
+        .split('\n')
+    }
+    catch (e) {
       return undefined
-    },
-  },
+    }
+    if (!variable.value) {
+      return [[undefined, prettyString]]
+    }
+    else {
+      const ret: [string | undefined, string[]][] = []
+      // Stable group by month
+      prettyString
+        .map((row: any) => (
+          row.includes(': ')
+            ? [row.slice(0, row.indexOf(': ')), row.slice(row.indexOf(': ') + 1 + 1)]
+            : [undefined, row]
+        ) as [string | undefined, string])
+        .forEach(([month, date]: any) => {
+          const i = ret.findIndex(r => r[0] === month)
+          if (i >= 0)
+            ret[i][1].push(date)
+          else
+            ret.push([month, [date]])
+        })
+      return ret
+    }
+  }
+  else {
+    return undefined
+  }
+})
 
-  methods: {
-    OpeningHoursFactory(): OpeningHours | undefined {
-      try {
-        // https://github.com/opening-hours/opening_hours.js/issues/428
-        // @ts-expect-error: Fix typings
-        const optionalConf: optional_conf = {
-          tag_key: this.tagKey,
+const nextChange = computed((): { type: 'opened' | 'openAt', nextChange: Date } | undefined => {
+  const oh = OpeningHoursFactory()
+  if (oh) {
+    try {
+      const nextChange = oh.getNextChange(props.baseDate)
+      if (nextChange) {
+        return {
+          type: oh.getState(props.baseDate) ? 'opened' : 'openAt',
+          nextChange,
         }
-        return new OpeningHours(
-          this.openingHours,
-          {
-            lon:
-              (this.settings!.bbox_line.coordinates[0][1]
-              + this.settings!.bbox_line.coordinates[1][1])
-              / 2,
-            lat:
-              (this.settings!.bbox_line.coordinates[0][0]
-              + this.settings!.bbox_line.coordinates[1][0])
-              / 2,
-            address: {
-              country_code: this.settings!.default_country,
-              state: this.settings!.default_country_state_opening_hours,
-            },
-          },
-          optionalConf,
-        )
       }
-      catch (e) {}
-    },
-  },
+    }
+    catch (e) {
+      return undefined
+    }
+  }
+  return undefined
 })
+
+//
+// Methods
+//
+function OpeningHoursFactory(): OpeningHours | undefined {
+  try {
+    // https://github.com/opening-hours/opening_hours.js/issues/428
+    // @ts-expect-error: Fix typings
+    const optionalConf: optional_conf = {
+      tag_key: props.tagKey,
+    }
+    return new OpeningHours(
+      props.openingHours,
+      {
+        lon:
+          (settings.value!.bbox_line.coordinates[0][1]
+          + settings.value!.bbox_line.coordinates[1][1])
+          / 2,
+        lat:
+          (settings.value!.bbox_line.coordinates[0][0]
+          + settings.value!.bbox_line.coordinates[1][0])
+          / 2,
+        address: {
+          country_code: settings.value!.default_country,
+          state: settings.value!.default_country_state_opening_hours,
+        },
+      },
+      optionalConf,
+    )
+  }
+  catch (e) {}
+}
 </script>
 
 <template>
   <div v-if="openingHours">
     <span hidden>{{ openingHours }}</span>
     <template v-if="nextChange">
       <p v-if="isPointTime" id="next" class="tw-text-emerald-500">
-        {{ $t('openingHours.next') }}
+        {{ t('openingHours.next') }}
         <RelativeDate :date="nextChange.nextChange" />
       </p>
       <template v-else>
@@ -204,10 +160,10 @@ export default defineNuxtComponent({
           id="opened"
           class="tw-text-emerald-500"
         >
-          {{ $t('openingHours.opened') }}
+          {{ t('openingHours.opened') }}
           <template v-if="nextChange.nextChange">
             -
-            {{ $t('openingHours.closeAt') }}
+            {{ t('openingHours.closeAt') }}
             <RelativeDate :date="nextChange.nextChange" />
           </template>
         </p>
@@ -216,10 +172,10 @@ export default defineNuxtComponent({
           id="openAt"
           class="tw-text-red-500"
         >
-          {{ $t('openingHours.closed') }}
+          {{ t('openingHours.closed') }}
           <template v-if="nextChange.nextChange">
             -
-            {{ $t('openingHours.openAt') }}
+            {{ t('openingHours.openAt') }}
             <RelativeDate :date="nextChange.nextChange" />
           </template>
         </p>
@@ -246,7 +202,7 @@ export default defineNuxtComponent({
         </li>
       </ul>
       <template v-if="variable">
-        <p>{{ $t('openingHours.variableWeek') }}</p>
+        <p>{{ t('openingHours.variableWeek') }}</p>
       </template>
     </template>
     <template v-if="isCompact && comment">