24918 - Products and Payments UX (#3212)

bcgov · Jan 21, 2025 · 75dfa42 · 75dfa42
1 parent c726130
commit 75dfa42
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/auth-web/src/components/auth/account-settings/product/ProductPayment.vue b/auth-web/src/components/auth/account-settings/product/ProductPayment.vue
@@ -251,8 +251,8 @@ 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
+      isCoordinator: computed((): boolean => {
+        return currentMembership.membershipTypeCode === MembershipType.Coordinator
       }),
       /**
        * Return any sub-product that has a status indicating activity

diff --git a/auth-web/src/components/auth/common/Product.vue b/auth-web/src/components/auth/common/Product.vue
@@ -9,7 +9,7 @@
       :data-test="`div-product-${productDetails.code}`"
     >
       <div>
-        <header class="d-flex align-items-start">
+        <header class="d-flex">
           <div
             v-if="!hideCheckbox"
             class="pr-8"
@@ -18,7 +18,7 @@
             <v-checkbox
               :key="Math.random()"
               v-model="productSelected"
-              class="product-check-box ma-0 pa-0 align-top"
+              class="product-check-box ma-0 pa-0"
               hide-details
               :data-test="`check-product-${productDetails.code}`"
               @change="selectThisProduct"
@@ -483,6 +483,10 @@ export default defineComponent({
   color: $gray7;
 }
 
+.product-card ::v-deep .v-input__slot {
+    align-items: flex-start !important;
+}
+
 .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;

diff --git a/auth-web/src/components/auth/common/TermsOfUseDialog.vue b/auth-web/src/components/auth/common/TermsOfUseDialog.vue
@@ -90,7 +90,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, ref } from '@vue/composition-api'
+import { computed, defineComponent, onMounted, ref, watch } from '@vue/composition-api'
 import TermsOfUse from '@/components/auth/common/TermsOfUse.vue'
 import { useUserStore } from '@/stores/user'
 
@@ -117,6 +117,11 @@ export default defineComponent({
     const tooltipTxt = computed(() => 'Please read and agree to the Terms Of Use')
     const termsColor = computed(() => !termsAccepted.value && props.checkErrors ? 'error--text' : '')
 
+    watch(() => props.isAlreadyAccepted, (newVal) => {
+      termsAccepted.value = newVal
+      canCheckTerms.value = newVal
+    })
+
     onMounted(() => {
       termsDialog.value = false
       if (props.isUserTOS && userHasToAcceptTOS.value) {