AddressVerify.vue

<template>
  <v-card>
    <v-card-title>
      <slot name="title">
        <span class="headline" v-text="dialogTitle"></span>
      </slot>
    </v-card-title>

    <v-card-subtitle>
      <slot name="subtitle">
        <span v-text="$props.dialogSubtitle" />
      </slot>
    </v-card-subtitle>
    <v-card-text>
      <v-list-item two-line>
        <v-list-item-avatar size="24">
          <font-awesome-icon :icon="['fad', 'map-marker-alt']" size="lg" />
        </v-list-item-avatar>
        <v-list-item-content>
          <v-list-item-title v-text="addr.addr"></v-list-item-title>
          <v-list-item-subtitle v-text="cityStateZip"></v-list-item-subtitle>
        </v-list-item-content>
      </v-list-item>
    </v-card-text>
    <v-card-actions>
      <v-btn color="blue darken-1" text @click="submit(false)" v-text="$props.buttonFalseText"></v-btn>
      <v-spacer></v-spacer>
      <v-spacer></v-spacer>
      <v-btn color="blue darken-1" text @click="submit(true)" :disabled="$v.$invalid" v-text="$props.buttonTrueText"></v-btn>
    </v-card-actions>
  </v-card>
</template>

<script lang="ts" setup>

import { AddressValidateResponse } from '@shared/apiShared';
import { computed } from 'vue';

const props = withDefaults(defineProps<{
  addr: AddressValidateResponse;
  dialogTitle: string;
  dialogSubtitle: string;
  buttonFalseText: string;
  buttonTrueText: string;
}>(), {
  dialogTitle: 'Is this your address?',
  dialogSubtitle: 'We ran your address past the USPS and this is what they returned.',
  buttonFalseText: 'No',
  buttonTrueText: 'Yes',
});

const emit = defineEmits<{
  (e: 'value', param: boolean | null): void;
}>();

// emits('value', props.addr);

function submit(val: boolean | null) {
  emit('value', val);
}

const addr = computed(() => props.addr);

const cityStateZip = computed(() => {
  let str = `${addr.value.city}, ${addr.value.state} ${addr.value.zip}`;
  if (addr.value.zip4) {
    str += `-${addr.value.zip4}`;
  }
  return str;
});

</script>

<style lang="scss">


</style>