{"version":3,"file":"vDImeIau.js","sources":["../../../../components/DonationConfirmationWidget.vue","../../../../components/DonationWidget.vue"],"sourcesContent":["<script setup lang=\"ts\">\nconst props = withDefaults(\n  defineProps<{\n    color: string;\n    spinnerClass?: string;\n    donation?: boolean;\n  }>(),\n  {\n    color: \"text-primary\",\n    spinnerClass: undefined,\n  }\n);\n\nconst $router = useRouter();\n\nconst $route = useRoute();\nconst sessionId = $route.query.session_id as string;\n\ntype CheckoutResponse = {\n  status: \"complete\" | \"expired\" | \"open\";\n};\n\nconst userRef = useUser();\n\nconst {\n  data: response,\n  pending,\n  error,\n  execute,\n  status,\n} = useAsyncData(\n  () => {\n    const email = window.sessionStorage.getItem(\"donation-email\") ?? undefined;\n    return useDirectus<CheckoutResponse>(() => ({\n      path: `/stripes/donations/sessions`,\n      method: \"POST\",\n      body: JSON.stringify({\n        email,\n        session_id: sessionId,\n        stripe_instance: props.donation ? \"donation\" : \"membership\",\n      }),\n    }));\n  },\n  { immediate: false }\n);\n\n// --- Holds the message displayed after a Stripe Payment Session response is received\nconst paymentMessage = computed(() => {\n  if (response.value == null) return null;\n\n  switch (response.value.status) {\n    case \"complete\":\n      // The checkout session is complete. Payment processing may still be in progress\n      return `Success! Your ${props.donation ? \"donation payment\" : \"contribution\"} has been completed. Thank you.`;\n    case \"open\":\n      // The checkout session is still in progress. Payment processing has not started\n      return `Your ${props.donation ? \"donation\" : \"contribution\"} session is still in progress. We'll update you when payment is processed.`;\n    case \"expired\":\n      // The checkout session has expired. No further processing will occur\n      return `Your ${props.donation ? \"donation\" : \"contribution\"} session has expired. Please try again.`;\n    default:\n      return \"Something went wrong.\";\n  }\n});\n\nwatch(response, (response) => {\n  if (!response) return;\n  // --- Clean the URL params from the `session_id` as well as the donation-email in the session storage\n  const cleanParams = { ...$route.params };\n  delete cleanParams.session_id;\n  setTimeout(() => {\n    window.sessionStorage.removeItem(\"donation-email\");\n    $router.replace({ params: cleanParams });\n  }, 100);\n});\n\nwatch(\n  userRef,\n  async ({ pendingPromise: userReadyPromise }) => {\n    await userReadyPromise; // Wait for the user data to be loaded (or not)\n    if (sessionId && status.value === \"idle\") {\n      execute();\n    }\n  },\n  { immediate: true }\n);\n\ndefineExpose({\n  get sessionId() {\n    return sessionId;\n  },\n  pending,\n  response,\n});\n</script>\n\n<template>\n  <div v-if=\"sessionId && !error\" class=\"rounded-xl border-2 border-secondary p-6 text-center text-2xl\" :class=\"color\">\n    <fa-icon v-if=\"pending\" :class=\"spinnerClass\" icon=\"fa-solid fa-spinner\" size=\"xl\" spin-pulse />\n    {{ paymentMessage }}\n  </div>\n  <ErrorBar v-else-if=\"error\" :error=\"error\" />\n</template>\n","<script setup lang=\"ts\">\nimport { FormKitLazyProvider } from '@formkit/vue'\nimport { loadStripe, type StripeEmbeddedCheckout } from \"@stripe/stripe-js\";\nimport DonationConfirmationWidget from \"./DonationConfirmationWidget.vue\";\nimport type { Branches } from \"~/types/directus-collections.d.ts\";\n\nconst props = defineProps<{\n  stripeId?: string;\n  branch?: Branches;\n}>();\n\nconst config = useRuntimeConfig();\n\nconst userRef = useUser();\nconst showEmail = !userRef.value.user?.email;\n\nlet checkout: StripeEmbeddedCheckout;\n\nconst userEmail = ref(\"\");\nwatch(userRef, ({ user }) => {\n  // --- Populate the user's email, just-in-case™ it is set later on\n  userEmail.value = user?.email || \"\";\n});\n\ntype FieldsShape = {\n  occurrence: \"one-time\" | \"day\" | \"week\" | \"month\" | \"year\";\n  selected_amount: string;\n  custom_amount: string;\n  email: string;\n};\n\n// --- The list of available options for subscriptions\nconst occurrenceOptions: { value: FieldsShape[\"occurrence\"]; label: string }[] = [\n  { value: \"one-time\", label: \"One-time\" },\n  { value: \"month\", label: \"Monthly\" },\n  // { value: \"year\", label: \"Annually\" },\n];\n\n// --- The pre-set available donation amounts\nconst donationAmounts = [25, 100, 250];\n\n// --- Holds one of the amounts from donationAmounts\nconst selectedAmount = ref<number | null>(null);\n\n// --- Holds an arbitrary value that the user types in\nconst customAmount = ref(\"\");\n\nwatch(customAmount, (_) => {\n  // --- Clears any previously selected donation amount\n  if (customAmount.value) selectedAmount.value = null;\n});\n\nwatch(selectedAmount, (value) => {\n  // --- Clears any typed arbitrary amount\n  if (value) customAmount.value = \"\";\n});\n\ntype PayloadShape = {\n  amount: number;\n  product: string;\n  interval?: Exclude<FieldsShape[\"occurrence\"], \"one-time\">;\n  email?: string;\n  return_url: string;\n};\n\ntype DonationResponse = {\n  client_secret: string;\n};\n\n// --- Called when the initial form is submitted\n// NOTE: This function should not throw, but use `form.setErrors()`\nconst processDonation = async (fields: FieldsShape, form: FormKitNode) => {\n  const product = props.stripeId;\n  if (!product) {\n    form.setErrors([\"No product ID to donate to.\"]);\n    return;\n  }\n\n  const amount = parseFloat(`${fields.selected_amount || fields.custom_amount || 0}`);\n\n  const returnPath = (() => {\n    // NOTE: We cannot have anything other than a pathname in the `return_url`,\n    //       since the server _concatenates_ `?session_id={CHECKOUT_SESSION_ID}`,\n    //       before handing it off to Stripe!!!\n    // const { pathname, search, hash } = window.location;\n    // return `${pathname || \"/\"}${search || \"\"}${hash || \"\"}`;\n    return window.location.pathname || \"/\";\n  })();\n\n  const payload: PayloadShape = {\n    // --- Convert amount to an integer with two decimal points\n    amount: Math.round(amount * 100),\n    product,\n    return_url: returnPath,\n  };\n\n  if (payload.amount === 0) {\n    form.setErrors([], { custom_amount: \"Cannot donate zero amount.\" });\n    return;\n  }\n  if (payload.amount < 0) {\n    // NOTE: This should never happen, since FormKit's currency is set to min=0,\n    //       but just-in-case™\n    form.setErrors([], { custom_amount: \"Cannot donate negative amount.\" });\n    return;\n  }\n\n  if (fields.occurrence !== \"one-time\") payload.interval = fields.occurrence;\n\n  if (fields.email) payload.email = fields.email;\n\n  const path = fields.occurrence === \"one-time\" ? \"/stripes/donations/one_off\" : \"/stripes/donations/subscriptions\";\n\n  try {\n    await _mountCheckout(path, payload);\n  } catch (err) {\n    form.setErrors([(err as Error).message || `${err}`]);\n  }\n};\n\nconst showStripeForm = ref(false);\n\n// --- Lets Stripe mount necessary DOM elements to receive payment details\n// NOTE: Any thrown errors here will be surfaced to the form\nconst _mountCheckout = async (path: string, payload: PayloadShape) => {\n  const stripe = await loadStripe(props.branch ? config.public.stripeMembershipKey : config.public.stripeDonationKey);\n  if (!stripe) throw new Error(\"Could not load Stripe\");\n\n  if (payload.email) {\n    // --- Need to store the email, so we can then confirm when Stripe redirects\n    //     back to return_url\n    // NOTE: And no - we cannot just add the email to the return_url, since the\n    //       server _concatenates_ `?session_id={CHECKOUT_SESSION_ID}` to it!!!\n    window.sessionStorage.setItem(\"donation-email\", payload.email);\n  }\n\n  checkout = await stripe.initEmbeddedCheckout({\n    fetchClientSecret: async () => {\n      const response: DonationResponse = await useDirectus(() => ({\n        path,\n        method: \"POST\",\n        body: JSON.stringify(payload),\n      }));\n      return response.client_secret;\n    },\n  });\n  checkout.mount(\"#checkout-form\");\n\n  showStripeForm.value = true;\n};\n\nconst confirmRef = ref<InstanceType<typeof DonationConfirmationWidget> | null>(null);\n\nconst isConfirming = computed(() => confirmRef.value?.sessionId && confirmRef.value.pending);\n\nonBeforeUnmount(() => {\n  if (checkout) {\n    checkout.destroy();\n  }\n});\n</script>\n\n<template>\n  <section class=\"bg-donation relative grow flex-col justify-between space-y-4 overflow-hidden rounded-xl p-8 xl:text-lg\">\n    \n<FormKitLazyProvider config-file=\"true\">\n<DonationConfirmationWidget ref=\"confirmRef\" :donation=\"branch ? false : true\" color=\"text-white\" />\n\n    <div class=\"text-center text-2xl font-semibold text-white xl:text-4xl\">Support {{ branch ? (branch.title ?? \" Us\") : \"Us\" }}</div>\n    <p class=\"text-white\">\n      {{\n        branch\n          ? `To assist the work of this group, enter an amount below to\n      make a non-deductible contribution.`\n          : `To assist the Wildcare cause, enter an amount below to\n      make a tax deductible donation.`\n      }}\n    </p>\n\n    <p class=\"text-white\">No matter how large or small, you can make a difference.</p>\n\n    <FormKit\n      v-if=\"!showStripeForm && !isConfirming\"\n      type=\"form\"\n      form-class=\"text-left\"\n      :message-class=\"'text-warning'\"\n      submit-label=\"Next step\"\n      :submit-attrs=\"{ inputClass: 'bg-secondary w-full !py-4' }\"\n      @submit=\"processDonation\"\n    >\n      <FormKit\n        type=\"togglebuttons\"\n        name=\"occurrence\"\n        value=\"one-time\"\n        :options=\"occurrenceOptions\"\n        enforced\n        outer-class=\"text-center\"\n        :input-class=\"{\n          '!bg-white': false, // off\n          'min-w-[150px]': false, // off\n          // '!px-4': true,\n          '!py-3': true,\n          '!bg-white/70': true,\n          'aria-pressed:!bg-secondary': true,\n        }\"\n      />\n\n      <div class=\"my-4 grid grid-cols-3 gap-4\">\n        <template v-for=\"amount of donationAmounts\" :key=\"amount\">\n          <FormKit\n            type=\"button\"\n            :input-class=\"\n              [\n                '$reset w-full inline-flex items-center justify-center font-normal text-xl px-8 py-3 rounded-lg',\n                'focus:outline focus:outline-2 focus:outline-offset-2 focus:rounded-lg focus:outline-secondary',\n                'ring-secondary',\n                selectedAmount === amount ? 'bg-white ring-4' : 'bg-white/70',\n              ].join(' ')\n            \"\n            @click=\"selectedAmount = amount\"\n          >\n            <span class=\"text-nowrap\">$ {{ amount }}</span>\n          </FormKit>\n        </template>\n      </div>\n\n      <FormKit v-model=\"selectedAmount\" type=\"hidden\" name=\"selected_amount\" />\n\n      <FormKit\n        v-model=\"customAmount\"\n        type=\"currency\"\n        name=\"custom_amount\"\n        aria-label=\"Custom donation amount\"\n        placeholder=\"Custom amount\"\n        :help=\"`Minimum ${branch ? 'contribution' : 'donation'} of $10`\"\n        :message-class=\"'text-warning'\"\n        validation=\"min:10\"\n        :validation-messages=\"{\n          min: `The minimum ${branch ? 'contribution' : 'donation'} is $10.`,\n        }\"\n        step=\"1\"\n        outer-class=\"my-4\"\n        inner-class=\"$reset bg-white/70 rounded-lg\"\n        input-class=\"$reset appearance-none bg-transparent placeholder-gray-800 px-4 py-3 w-full focus:outline focus:outline-2 focus:outline-offset-2 focus:rounded-lg focus:outline-secondary\"\n      />\n\n      <FormKit\n        v-if=\"showEmail\"\n        v-model=\"userEmail\"\n        required\n        _label=\"E-mail\"\n        type=\"email\"\n        name=\"email\"\n        outer-class=\"my-4\"\n        placeholder=\"E-mail\"\n        inner-class=\"$reset bg-white/70 rounded-lg\"\n        label-class=\"$reset text-white/70\"\n        input-class=\"$reset appearance-none bg-transparent placeholder-gray-800 px-4 py-3 w-full focus:outline focus:outline-2 focus:outline-offset-2 focus:rounded-lg focus:outline-secondary\"\n      />\n    </FormKit>\n\n    <div v-show=\"showStripeForm\" id=\"checkout-form\" class=\"overflow-hidden rounded-xl bg-gray-100\">\n      <!-- Stripe EmbeddedCheckout will create iFORM here -->\n    </div>\n</FormKitLazyProvider>\n\n  </section>\n</template>\n\n<style scoped lang=\"postcss\">\n.bg-donation:before {\n  content: \"\";\n  background-image: url(\"/donation-background.jpg\");\n  @apply absolute inset-0 z-[-1] bg-cover;\n}\n.bg-donation:after {\n  content: \"\";\n  @apply absolute inset-0 z-[-1] bg-primary/80;\n}\n</style>\n"],"names":["props","__props","$router","useRouter","$route","useRoute","sessionId","userRef","useUser","response","pending","error","execute","status","useAsyncData","email","useDirectus","paymentMessage","computed","watch","cleanParams","userReadyPromise","__expose","config","useRuntimeConfig","showEmail","_a","checkout","userEmail","ref","user","occurrenceOptions","donationAmounts","selectedAmount","customAmount","_","value","processDonation","fields","form","product","amount","returnPath","payload","path","_mountCheckout","err","showStripeForm","stripe","loadStripe","confirmRef","isConfirming","onBeforeUnmount"],"mappings":"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"}