gami-web/app/composables/usePaybackResultPopup.ts

import { computed, reactive, readonly, ref } from 'vue'

export type PaybackScene
  = | 'payment-success'
    | 'payment-failed'
    | 'topup-success'
    | 'topup-failed'

export interface PaybackResultState {
  visible: boolean
  scene: PaybackScene
  coins: number | null
}

export interface PaybackResultOptions {
  scene: PaybackScene
  coins?: number
  onPrimary?: () => void
  onSecondary?: () => void
}

const state = reactive<PaybackResultState>({
  visible: false,
  scene: 'payment-success',
  coins: null,
})

const primaryHandler = ref<(() => void) | null>(null)
const secondaryHandler = ref<(() => void) | null>(null)

const isSuccess = computed(
  () =>
    state.scene === 'payment-success' || state.scene === 'topup-success',
)

const isPayment = computed(
  () =>
    state.scene === 'payment-success' || state.scene === 'payment-failed',
)

const open = (options: PaybackResultOptions) => {
  state.scene = options.scene
  state.coins = options.coins ?? null

  primaryHandler.value = options.onPrimary ?? null
  secondaryHandler.value = options.onSecondary ?? null

  state.visible = true
}

const close = () => {
  state.visible = false
}

const handlePrimary = () => {
  const handler = primaryHandler.value
  if (handler) {
    handler()
  }
  state.visible = false
}

const handleSecondary = () => {
  const handler = secondaryHandler.value
  if (handler) {
    handler()
  }
  state.visible = false
}

const handlePaymentSuccessOpen = ({ coins, orderId }: { coins: number, orderId: string }) => {
  const router = useRouter()
  const route = useRoute()

  open({
    scene: 'payment-success',
    coins,
    onPrimary: async () => {
      if (route.query.code) {
        const query = { ...route.query }
        delete query.code

        await router.replace({
          path: route.path,
          query,
        })
      }

      router.push(`/order/detail?id=${orderId}`)
    },
  })
}

const handleTopupOpen = ({ status, coins }: { status: boolean, coins: number }) => {
  if (status) {
    open({
      scene: 'topup-success',
      coins,
      onPrimary: () => {
        state.visible = false
      },
    })
  }
  else {
    open({
      scene: 'topup-failed',
      onPrimary: () => {
        state.visible = false
      },
    })
  }
}

export const usePaybackResultPopup = () => {
  return {
    state: readonly(state),
    isSuccess,
    isPayment,
    open,
    close,
    handlePrimary,
    handleSecondary,
    handlePaymentSuccessOpen,
    handleTopupOpen,
  }
}