Platform/Strata - UI: Strata text updates and minor fixes

strr-base-web/app/components/modal/info/CollectionNotice.vue

@@ -9,10 +9,10 @@
         <template #email>
           <a
             class="text-blue-500 underline"
-            href="mailto:STRregistry@gov.bc.ca"
+            href="mailto:STRBranch@gov.bc.ca"
             target="_blank"
           >
-            STRregistry@gov.bc.ca
+            STRBranch@gov.bc.ca
           </a>
         </template>
       </i18n-t>

strr-base-web/app/locales/en-CA.ts

@@ -422,7 +422,7 @@ export default {
     },
     hint: {
       businessLegalNamePlatform: 'The full legal name of the platform service provider',
-      businessLegalNameStrataHotel: 'The full legal name of the business that is operating the strata hotel. Include corporate designations (e.g., "Ltd.", "Inc.", "LLC.")',
+      businessLegalNameStrataHotel: 'The full legal name of the business that is operating the strata-titled hotel or motel. Include corporate designations (e.g., “Ltd.”, “Inc.”, “LLC.”',
       businessNumber: 'Canada Revenue Agency (CRA) Business Number',
       humeJurisdiction: 'The regional or federal jurisdiction where the business was incorporated or registered, if applicable',
       position: 'Enter your current job title or position'

strr-base-web/app/utils/dashboardHelpers.ts

@@ -62,13 +62,13 @@ export const setSideHeaderDetails = (
     sideDetailsList.push({ label: t('label.registrationNum'), value: registration.registration_number })
     sideDetailsList.push({
       label: t('label.registrationDate'),
-      value: dateToStringPacific(registration.startDate, 'MMMM Do, YYYY')
+      value: dateToStringPacific(registration.startDate, 'DDD')
     })
   } else if (application) {
     sideDetailsList.push({ label: t('label.applicationNum'), value: application.applicationNumber })
     sideDetailsList.push({
       label: t('label.applicationDate'),
-      value: dateToStringPacific(application.applicationDateTime, 'MMMM Do, YYYY')
+      value: dateToStringPacific(application.applicationDateTime, 'DDD')
     })
   }
   if (business.businessNumber) {

strr-base-web/app/utils/date.ts

@@ -1,45 +1,71 @@
-import moment from 'moment'
+// format tokens
+// https://moment.github.io/luxon/#/formatting?id=table-of-tokens
+import { DateTime } from 'luxon'
 
 /** Return the date string as a date
  * @param dateString expected dateString format: YYYY-MM-DD
 */
-export function dateStringToDate (dateString: string) {
-  // convert to date
-  const date = new Date(dateString)
-  // @ts-ignore
-  if (isNaN(date)) { return null }
-  // return date offsetted by local timezone (otherwise it defaults to UTC at 12am)
-  const localOffset = date.getTimezoneOffset()
-  return moment(date).add(localOffset, 'm').toDate()
+export function dateStringToDate (dateString: string): Date | null {
+  const date = DateTime.fromISO(dateString, { zone: 'local' })
+
+  // return null if date is invalid
+  if (!date.isValid) {
+    return null
+  }
+
+  return date.toJSDate()
 }
 
 /** Return the date as a string in the desired format
  * @param date js Date
  * @param format default: YYYY-MM-DDT:HH:mm:ss+-HH:mm
 */
-export function dateToString (date: Date, format?: string) {
-  return (date) ? moment(date).local().format(format) : ''
-}
+// export function dateToString (date: Date, format?: string) {
+//   return (date) ? moment(date).local().format(format) : ''
+// }
 
 /** Convert the date to pacific time and return as a string in the desired format
- * @param date js Date
- * @param format default: YYYY-MM-DDT:HH:mm:ss+-HH:mm
+ * @param {Date | string} date - js Date or ISO datestring
+ * @param format default: YYYY-MM-DD, see format options here
+ * https://moment.github.io/luxon/#/formatting?id=table-of-tokens
  */
-export function dateToStringPacific (date: Date, format?: string) {
-  date = new Date(date.toLocaleString('en-US', { timeZone: 'America/Vancouver' }))
-  return moment(date).format(format)
+export function dateToStringPacific (date: Date | string, format = 'D') {
+  const locale = useNuxtApp().$i18n.locale.value
+  const jsDate = DateTime.fromJSDate(new Date(date), { zone: 'UTC' }) // convert to jsdate, assume UTC timezone
+
+  return jsDate
+    .setZone('America/Vancouver') // convert to pacific
+    .setLocale(locale)
+    .toFormat(format)
 }
 
 /** Return the date string in date format from datetime string format
  * @param datetimeString expected format: YYYY-MM-DDT:HH:mm:ss+-HH:mm
 */
-export function datetimeStringToDateString (datetimeString: string) {
-  const date = new Date(datetimeString)
-  // convert to date and back so that it returns correctly for the timezone
-  return (date) ? moment(date).local().format('YYYY-MM-DD') : ''
-}
+// export function datetimeStringToDateString (datetimeString: string) {
+//   const date = new Date(datetimeString)
+//   // convert to date and back so that it returns correctly for the timezone
+//   return (date) ? moment(date).local().format('YYYY-MM-DD') : ''
+// }
+
+// export function addOneYear (dateString: string) {
+//   const date = dateStringToDate(dateString)
+//   return moment(date).add(1, 'year').format('YYYY-MM-DD')
+// }
+
+/**
+ * Calculates the number of full days remaining until a given end date.
+ *
+ * @param end - The ISO datestring for the end value.
+ * @returns The number of full days remaining until the end date.
+ */
+export function dayCountdown (end: string): number {
+  const startDate = DateTime.utc() // get current utc date
+  const endDate = DateTime.fromISO(end, { setZone: true }).toUTC() // get given end date and convert to utc
+
+  // get difference in days https://moment.github.io/luxon/#/math?id=diffs
+  const diff = endDate.diff(startDate, 'days').toObject().days
 
-export function addOneYear (dateString: string) {
-  const date = dateStringToDate(dateString)
-  return moment(date).add(1, 'year').format('YYYY-MM-DD')
+  // round difference down
+  return Math.floor(diff)
 }

strr-base-web/package.json

@@ -44,7 +44,7 @@
     "@daxiom/nuxt-core-layer-test": "^0.0.10",
     "@vuepic/vue-datepicker": "^9.0.3",
     "country-codes-list": "^1.6.11",
-    "moment": "^2.30.1",
+    "luxon": "^3.5.0",
     "nuxt": "^3.12.3",
     "vue-country-flag-next": "^2.3.2"
   }

strr-platform-web/app/components/form/platform/ReviewConfirm.vue

@@ -227,10 +227,12 @@ onMounted(async () => {
         @edit="$emit('edit', 1)"
       >
         <template #noticeNonCompliance>
-          <span> {{ platBusStore.platformBusiness.nonComplianceEmail || '-' }} </span>
-          <span v-if="platBusStore.platformBusiness.nonComplianceEmailOptional">
-            {{ platBusStore.platformBusiness.nonComplianceEmailOptional }}
-          </span>
+          <div class="flex flex-col">
+            <span> {{ platBusStore.platformBusiness.nonComplianceEmail || '-' }} </span>
+            <span v-if="platBusStore.platformBusiness.nonComplianceEmailOptional">
+              {{ platBusStore.platformBusiness.nonComplianceEmailOptional }}
+            </span>
+          </div>
         </template>
 
         <template #regOfficeAttSvcAddrress>
@@ -242,10 +244,12 @@ onMounted(async () => {
         </template>
 
         <template #takedownRequest>
-          <span> {{ platBusStore.platformBusiness.takeDownEmail || '-' }} </span>
-          <span v-if="platBusStore.platformBusiness.takeDownEmailOptional">
-            {{ platBusStore.platformBusiness.takeDownEmailOptional }}
-          </span>
+          <div class="flex flex-col">
+            <span> {{ platBusStore.platformBusiness.takeDownEmail || '-' }} </span>
+            <span v-if="platBusStore.platformBusiness.takeDownEmailOptional">
+              {{ platBusStore.platformBusiness.takeDownEmailOptional }}
+            </span>
+          </div>
         </template>
 
         <template #businessMailAddress>

strr-platform-web/app/pages/platform/dashboard.vue

@@ -57,7 +57,7 @@ onMounted(async () => {
     } else {
       setHeaderDetails(
         permitDetails.value.status,
-        dateToStringPacific(permitDetails.value.expiryDate, 'MMMM Do, YYYY'),
+        dateToStringPacific(permitDetails.value.expiryDate, 'DDD'),
         downloadApplicationReceipt)
     }
     // add common side details

strr-platform-web/package.json

@@ -2,7 +2,7 @@
   "name": "strr-platform-web",
   "private": true,
   "type": "module",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "scripts": {
     "build-check": "nuxt build",
     "build": "nuxt generate",

strr-strata-web/app/components/form/BusinessDetails.vue

@@ -85,11 +85,11 @@ onMounted(async () => {
             <ConnectFormFieldGroup
               id="strata-business-home-jur"
               v-model="strataBusiness.homeJurisdiction"
-              :aria-label="$t('label.homeJurisdiction')"
+              :aria-label="$t('label.homeJurisdictionOpt')"
               :help="$t('strr.hint.humeJurisdiction')"
               name="homeJurisdiction"
-              :placeholder="t('label.homeJurisdiction')"
-              :is-required="true"
+              :placeholder="t('label.homeJurisdictionOpt')"
+              :is-required="false"
             />
             <ConnectFormFieldGroup
               id="strata-business-number"

strr-strata-web/app/components/form/StrataDetails.vue

@@ -80,6 +80,10 @@ onMounted(async () => {
         class="bg-white"
         :heading="{ label: $t('strr.section.title.buildings'), labelClass: 'font-bold md:ml-6' }"
       >
+        <p class="px-4 pt-10 md:px-10">
+          {{ $t('strr.text.buildingsSubText') }}
+        </p>
+
         <div class="space-y-10 py-10">
           <ConnectFormSection
             :title="$t('strr.section.subTitle.primaryStrataBuilding')"