123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292 |
- 'use client'
- import { useState, MouseEvent, Dispatch, SetStateAction } from 'react'
- import PlanCards from '@/components/Plan'
- import { Plan, Subscription, SubscriptionState } from '@/types'
- import clsx from 'clsx'
- export const UpdateBillingLink = ({ subscription, elementType }:
- { subscription: SubscriptionState, elementType?: string }
- ) => {
-
- const [isMutating, setIsMutating] = useState(false)
- async function openUpdateModal(e: MouseEvent<HTMLAnchorElement>) {
- e.preventDefault()
-
- setIsMutating(true)
- /* Send request */
- const res = await fetch(`/api/subscriptions/${subscription?.id}`)
- const result = await res.json()
- if (result.error) {
- alert(result.message)
- setIsMutating(false)
- } else {
- LemonSqueezy.Url.Open(result.subscription.update_billing_url)
- setIsMutating(false)
- }
- }
- if (elementType == 'button') {
- return (
- <a
- href=""
- onClick={openUpdateModal}
- className={clsx('px-6 py-2 font-bold btn btn-block', {
- disabled: isMutating
- })}
- >
- Update your payment method
- </a>
- )
- } else {
- return (
- <a
- href=""
- onClick={openUpdateModal}
- className={clsx('mb-2', {
- disabled: isMutating
- })}
- >
- Update your payment method
- </a>
- )
- }
- }
- export const CancelLink = ({ subscription, setSubscription }:
- { subscription: SubscriptionState, setSubscription: Dispatch<SetStateAction<SubscriptionState>> }
- ) => {
-
- const [isMutating, setIsMutating] = useState(false)
- async function handleCancel(e: MouseEvent<HTMLAnchorElement>) {
- e.preventDefault()
- if (confirm(`Please confirm you want to cancel your subscription.`)) {
- setIsMutating(true)
- /* Send request */
- const res = await fetch(`/api/subscriptions/${subscription?.id}`, {
- method: 'POST',
- body: JSON.stringify({
- action: 'cancel'
- })
- })
- const result = await res.json()
- if (result.error) {
- alert(result.message)
- setIsMutating(false)
- } else {
-
- setSubscription({
- ...subscription,
- status: result['subscription']['status'],
- expiryDate: result['subscription']['ends_at'],
- })
- alert('Your subscription has been cancelled.')
- }
- }
- }
- return (
- <a
- href=""
- onClick={handleCancel}
- className={clsx('mb-2', {
- disabled: isMutating
- })}
- >
- Cancel
- </a>
- )
- }
- export const ResumeButton = ({ subscription, setSubscription }:
- { subscription: SubscriptionState, setSubscription: Dispatch<SetStateAction<SubscriptionState>> }
- ) => {
- const [isMutating, setIsMutating] = useState(false)
- const resumeSubscription = async (e: MouseEvent<HTMLAnchorElement>) => {
-
- e.preventDefault()
- if (confirm(`Please confirm you want to resume your subscription. You will be charged the regular subscription fee.`)) {
- setIsMutating(true)
- /* Send request */
- const res = await fetch(`/api/subscriptions/${subscription?.id}`, {
- method: 'POST',
- body: JSON.stringify({
- action: 'resume'
- })
- })
- const result = await res.json()
- if (result.error) {
- alert(result.message)
- setIsMutating(false)
- } else {
-
- setSubscription({
- ...subscription,
- status: result['subscription']['status'],
- renewalDate: result['subscription']['renews_at'],
- })
- alert('Your subscription is now active again!.')
- }
- }
- }
- return (
- <a
- href=""
- onClick={resumeSubscription}
- className={clsx('px-6 py-2 font-bold btn btn-block', {
- disabled: isMutating
- })}
- >
- Resume your subscription
- </a>
- )
- }
- export const PauseLink = ({ subscription, setSubscription }:
- { subscription: SubscriptionState, setSubscription: Dispatch<SetStateAction<SubscriptionState>> }
- ) => {
-
- const [isMutating, setIsMutating] = useState(false)
- async function handlePause(e: MouseEvent<HTMLAnchorElement>) {
- e.preventDefault()
- if (confirm(`Please confirm you want to pause your subscription.`)) {
- setIsMutating(true)
- /* Send request */
- const res = await fetch(`/api/subscriptions/${subscription?.id}`, {
- method: 'POST',
- body: JSON.stringify({
- action: 'pause'
- })
- })
- const result = await res.json()
- if (result.error) {
- alert(result.message)
- setIsMutating(false)
- } else {
-
- setSubscription({
- ...subscription,
- status: result['subscription']['status'],
- unpauseDate: result['subscription']['resumes_at'],
- })
- alert('Your subscription has been paused.')
- }
- }
- }
- return (
- <a
- href=""
- className={clsx('mb-2', {
- disabled: isMutating
- })}
- onClick={handlePause}
- >
- Pause payments
- </a>
- )
- }
- export const UnpauseButton = ({ subscription, setSubscription }:
- { subscription: SubscriptionState, setSubscription: Dispatch<SetStateAction<SubscriptionState>> }
- ) => {
- const [isMutating, setIsMutating] = useState(false)
- const unpauseSubscription = async (e: MouseEvent<HTMLAnchorElement>) => {
-
- e.preventDefault()
- if (confirm(`Please confirm you want to unpause your subscription. Your payments will reactivate on their original schedule.`)) {
- setIsMutating(true)
- /* Send request */
- const res = await fetch(`/api/subscriptions/${subscription?.id}`, {
- method: 'POST',
- body: JSON.stringify({
- action: 'unpause'
- })
- })
- const result = await res.json()
- if (result.error) {
- alert(result.message)
- setIsMutating(false)
- } else {
-
- setSubscription({
- ...subscription,
- status: result['subscription']['status'],
- renewalDate: result['subscription']['renews_at'],
- })
- alert('Your subscription is now active again!')
- }
- }
- }
- return (
- <a href=""
- onClick={unpauseSubscription}
- className={clsx('px-6 py-2 font-bold btn btn-block', {
- disabled: isMutating
- })}
- >
- Unpause your subscription
- </a>
- )
- }
- export const PlansComponent = ({ plans, sub }:
- { plans: Plan[], sub: Subscription }
- ) => {
- const [subscription, setSubscription] = useState<SubscriptionState>(() => {
- if (sub) {
- return {
- id: sub.lemonSqueezyId,
- planName: sub.plan?.variantName,
- planInterval: sub.plan?.interval,
- productId: sub.plan?.productId,
- variantId: sub.plan?.variantId,
- status: sub.status,
- renewalDate: sub.renewsAt,
- trialEndDate: sub.trialEndsAt,
- expiryDate: sub.endsAt,
- }
- } else {
- return undefined
- }
- })
- return (
- <PlanCards plans={plans} subscription={subscription} setSubscription={setSubscription} />
- )
- }
|