23207 - Product Selection and Payment Method Changes

auth-web/.env.example

@@ -34,7 +34,7 @@ VUE_APP_CORPORATE_ONLINE_URL="https://www.corporateonline.gov.bc.ca"
 VUE_APP_NRO_URL="https://dev.bcregistrynames.gov.bc.ca/nro/"
 VUE_APP_REGISTRY_SEARCH_URL="https://dev.search.business.bcregistry.gov.bc.ca/"
 VUE_APP_NAMEX_WEB_URL="https://dev.namex.bcregistry.gov.bc.ca/"
-VUE_APP_BUSINESS_REGISTRY_URL="https://dev.business-registry-dashboard.bcregistry.gov.bc.ca/"
+VUE_APP_BUSINESS_REGISTRY_URL="https://business-registry-dev.web.app/"
 
 #vaults API
 VUE_APP_AUTH_API_URL="https://auth-api-dev.apps.silver.devops.gov.bc.ca"

auth-web/.eslintrc.js

@@ -23,6 +23,7 @@ module.exports = {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-case-declarations': 'warn',
+    'no-nested-ternary': 'error',
     'sort-imports': 'error',
     'space-before-function-paren': 1,
     'no-use-before-define': 'off',
@@ -47,7 +48,7 @@ module.exports = {
     '@typescript-eslint/no-use-before-define': ['error', { 'functions': false, 'classes': true, 'variables': true }],
     'no-unused-expressions': 'off',
     '@typescript-eslint/no-unused-expressions': ['error', { 'allowShortCircuit': true, 'allowTernary': true }],
-    'vue/multi-word-component-names': ['error', { 'ignores': ['Transactions'] }],
+    'vue/multi-word-component-names': ['error', { 'ignores': ['Transactions', 'Product'] }],
     'vue/component-name-in-template-casing': ['error', 'PascalCase'],
     // Not ideal but shallowOnly option isn't working for this, so leaving it off for now.
     // https://eslint.vuejs.org/rules/no-mutating-props.html

auth-web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "auth-web",
-  "version": "2.7.8",
+  "version": "2.8.1",
   "appName": "Auth Web",
   "sbcName": "SBC Common Components",
   "private": true,
@@ -27,7 +27,7 @@
     "@sentry/vue": "^8.33.1",
     "@vue/compiler-dom": "^3.2.45",
     "@vue/composition-api": "^1.7.1",
-    "axios": "^1.6.1",
+    "axios": "^1.7.4",
     "http-status-codes": "^2.1.4",
     "js-base64": "^3.7.5",
     "keycloak-js": "^9.0.3",

auth-web/src/assets/scss/theme.scss

@@ -10,15 +10,17 @@
 
 // Gray Palette
 $gray0: #f8f9fa;
-$gray1: #f1f3f5;
+$gray1: #f1f3f5; // Primary Background and Form Fields
 $gray2: #e9ecef;
 $gray3: #dee2e6;
 $gray4: #ced4da;
 $gray5: #adb5bd;
 $gray6: #868e96;
-$gray7: #495057;
+$gray7: #495057; //Text Mid Gray
 $gray8: #343a40;
-$gray9: #212529;
+$gray9: #212529; //Text Dark Gray
+$grayLight: #757575; //Text/Light Gray
+
 
 // BC GOV BLUE PALETTE
 $BCgovBlue0: #e0e7ed;
@@ -48,7 +50,7 @@ $BCgovABlue3: #0846ff;
 $BCgovABlue4: #003bee;
 
 // BC GOV GOLD PALETTE
-$BCgovGold0: #fff7e3;
+$BCgovGold0: #fff7e3; // Caution Background
 $BCgovGold1: #feeaba;
 $BCgovGold2: #fedd8c;
 $BCgovGold3: #fdcf5e;
@@ -77,21 +79,21 @@ $BCgovInputBG: #ffffff;
 // Font Colors
 $BCgovFontColorInverted: #ffffff;
 $BCgovBlack: #000000;
-$bcgovBorderblue:#38598a;
+$bcgovBorderblue:#38598a; // Non-clickable icon, helpful hint specialty text and special graphics
 // Warning Colors
 $BCgovOrangeWarning: #EF6A01;
 
 // App Colors
-$app-blue: #1669bb; // same as the Vuetify theme primary
-$app-lt-blue: #E2E8EE; // LOW OPACITY PRIMARY BLUE
-$app-background-blue: #E4EDF7; // Hover Background Blue
+$app-blue: #1669bb; // same as the Vuetify theme primary Link / Button / Active Icons
+$app-lt-blue: #E2E8EE; // LOW OPACITY PRIMARY BLUE - BG/Gray2
+$app-background-blue: #E4EDF7; // Hover Background Blue - Specialty Highlights
 $app-dk-blue: #38598a;
 $app-green: #2E8540;
 $app-red: #D3272C;
-$app-background-error: #FAE9E9;
+$app-background-error: #FAE9E9; // Important or warning background
 $app-alert-orange: #F8661A;
 
-$table-green: #E8F5E9;
+$table-green: #E8F5E9; // New Registration etc
 
 // p, span tag text color incase needs to be same as vuetify component text
 $TextColorGray: #00000099;
@@ -108,3 +110,5 @@ $px-20: 1.2500rem;
 $px-22: 1.3750rem;
 $px-24: 1.5000rem;
 $px-32: 2.0000rem;
+
+

auth-web/src/components/IconTooltip.vue

@@ -51,7 +51,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import "$assets/scss/theme.scss";
 .bottom-tooltip:before {
   content: ' ';
   position: absolute;

auth-web/src/components/SupportInfoCard.vue

@@ -26,8 +26,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  @import "../assets/scss/theme.scss";
-
   .v-card__title {
     padding-top: 1.25rem;
     padding-left: 1.5rem;

auth-web/src/components/auth/BceidInviteLanding.vue

@@ -155,8 +155,6 @@ export default class BceidInviteLanding extends Vue {
 </script>
 
 <style lang="scss" scoped>
-   @import '$assets/scss/theme.scss';
-
   .view-container {
     max-width: 60rem;
   }

auth-web/src/components/auth/BusinessContactForm.vue

@@ -208,8 +208,6 @@ export default class BusinessContactForm extends Vue {
 </script>
 
 <style lang="scss" scoped>
-  @import '$assets/scss/theme.scss';
-
   // Tighten up some of the spacing between rows
   [class^="col"] {
     padding-top: 0;

auth-web/src/components/auth/CreateUserProfileForm.vue

@@ -251,7 +251,6 @@ export default class CreateUserProfileForm extends Mixins(NextPageMixin) {
 </script>
 
 <style lang="scss" scoped>
-  @import '$assets/scss/theme.scss';
 
   .form__btns {
     display: flex;

auth-web/src/components/auth/account-deactivate/DeactivateCard.vue

@@ -45,7 +45,7 @@ export default defineComponent({
   props: {
     type: {
       type: String as PropType<Account>,
-      default: Account.BASIC
+      default: Account.PREMIUM
     }
   },
   setup (props) {

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"
@@ -158,8 +158,8 @@
 </template>
 
 <script lang="ts">
-import { AccessType, Account } from '@/util/constants'
 import { computed, defineComponent, reactive, toRefs, watch } from '@vue/composition-api'
+import { AccessType } from '@/util/constants'
 import ModalDialog from '@/components/auth/common/ModalDialog.vue'
 
 export default defineComponent({
@@ -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

@@ -87,22 +87,24 @@
             </div>
           </div>
           <div class="nv-list-item mb-0">
-            <div
-              id="accountType"
-              class="name font-weight-bold"
-            >
-              Account Type
-            </div>
-            <div class="value-column">
+            <template v-if="accountType !== OrgAccountTypes.PREMIUM">
               <div
-                class="value"
-                aria-labelledby="accountType"
+                id="accountType"
+                class="name font-weight-bold"
               >
-                <div class="value__title">
-                  {{ accountType }}
+                Account Type
+              </div>
+              <div class="value-column">
+                <div
+                  class="value"
+                  aria-labelledby="accountType"
+                >
+                  <div class="value__title">
+                    {{ accountType }}
+                  </div>
                 </div>
               </div>
-            </div>
+            </template>
           </div>
           <AccountAccessType
             :organization="currentOrganization"
@@ -112,23 +114,6 @@
             @update:viewOnlyMode="viewOnlyMode"
             @update:updateAndSaveAccessTypeDetails="updateAndSaveAccessTypeDetails"
           />
-          <div
-            v-if="currentOrganization.bcolAccountDetails"
-            class="nv-list-item mb-6"
-          >
-            <div
-              id="accountName"
-              class="name mt-3 font-weight-bold"
-            >
-              Linked BC Online Account Details
-            </div>
-            <div class="value">
-              <LinkedBCOLBanner
-                :bcolAccountName="currentOrganization.bcolAccountName"
-                :bcolAccountDetails="currentOrganization.bcolAccountDetails"
-              />
-            </div>
-          </div>
           <v-divider class="my-6" />
         </div>
 
@@ -292,14 +277,13 @@
 
 <script lang="ts">
 import { AccessType, AccountStatus, Permission, Role, SuspensionReason } from '@/util/constants'
-import { CreateRequestBody, OrgBusinessType } from '@/models/Organization'
+import { CreateRequestBody, OrgAccountTypes, OrgBusinessType } from '@/models/Organization'
 import { computed, defineComponent, onBeforeUnmount, onMounted, reactive, toRefs } from '@vue/composition-api'
 import { useAccount, useAccountChangeHandler } from '@/composables'
 import AccountAccessType from '@/components/auth/account-settings/account-info/AccountAccessType.vue'
 import AccountDetails from '@/components/auth/account-settings/account-info/AccountDetails.vue'
 import AccountMailingAddress from '@/components/auth/account-settings/account-info/AccountMailingAddress.vue'
 import { Address } from '@/models/address'
-import LinkedBCOLBanner from '@/components/auth/common/LinkedBCOLBanner.vue'
 import ModalDialog from '../../common/ModalDialog.vue'
 import OrgAdminContact from '@/components/auth/account-settings/account-info/OrgAdminContact.vue'
 import { useCodesStore } from '@/stores/codes'
@@ -309,7 +293,6 @@ import { useUserStore } from '@/stores/user'
 export default defineComponent({
   components: {
     OrgAdminContact,
-    LinkedBCOLBanner,
     ModalDialog,
     AccountDetails,
     AccountMailingAddress,
@@ -327,7 +310,6 @@ export default defineComponent({
       currentOrgAddress,
       permissions,
       getAccountFromSession,
-      isPremiumAccount,
       anonAccount,
       isGovmAccount,
       isStaffAccount,
@@ -368,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(() => {
@@ -378,7 +362,7 @@ export default defineComponent({
         } else if (isSbcStaffAccount.value) {
           return 'SBC Staff'
         }
-        return isPremiumAccount.value ? 'Premium' : 'Basic'
+        return 'Premium'
       }),
       isAddressInfoIncomplete: computed(() => (
         currentOrgAddress.value ? Object.keys(currentOrgAddress.value).length === 0 : true
@@ -642,7 +626,8 @@ export default defineComponent({
       closeSuspensionCompleteDialog,
       checkBaseAddressValidity,
       updateAddress,
-      updateOrgMailingAddress
+      updateOrgMailingAddress,
+      OrgAccountTypes
     }
   }
 })