zengzy / hhrcs_web · Files

<template>
  <VaModal hide-default-actions model-value size="small" close-button @cancel="emits('close')">
    <h3 class="va-h4 mb-4">Add payment card</h3>
    <PaymentCardEdit :payment-card="paymentCard" submit-text="Add Card" @cancel="emits('close')" @save="updateCard" />
  </VaModal>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import PaymentCardEdit from './PaymentCardEdit.vue'
import { PaymentCard, PaymentSystemType } from '../../types'
import { usePaymentCardsStore } from '../../../../stores/payment-cards'
import { useToast } from 'vuestic-ui'

const isModalOpen = ref(false)

const emits = defineEmits(['close'])
const store = usePaymentCardsStore()
const { init } = useToast()

const paymentCard = reactive({
  id: Math.ceil(Math.random() * 100) + '',
  name: '',
  isPrimary: false,
  paymentSystem: PaymentSystemType.Visa,
  cardNumberMasked: '',
  expirationDate: '',
} satisfies PaymentCard)

const updateCard = (card: PaymentCard) => {
  isModalOpen.value = false
  store.create(card)
  init({ message: "You've successfully created a new payment card", color: 'success' })
  emits('close')
}
</script>