15769 - Manage a B.C. Business modal view for Corporation

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

@@ -0,0 +1,16 @@
+.v-dialog {
+ > .v-card {
+ > div {
+ padding: 16px 40px 0 40px;
+ &:first-of-type {
+ padding: 40px 40px 0 40px;
+ }
+ &:last-of-type {
+ padding: 40px 40px 40px 40px;
+ button {
+ padding: 0 20px;
+ }
+ }
+ }
+ }
+}

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

@@ -6,7 +6,9 @@
  max-width="45rem"
  >
  <v-card>
- <v-card-title>Need Assistance?</v-card-title>
+ <v-card-title>
+ <h1>Need Help?</h1>
+ </v-card-title>
  <v-card-text>
  <p
  class="mb-7"
@@ -43,7 +45,7 @@
  color="primary"
  @click="close()"
  >
- OK
+ Close
  </v-btn>
  </v-card-actions>
  </v-card>
@@ -77,3 +79,7 @@ export default class HelpDialog extends Vue {
  }
 }
 </script>
+
+<style lang="scss" scoped>
+@import '@/assets/scss/ModalDialog.scss';
+</style>

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

@@ -57,7 +57,7 @@
  data-test="dialog-ok-button"
  @click="close()"
  >
- <span>OK</span>
+ <span>Close</span>
  </v-btn>
  </slot>
  </v-card-actions>

auth-web/src/components/auth/manage-business/AffiliatedEntityTable.vue

@@ -517,7 +517,7 @@ export default defineComponent({
  }
 
  const getRequestForAuthorizationStatusText = (affiliationInviteInfos: AffiliationInviteInfo[]) => {
- if (isCurrentOrganization(affiliationInviteInfos[0].toOrg.id)) {
+ if (isCurrentOrganization(affiliationInviteInfos[0]?.toOrg?.id)) {
  // incoming request for access
  const getAlwaysSameOrderArr = affiliationInviteInfos.slice().sort()
  const andOtherAccounts = affiliationInviteInfos.length > 1 ? ` and ${affiliationInviteInfos.length - 1} other account(s)` : ''
@@ -527,7 +527,7 @@ export default defineComponent({
  // outgoing request for access
  switch (affiliationInviteInfos[0].status) {
  case AffiliationInvitationStatus.Pending:
- statusText = 'Request sent, pending authorization'
+ statusText = 'Confirmation email sent, pending authorization.'
  break
  case AffiliationInvitationStatus.Accepted:
  statusText = '<strong>Authorized</strong> - you can now manage this business.'
@@ -606,6 +606,10 @@ export default defineComponent({
  }
 
  const getPrimaryAction = (item: Business): string => {
+ const invitationStatus = item?.affiliationInvites?.[0]?.status
+ if ([AffiliationInvitationStatus.Pending, AffiliationInvitationStatus.Expired].includes(invitationStatus)) {
+ return 'Resend Email'
+ }
  if (isTemporaryBusiness(item)) {
  return 'Resume Draft'
  } else if (isNameRequest(item)) {
@@ -628,6 +632,11 @@ export default defineComponent({
  }
 
  const isOpenExternal = (item: Business): boolean => {
+ const invitationStatus = item?.affiliationInvites?.[0]?.status
+ if ([AffiliationInvitationStatus.Pending, AffiliationInvitationStatus.Expired].includes(invitationStatus)) {
+ return false
+ }
+
  if (isTemporaryBusiness(item)) {
  return false
  }
@@ -768,6 +777,11 @@ export default defineComponent({
  }
 
  const action = (item: Business): void => {
+ const invitationStatus = item?.affiliationInvites?.[0]?.status
+ if ([AffiliationInvitationStatus.Pending, AffiliationInvitationStatus.Expired].includes(invitationStatus)) {
+ context.emit('resend-affiliation-invitation', item)
+ return
+ }
  if (isShowRemoveAsPrimaryAction(item)) {
  removeBusiness(item)
  } else {

auth-web/src/components/auth/manage-business/AuthorizationEmailSentDialog.vue

@@ -0,0 +1,91 @@
+<template>
+ <v-dialog
+ v-model="computedIsVisible"
+ attach="#entity-management"
+ persistent
+ scrollable
+ max-width="50rem"
+ data-test-tag="authorization-email-sent-dialog"
+ >
+ <v-card>
+ <v-card-title>
+ <h1>Authorization Email Sent</h1>
+ </v-card-title>
+ <v-card-text>
+ <p>An email was sent to <span class="email-address">{{ email }}</span></p>
+ <p>Confirm your access by clicking the link inside. This will add the business to your Business Registry List. The link is valid for 15 minutes.</p>
+ </v-card-text>
+ <v-card-actions class="form__btns">
+ <span
+ id="help-button"
+ class="pl-2 pr-2 mr-auto"
+ @click.stop="openHelp()"
+ >
+ <v-icon>mdi-help-circle-outline</v-icon>
+ Help
+ </span>
+ <v-spacer />
+ <v-btn
+ large
+ color="primary"
+ @click="closeAuthEmailSentDialog()"
+ >
+ Close
+ </v-btn>
+ </v-card-actions>
+ </v-card>
+ </v-dialog>
+</template>
+<script lang="ts">
+import { computed, defineComponent } from '@vue/composition-api'
+
+export default defineComponent({
+ name: 'AuthorizationEmailSent',
+ props: {
+ email: {
+ type: String,
+ default: ''
+ },
+ isVisible: {
+ type: Boolean,
+ default: false
+ }
+ },
+ setup (props, { emit }) {
+ const openHelp = () => {
+ emit('open-help')
+ }
+ const closeAuthEmailSentDialog = () => {
+ emit('close-dialog')
+ }
+
+ const computedIsVisible = computed(() => {
+ return props.isVisible
+ })
+
+ return {
+ computedIsVisible,
+ openHelp,
+ closeAuthEmailSentDialog
+ }
+ }
+})
+</script>
+
+<style lang="scss" scoped>
+@import '$assets/scss/theme.scss';
+@import '@/assets/scss/ModalDialog.scss';
+
+.email-address {
+ font-weight: 600;
+}
+
+#help-button {
+ cursor: pointer;
+ color: var(--v-primary-base) !important;
+ .v-icon {
+ transform: translate(0, -2px) !important;
+ color: var(--v-primary-base) !important;
+ }
+}
+</style>