Merge pull request #145 from shaangill025/fix_22314

UI - Platform URLs and PR info on Application Details Page

strr-web/components/bcros/form-section/property/Form.vue

@@ -46,6 +46,8 @@
 </template>
 
 <script setup lang="ts">
+import { sanitizeUrl } from '@braintree/sanitize-url'
+
 const { isComplete } = defineProps<{
   isComplete: boolean
 }>()
@@ -120,6 +122,10 @@ const validateField = (index: number) => {
   } else {
     listingURLErrors.value = undefined
   }
+
+  formState.propertyDetails.listingDetails[index].url = sanitizeUrl(
+    formState.propertyDetails.listingDetails[index].url
+  )
 }
 
 const validateAllPropertyListingUrls = () => {

strr-web/lang/en.json

@@ -88,6 +88,7 @@
     "unitInfo": "Rental Unit Information",
     "nickname": "Nickname",
     "businessLicense": "Business License",
+    "platformUrl": "Platform URL",
     "ownership": "Ownership Type",
     "address": "Address",
     "propertyType": "Type of Property",
@@ -97,6 +98,11 @@
     "email": "Email Address",
     "phone": "Phone Number",
     "documents": "Documents",
+    "principalResidence": "Principal Residence",
+    "principalResidenceReason": "Reason",
+    "principalResidenceServiceProvider": "Service Provider",
+    "principalResidenceNotApplies": "Principal residence does not apply or my property is exempt",
+    "principalResidenceApplies": "Pincipal residence does apply",
     "proof": "Proof of Principal Residence",
     "ltsaInfo": "LTSA Information",
     "ltsaDetails": "View LTSA Details",

strr-web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "strr-web",
-  "version": "0.1.24",
+  "version": "0.1.25",
   "description": "Short Term Rental Registration UI - Mono repo workspace",
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -50,6 +50,7 @@
   },
   "dependencies": {
     "axios": "^1.6.7",
+    "@braintree/sanitize-url": "^6.0.4",
     "http-status-codes": "^2.3.0",
     "keycloak-js": "^24.0.3",
     "launchdarkly-vue-client-sdk": "^2.0.5",

strr-web/pages/application-details/[id]/index.vue

@@ -77,7 +77,50 @@
                 }}
               </p>
             </BcrosFormSectionReviewItem>
+            <div class="flex-1 max-w-[33.33%]">
+              <template v-if="applicationDetails?.listingDetails && applicationDetails.listingDetails.length > 0">
+                <BcrosFormSectionReviewItem
+                  :title="tApplicationDetails('platformUrl')"
+                >
+                  <a
+                    :href="applicationDetails?.listingDetails[0].url"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="text-ellipsis overflow-hidden break-words"
+                  >
+                    {{ applicationDetails?.listingDetails[0].url }}
+                  </a>
+                </BcrosFormSectionReviewItem>
+              </template>
+            </div>
+          </div>
+          <div class="flex flex-row justify-between w-full mobile:flex-col">
+            <div class="flex-1" />
             <div class="flex-1" />
+            <div class="flex-1 max-w-[33.33%]">
+              <template v-if="applicationDetails?.listingDetails && applicationDetails.listingDetails.length > 1">
+                <div class="flex flex-col">
+                  <div
+                    v-for="(listingDetail, index) in applicationDetails.listingDetails.slice(1)"
+                    :key="index"
+                    :class="{ 'desktop:mt-6 mobile:mt-2': index > 1 }"
+                  >
+                    <BcrosFormSectionReviewItem
+                      :title="tApplicationDetails('platformUrl') + (` ${index + 2}`)"
+                    >
+                      <a
+                        :href="listingDetail.url"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        class="text-ellipsis overflow-hidden break-words"
+                      >
+                        {{ listingDetail.url }}
+                      </a>
+                    </BcrosFormSectionReviewItem>
+                  </div>
+                </div>
+              </template>
+            </div>
           </div>
         </div>
         <div class="mt-10 relative overflow-x-scroll">
@@ -144,6 +187,37 @@
             <UTable :rows="getContactRows(applicationDetails?.secondaryContact)" />
           </div>
         </div>
+        <div class="mt-10 relative overflow-x-scroll">
+          <p class="font-bold mb-6 mobile:mx-2 text-xl">
+            {{ tApplicationDetails('principalResidence') }}
+          </p>
+          <div class="bg-white py-[22px] px-[30px] mobile:px-5">
+            <BcrosFormSectionReviewItem :title="tApplicationDetails('proof')">
+              <p>
+                {{
+                  applicationDetails.principalResidence.isPrincipalResidence
+                    ? tApplicationDetails('principalResidenceApplies')
+                    : tApplicationDetails('principalResidenceNotApplies')
+                }}
+              </p>
+            </BcrosFormSectionReviewItem>
+            <BcrosFormSectionReviewItem
+              v-if="applicationDetails.principalResidence.nonPrincipalOption"
+              :title="tApplicationDetails('principalResidenceReason')"
+              class="mt-4"
+            >
+              <p>{{ applicationDetails.principalResidence.nonPrincipalOption }}</p>
+            </BcrosFormSectionReviewItem>
+            <BcrosFormSectionReviewItem
+              v-if="applicationDetails.principalResidence.specifiedServiceProvider &&
+                applicationDetails.principalResidence.specifiedServiceProvider !== 'n/a'"
+              :title="tApplicationDetails('principalResidenceServiceProvider')"
+              class="mt-4"
+            >
+              <p>{{ applicationDetails.principalResidence.specifiedServiceProvider }}</p>
+            </BcrosFormSectionReviewItem>
+          </div>
+        </div>
         <div v-if="documents.length" class="mt-10">
           <p class="font-bold mb-6 mobile:mx-2 text-xl">
             {{ tApplicationDetails('documents') }}