Merge branch 'remove-account-type' of https://github.com/bcgov/sbc-auth…

… into remove-account-type

auth-web/src/components/auth/account-settings/account-info/AccountAccessType.vue

@@ -34,7 +34,7 @@
                   <span data-test="txt-selected-access-type">{{ getAccessTypeText }}</span>
                 </div>
                 <div
-                  v-if="isChangeButtonEnabled"
+                  v-if="isAccessTypeChangeButtonEnabled"
                 >
                   <span
                     class="primary--text cursor-pointer"
@@ -192,12 +192,9 @@ export default defineComponent({
       changeAccessTypeToRegularDialog: null,
       selectedAccessType: undefined,
       isLoading: false,
-      // Only allow PREMIUM -> GOVN and GOVN -> PREMIUM
-      isChangeButtonEnabled: computed<boolean>(() => {
-        // Check access type and orgtype must be premium
+      isAccessTypeChangeButtonEnabled: computed<boolean>(() => {
         const accessType: any = props.organization.accessType
-        const isAllowedAccessType = props.organization.orgType === Account.PREMIUM &&
-            [AccessType.REGULAR, AccessType.EXTRA_PROVINCIAL, AccessType.REGULAR_BCEID, AccessType.GOVN].includes(accessType)
+        const isAllowedAccessType = [AccessType.REGULAR, AccessType.EXTRA_PROVINCIAL, AccessType.REGULAR_BCEID, AccessType.GOVN].includes(accessType)
         return isAllowedAccessType && props.canChangeAccessType // canChangeAccessType is the role based access passed as a property
       }),
       getAccessTypeText: computed<string>(() => {

auth-web/src/components/auth/account-settings/account-info/AccountInfo.vue

@@ -350,8 +350,10 @@ export default defineComponent({
         userStore.currentUser.roles.includes(Role.StaffSuspendAccounts)
       )),
       isDeactivateButtonVisible: computed(() => currentOrganization.value?.statusCode !== AccountStatus.INACTIVE),
-      canChangeAccessType: computed(() => userStore.currentUser.roles.includes(Role.StaffManageAccounts)) &&
-      !userStore.currentUser.roles.includes(Role.ContactCentreStaff),
+      canChangeAccessType: computed(() => (
+        userStore.currentUser.roles.includes(Role.StaffManageAccounts) &&
+        !userStore.currentUser.roles.includes(Role.ContactCentreStaff)
+      )),
       isAdminContactViewable: computed(() => [Permission.VIEW_ADMIN_CONTACT].some(per => permissions.value.includes(per))),
       isAccountStatusActive: computed(() => currentOrganization.value.statusCode === AccountStatus.ACTIVE),
       accountType: computed(() => {

auth-web/src/components/auth/account-settings/account-info/AccountMailingAddress.vue

@@ -27,7 +27,7 @@
               />
             </div>
             <div
-              v-if="viewOnlyMode"
+              v-if="viewOnlyMode && currentMembership.membershipTypeCode !== MembershipType.User"
               v-can:CHANGE_ADDRESS.hide
             >
               <span
@@ -81,7 +81,9 @@
 <script lang="ts">
 import { defineComponent, ref } from '@vue/composition-api'
 import BaseAddressForm from '@/components/auth/common/BaseAddressForm.vue'
+import { MembershipType } from '@/models/Organization'
 import { addressSchema } from '@/schemas'
+import { useOrgStore } from '@/stores'
 
 export default defineComponent({
   name: 'AccountMailingAddress',
@@ -100,6 +102,9 @@ export default defineComponent({
   },
   emit: ['valid', 'update:address'],
   setup (props, { emit }) {
+    const {
+      currentMembership
+    } = useOrgStore()
     const baseAddressSchema = ref(addressSchema)
 
     const mailingAddress = ref<HTMLFormElement | null>(null)
@@ -122,7 +127,9 @@ export default defineComponent({
       mailingAddress,
       updateAddress,
       checkBaseAddressValidity,
-      triggerValidate
+      triggerValidate,
+      currentMembership,
+      MembershipType
     }
   }
 })

auth-web/src/components/auth/account-settings/payment/AccountPaymentMethods.vue

@@ -79,6 +79,32 @@
         </v-btn>
       </template>
     </ModalDialog>
+    <ModalDialog
+      ref="unsavedChangesDialog"
+      title="Unsaved Changes"
+      text="You're about to leave the page, any information you've entered will not be saved."
+      dialog-class="notify-dialog"
+      max-width="640"
+      :showIcon="false"
+    >
+      <template #actions>
+        <v-btn
+          large
+          color="primary"
+          class="font-weight-bold"
+          @click="exitWithoutSaving"
+        >
+          Exit Without Saving
+        </v-btn>
+        <v-btn
+          large
+          class="font-weight-bold"
+          @click="closeUnsavedChangesDialog"
+        >
+          Return to Page
+        </v-btn>
+      </template>
+    </ModalDialog>
   </div>
 </template>
 
@@ -141,6 +167,7 @@ export default defineComponent({
     })
 
     const errorDialog = ref<InstanceType<typeof ModalDialog>>()
+    const unsavedChangesDialog = ref<InstanceType<typeof ModalDialog>>()
 
     const { currentOrganization, currentOrgPaymentType, currentOrgAddress, currentMembership, permissions, currentOrgGLInfo } = useAccount()
 
@@ -265,10 +292,24 @@ export default defineComponent({
     }
 
     async function cancel () {
+      if (state.paymentMethodChanged) {
+        unsavedChangesDialog.value.open()
+      } else {
+        await initialize()
+        emit('disable-editing')
+      }
+    }
+
+    async function exitWithoutSaving () {
+      unsavedChangesDialog.value.close()
       await initialize()
       emit('disable-editing')
     }
 
+    function closeUnsavedChangesDialog() {
+      unsavedChangesDialog.value.close()
+    }
+
     async function getCreateRequestBody () {
       let isValid = false
       let createRequestBody: CreateRequestBody
@@ -415,7 +456,10 @@ export default defineComponent({
       currentOrgAddress,
       permissions,
       currentUser,
-      setBcolInfo
+      setBcolInfo,
+      unsavedChangesDialog,
+      exitWithoutSaving,
+      closeUnsavedChangesDialog
     }
   }
 })

auth-web/src/components/auth/account-settings/product/ProductPayment.vue

@@ -162,6 +162,7 @@ import {
   TaskType
 } from '@/util/constants'
 import {
+  MembershipType,
   OrgProduct,
   OrgProductCode,
   OrgProductsRequestBody
@@ -205,7 +206,8 @@ export default defineComponent({
       updateAccountFees,
       needStaffReview,
       removeOrgProduct,
-      currentOrganization
+      currentOrganization,
+      currentMembership
     } = useOrgStore()
 
     const {
@@ -243,6 +245,9 @@ export default defineComponent({
         // check for role and account can have service fee (GOVM and GOVN account)
         return currentUser?.roles?.includes(Role.StaffManageAccounts) && state.isVariableFeeAccount
       }),
+      canChangePayment: computed((): boolean => {
+        return currentMembership.membershipTypeCode !== MembershipType.Coordinator
+      }),
       /**
        * Return any sub-product that has a status indicating activity
        * Prioritize Active/Pending for edge-cases when multiple sub product statuses exist

auth-web/src/components/auth/common/PaymentMethods.vue

@@ -26,7 +26,7 @@
               />
               <v-icon
                 medium
-                color="primary"
+                :color="payment.supported ? 'primary' : '#757575'"
                 class="mr-1"
               >
                 {{ payment.icon }}
@@ -167,7 +167,7 @@
 
           <p
             v-if="(payment.type === paymentTypes.BCOL)"
-            class="mt-4 py-4 px-6 important bcol-warning-text"
+            class="mt-4 py-4 px-6 important bcol-warning-text ml-0"
           >
             {{ bcOnlineWarningMessage }}
           </p>

auth-web/src/components/auth/common/Product.vue

@@ -9,7 +9,7 @@
       :data-test="`div-product-${productDetails.code}`"
     >
       <div>
-        <header class="d-flex align-center">
+        <header class="d-flex align-items-start">
           <div
             v-if="!hideCheckbox"
             class="pr-8"
@@ -18,13 +18,13 @@
             <v-checkbox
               :key="Math.random()"
               v-model="productSelected"
-              class="product-check-box ma-0 pa-0"
+              class="product-check-box ma-0 pa-0 align-top"
               hide-details
               :data-test="`check-product-${productDetails.code}`"
               @change="selectThisProduct"
             >
               <template #label>
-                <div class="ml-2">
+                <div class="ml-2 product-card-contents">
                   <h3
                     class="title font-weight-bold product-title mt-n1"
                     :data-test="productDetails.code"
@@ -35,6 +35,7 @@
                   <p
                     v-if="$te(productLabel.subTitle)"
                     v-sanitize="$t(productLabel.subTitle)"
+                    class="mt-2"
                   />
                 </div>
               </template>
@@ -83,6 +84,7 @@
               <p
                 v-if="$te(productLabel.subTitle)"
                 v-sanitize="$t(productLabel.subTitle)"
+                class="mt-2"
               />
             </div>
           </div>
@@ -91,7 +93,7 @@
             depressed
             color="primary"
             width="120"
-            class="font-weight-bold ml-auto"
+            class="font-weight-bold ml-auto mt-6"
             :aria-label="`Select  ${productDetails.description}`"
             :data-test="`btn-productDetails-${productDetails.code}`"
             text
@@ -113,7 +115,7 @@
             >mdi-chevron-down</v-icon></span>
           </v-btn>
         </header>
-        <div class="product-card-contents ml-9">
+        <div class="product-card-contents ml-10">
           <!-- Product Content Slot -->
           <slot name="productContentSlot" />
 
@@ -125,8 +127,24 @@
               <p
                 v-if="$te(productLabel.details)"
                 v-sanitize="$t(productLabel.details)"
-                class="mb-0"
               />
+              <p v-if="$te(productLabel.link)">
+                <v-btn
+                  large
+                  depressed
+                  color="primary"
+                  class="font-weight-bold pl-0"
+                  text
+                  :href="$t(productLabel.link)"
+                  target="_blank"
+                  rel="noopener"
+                  tag="a"
+                >
+                  <span>Visit Information Page</span>
+                  <span class="mdi mdi-open-in-new" />
+                </v-btn>
+              </p>
+
               <p
                 v-if="$te(productLabel.note)"
                 v-sanitize="$t(productLabel.note)"
@@ -155,19 +173,24 @@
             </div>
           </v-expand-transition>
         </div>
-        <div>
-          <v-label class="theme--light">
-            <P class="mt-2">
+        <div class="ml-10 mt-2">
+          <v-label>
+            <P
+              v-if="paymentMethods.length > 0"
+              class="product-card-contents"
+            >
               Supported payment methods:
             </P>
             <v-chip
               v-for="method in paymentMethods"
               :key="method"
-              small
+              x-small
               label
-              class="mr-2 font-weight-bold"
+              class="mr-2 font-weight-bold product-payment-icons py-4 my-2"
             >
-              <v-icon>{{ paymentTypeIcon[method] }}</v-icon>{{ paymentTypeLabel[method] }}
+              <v-icon class="mr-1">
+                {{ paymentTypeIcon[method] }}
+              </v-icon>{{ paymentTypeLabel[method] }}
             </v-chip>
           </v-label>
           <div>
@@ -282,6 +305,7 @@ export default defineComponent({
         let { code } = props.productDetails
         let subTitle = `${code?.toLowerCase()}CodeSubtitle`
         let details = `${code?.toLowerCase()}CodeDescription`
+        let link = `${code?.toLowerCase()}CodeDescriptionLink`
         let note = `${code?.toLowerCase()}CodeNote`
         let decisionMadeIcon = null
         let decisionMadeColorCode = null
@@ -317,7 +341,7 @@ export default defineComponent({
             note = ''
           }
         }
-        return { subTitle, details, decisionMadeIcon, decisionMadeColorCode, note }
+        return { subTitle, details, link, decisionMadeIcon, decisionMadeColorCode, note }
       }),
       showPaymentMethodNotSupported: false
     })
@@ -452,7 +476,17 @@ export default defineComponent({
 }
 
 .theme--light.v-card.v-card--outlined.selected {
-  border-color: var(--v-primary-base);
+  top: 0;
+}
+
+.product-card-contents {
+  color: $gray7;
+}
+
+.product-payment-icons.v-chip.v-size--x-small.theme--light.v-chip:not(.v-chip--active){
+  background-color: $app-lt-blue ;
+  font-size: 12px;
+  color: #212529;
 }
 
 .label-color {

auth-web/src/components/auth/create-account/SelectProductPayment.vue

@@ -37,7 +37,7 @@
       </div>
     </template>
     <v-divider class="mb-5" />
-    <strong>Select a default payment method for your account: </strong>
+    <strong>Select a payment method for your account: </strong>
     <PaymentMethods
       v-display-mode
       :currentOrgType="currentOrganizationType"

auth-web/src/components/auth/create-account/UserProfileForm.vue

@@ -6,13 +6,13 @@
   >
     <p
       v-if="isStepperView"
-      class="mb-9"
+      class="mb-9 profile-subtitle"
     >
       Enter your contact information. Once your account is created, you may add additional users and assign roles.
     </p>
     <p
       v-if="isAffidavitUpload"
-      class="mb-7"
+      class="mb-7 profile-subtitle"
     >
       This will be reviewed by Registries staff and the account will be approved
       when authenticated.
@@ -77,7 +77,7 @@
         </h4>
         <div
           v-if="!isBCEIDUser"
-          class="mb-2"
+          class="mb-2 profile-subtitle"
         >
           This is your legal name as it appears on your BC Services Card.
         </div>
@@ -649,4 +649,7 @@ export default class UserProfileForm extends Mixins(NextPageMixin, Steppable) {
   font-weight: 700;
   letter-spacing: -0.02rem;
 }
+.profile-subtitle {
+  color: $gray7;
+}
 </style>