<template>
  <section-wrapper class="bg-background-3 pb-12">
    <section-container mobile-padding class="max-w-container">
      <h2 class="text-primary mb-10 text-[1.563rem] font-bold">
        Mes méthodes de paiement
      </h2>

      <Message severity="info">
        Le bouton ci-dessous vous redirigera vers le portail de gestion de vos
        méthodes de paiement chez notre partenaire Stripe.<br />
        Vous pourrez y ajouter, modifier ou supprimer des cartes bancaires et
        sélectionner une méthode de paiement par défaut.
      </Message>

      <rounded-button
        class="w-full"
        @click="getPortalUrl"
        design="3"
        target="_blank"
        >{{
          redirecting ? "Redirection..." : "Gérer mes méthodes de paiement"
        }}</rounded-button
      >
    </section-container>
  </section-wrapper>
</template>

<script setup>
const { $api } = useNuxtApp();

const redirecting = ref(false);

const getPortalUrl = () => {
  redirecting.value = true;
  return $api
    .call("get", $api.route("me.manage-payment-methods-link"))
    .then((payload) => {
      window.open(payload.url);
    })
    .catch((err) => {
      error.value =
        "Une erreur est survenue lors de la redirection vers le portail de gestion de methodes de paiement";
    })
    .finally(() => {
      redirecting.value = false;
    });
};
</script>
