Adding step & application confirm fixes

strr-web/components/bcros/chip/Chip.vue

@@ -2,7 +2,6 @@
   <div
     :class="
       `
-        mobile:hidden
         ${flavourClass}
         mb-[24px] font-bold px-[12px] py-[4px] flex-shrink flex h-fit w-fit rounded
       `
@@ -17,24 +16,30 @@
 import { AlertsFlavourE } from '~/enums/alerts-e'
 
 const { flavour } = defineProps<{
-  flavour: AlertsFlavourE
+  flavour: {
+    alert: AlertsFlavourE,
+    text: string
+  }
 }>()
 
 const flavourClass = ref('')
 
-switch (flavour) {
+switch (flavour.alert) {
   case AlertsFlavourE.ALERT:
     flavourClass.value = 'text-red-500 bg-red-100'
     break
   case AlertsFlavourE.SUCCESS:
     flavourClass.value = 'bg-green-100'
     break
   case AlertsFlavourE.WARNING:
-    flavourClass.value = 'text-orange-500 bg-orange-100'
+    flavourClass.value = 'text-[#6c4a00] bg-[#f9f1c6]'
     break
   case AlertsFlavourE.INFO:
     flavourClass.value = 'text-orange-500 bg-yellow-50'
     break
+  case AlertsFlavourE.APPLIED:
+    flavourClass.value = 'text-[#313132] bg-[#d9eaf7]'
+    break
   case AlertsFlavourE.MESSAGE:
     flavourClass.value = ''
     break

strr-web/components/bcros/existing-accounts-list/ExistingAccountsList.vue

@@ -63,13 +63,12 @@ import { formState } from '@/stores/strr'
 
 const { accounts } = defineProps<{ accounts: OrgI[] }>()
 const t = useNuxtApp().$i18n.t
-const { goToCreateAccount } = useBcrosNavigate()
+const { goToCreateAccount, goToCreateSbcAccount } = useBcrosNavigate()
 
 const buttonText = t('account.existing-account-section.use-account-button')
 
 const createButtonAction = () => {
-  formState.selectedAccount = {} as OrgI
-  goToCreateAccount()
+  goToCreateSbcAccount()
 }
 
 const chooseButtonAction = (account: OrgI) => {

strr-web/components/bcros/form-section/principal-residence/Form.vue

@@ -44,6 +44,7 @@
             :options="exemptionReasons"
             option-attribute="key"
             class="w-full text-[16px]"
+            style="color: #1a202c; /* text-gray-900 */ dark:text-white; /* Override with dark mode text color */"
             aria-label="Exemption reason"
             @blur="(event: any, reason: string) => validateReason(reason, event)"
             @change="(reason: string) => validateReason(reason)"
@@ -63,6 +64,7 @@
             :options="otherExemptionReasons"
             option-attribute="key"
             class="w-full text-[16px]"
+            style="color: #1a202c; /* text-gray-900 */ dark:text-white; /* Override with dark mode text color */"
             aria-label="Other exemption reason"
             @blur="(event: any, reason: string) => validateOtherReason(reason, event)"
             @change="(reason: string) => validateOtherReason(reason)"

strr-web/components/bcros/status-card/StatusCard.vue

@@ -3,19 +3,20 @@
     :class="
       `
         ${single ? 'flex-1': ''}
+        w-full
         mb-[42px] mobile:mb-[24px] justify-between flex-col
         bg-white px-[30px] mobile:px-[8px] py-[22px]
         border-[2px] border-bcGovColor-hairlinesOnWhite
       `
     "
   >
     <BcrosChip :flavour="flavour" class="mobile:hidden">
-      {{ tRegistrationStatus(status) }}
+      {{ flavour.text }}
     </BcrosChip>
     <div class="flex w-full justify-between">
       <slot />
-      <BcrosChip :flavour="flavour" class="desktop: hidden">
-        {{ tRegistrationStatus(status) }}
+      <BcrosChip :flavour="flavour" class="desktop:hidden">
+        {{ flavour.text }}
       </BcrosChip>
     </div>
     <div class="flex flex-row text-bcGovColor-activeBlue justify-start">
@@ -40,11 +41,12 @@ const tRegistrationStatus = (translationKey: string) => t(`registration-status.$
 
 const {
   single,
-  status,
   flavour
 } = defineProps<{
   single: boolean,
-  status: string,
-  flavour: AlertsFlavourE
+  flavour: {
+    text: string,
+    alert: AlertsFlavourE
+  }
 }>()
 </script>

strr-web/composables/useBcrosNavigate.ts

@@ -33,6 +33,9 @@ export const useBcrosNavigate = () => {
   function goToTransactions () {
     redirect(config.public.authWebURL + `account/${account.currentAccount.id}/settings/transactions`)
   }
+  function goToCreateSbcAccount () {
+    router.push('/finalization')
+  }
   function goToCreateAccount () {
     router.push('/create-account')
   }
@@ -45,6 +48,7 @@ export const useBcrosNavigate = () => {
     goToBcrosHome,
     goToBcrosLogin,
     goToAccountInfo,
+    goToCreateSbcAccount,
     goToCreateAccount,
     goToEditProfile,
     goToSetupAccount,

strr-web/enums/alerts-e.ts

@@ -3,5 +3,6 @@ export enum AlertsFlavourE {
   INFO = 'info',
   WARNING = 'warning',
   SUCCESS = 'success',
-  MESSAGE = 'message'
+  MESSAGE = 'message',
+  APPLIED = 'pending'
 }

strr-web/interfaces/registration-i.ts

@@ -10,6 +10,13 @@ export interface RegistrationAddressI {
 
 export interface RegistrationI {
   id: number,
+  invoices: {
+    'invoice_id': number,
+    'payment_account': string,
+    'payment_completion_date': string,
+    'payment_status_code': string,
+    'registration_id': number
+  }[],
   listingDetails: { url: string }[],
   primaryContact: ContactI,
   principalResidence: PrincipalResidenceI,

strr-web/lang/en.json

@@ -17,6 +17,8 @@
     "APPROVED": "APPROVED",
     "MORE_INFO_NEEDED": "PROVISIONAL",
     "DENIED": "DENIED",
+    "applied": "Applied",
+    "payment-due": "Payment Due",
     "create": "Create New Registration",
     "my-app": "My Registration Application",
     "title": "My STR Registry Dashboard",

strr-web/layouts/wideGutters.vue

@@ -0,0 +1,13 @@
+<template>
+  <div data-cy="default-layout">
+    <div class="flex justify-between flex-col min-h-screen">
+      <BcrosHeader />
+      <div class="flex grow justify-center">
+        <div class="grow desktop:px-[75px] pt-[75px] mobile:pt-[20px]">
+          <NuxtPage />
+        </div>
+      </div>
+      <BcrosFooter :extra-space="false" />
+    </div>
+  </div>
+</template>

strr-web/pages/application-status.vue

@@ -15,21 +15,22 @@
           class-name="mobile:hidden"
         />
       </div>
-      <div class="flex flex-row mobile:flex-col flex-wrap">
+      <div class="flex flex-row mobile:flex-col flex-wrap desktop:justify-between">
         <div
           v-for="registration in registrations"
-          :key="registration.id"
+          :key="registration?.id"
           :class="`
             ${
             registrations && registrations?.length > 1
-              ? 'desktop:w-[calc(33%-20px)]'
+              ? 'desktop:w-[calc(33%-24px)]'
               : 'desktop:w-full flex-grow flex-1'
           }
             flex flex-row mobile:flex-col
           `"
         >
           <BcrosStatusCard
-            :flavour="getFlavour(registration.status)"
+            v-if="registration"
+            :flavour="getFlavour(registration.status, registration?.invoices)"
             :status="registration.status"
             :single="!(registrations && registrations?.length > 1)"
           >
@@ -66,31 +67,57 @@
         </div>
       </div>
     </div>
+    <div class="w-full h-[120px] bg-white desktop:hidden flex justify-center items-center p-[8px]">
+      <BcrosButtonsPrimary
+        :text="tRegistrationStatus('create')"
+        :action="() => navigateTo('/create-account')"
+        icon="i-mdi-plus"
+      />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { AlertsFlavourE } from '#imports'
+
 definePageMeta({
-  layout: 'wide'
+  layout: 'wide-gutters'
 })
 
 const t = useNuxtApp().$i18n.t
 const tRegistrationStatus = (translationKey: string) => t(`registration-status.${translationKey}`)
 
 const { getRegistrations } = useRegistrations()
-const registrations = ref<RegistrationI[]>()
-registrations.value = await getRegistrations()
+const registrations = ref<(RegistrationI | null)[]>()
+const fetchedRegistrations = await getRegistrations()
 
-const getFlavour = (status: string) => {
-  switch (status) {
-    case 'DENIED':
-      return AlertsFlavourE.ALERT
-    case 'APPROVED':
-      return AlertsFlavourE.SUCCESS
-    case 'PENDING':
-      return AlertsFlavourE.WARNING
-    default:
-      return AlertsFlavourE.INFO
+const addSpacingToRegistrations = (): (RegistrationI | null)[] => {
+  const spacedRegistrations: (RegistrationI | null)[] = [...fetchedRegistrations]
+  while (spacedRegistrations.length % 3 !== 0) {
+    spacedRegistrations.push(null)
+  }
+  return spacedRegistrations
+}
+
+registrations.value =
+  fetchedRegistrations.length % 3 === 0 &&
+  fetchedRegistrations.length !== 1
+    ? fetchedRegistrations
+    : addSpacingToRegistrations()
+
+const getFlavour = (status: string, invoices: RegistrationI['invoices']):
+  { alert: AlertsFlavourE, text: string } | undefined => {
+  if (status === 'PENDING' && invoices[0].payment_status_code === 'COMPLETED') {
+    return {
+      text: tRegistrationStatus('applied'),
+      alert: AlertsFlavourE.APPLIED
+    }
+  }
+  if (status === 'PENDING' && invoices[0].payment_status_code !== 'COMPLETED') {
+    return {
+      text: tRegistrationStatus('payment-due'),
+      alert: AlertsFlavourE.WARNING
+    }
   }
 }
 

strr-web/pages/create-account.vue

@@ -5,7 +5,12 @@
         <div class="grow pr-[24px] mobile:pr-[0px]">
           <div class="mobile:px-[8px]">
             <BcrosTypographyH1 text="create-account.title" data-cy="accountPageTitle" class="mobile:pb-[20px]" />
-            <BcrosStepper :active-step="activeStepIndex" :steps="steps" @change-step="setActiveStep" />
+            <BcrosStepper
+              :key="headerUpdateKey"
+              :active-step="activeStepIndex"
+              :steps="steps"
+              @change-step="setActiveStep"
+            />
           </div>
           <div :key="activeStepIndex" class="grow">
             <div class="mobile:px-[8px]">
@@ -66,6 +71,7 @@ const activeStep: Ref<FormPageI> = ref(steps[activeStepIndex.value])
 const tPrincipalResidence = (translationKey: string) => t(`create-account.principal-residence.${translationKey}`)
 const contactForm = ref()
 const fee = ref<string>()
+const headerUpdateKey = ref(0)
 
 const { getFeeAmount } = useFees()
 
@@ -116,6 +122,12 @@ const ownershipToApiType = (type: string | undefined): string => {
 }
 
 const submit = () => {
+  validateStep(contactSchema, formState.primaryContact, 0)
+  validateStep(contactSchema, formState.secondaryContact, 0)
+  validateStep(propertyDetailsSchema, formState.propertyDetails, 1)
+  steps[1].step.complete = true
+  steps[2].step.complete = true
+  headerUpdateKey.value++
   formState.principal.agreeToSubmit
     ? submitCreateAccountForm(
       userFirstName,
@@ -138,29 +150,20 @@ const setStepValid = (index: number, valid: boolean) => {
   steps[index].step.isValid = valid
 }
 
+const validateStep = (schema: any, state: any, index: number) => {
+  steps[index].step.isValid = schema.safeParse(state).success
+}
+
 watch(formState.primaryContact, () => {
-  if (contactSchema.safeParse(formState.primaryContact).success) {
-    setStepValid(0, true)
-  } else {
-    setStepValid(0, false)
-  }
+  validateStep(contactSchema, formState.primaryContact, 0)
 })
 
 watch(formState.secondaryContact, () => {
-  if (contactSchema.safeParse(formState.secondaryContact).success) {
-    setStepValid(0, true)
-  } else {
-    setStepValid(0, false)
-  }
+  validateStep(contactSchema, formState.secondaryContact, 0)
 })
 
 watch(formState.propertyDetails, () => {
-  const parsed = propertyDetailsSchema.safeParse(formState.propertyDetails)
-  if (parsed.success) {
-    setStepValid(1, true)
-  } else {
-    setStepValid(1, false)
-  }
+  validateStep(propertyDetailsSchema, formState.propertyDetails, 1)
 })
 
 const validateProofPage = () => {

strr-web/tailwind.config.ts

@@ -7,7 +7,7 @@ export default <Partial<Config>>{
       d: { min: '1263px' },
       m: { max: '1263px' },
       desktop: { min: '1263px' },
-      mobile: { max: '1263px' }
+      mobile: { max: '1262px' }
     },
     extend: {
       height: {