feat: integrate LemonSqueezy to subscription payment

packages/webapp/src/containers/Setup/SetupSubscription.tsx

@@ -8,6 +8,7 @@ import '@/style/pages/Setup/Subscription.scss';
 import SetupSubscriptionForm from './SetupSubscription/SetupSubscriptionForm';
 import { getSubscriptionFormSchema } from './SubscriptionForm.schema';
 import withSubscriptionPlansActions from '../Subscriptions/withSubscriptionPlansActions';
+import { useGetLemonSqueezyCheckout } from '@/hooks/query/subscriptions';
 
 /**
  * Subscription step of wizard setup.
@@ -20,14 +21,33 @@ function SetupSubscription({
     initSubscriptionPlans();
   }, [initSubscriptionPlans]);
 
+  React.useEffect(() => {
+    window.LemonSqueezy.Setup({
+      eventHandler: (event) => {
+        // Do whatever you want with this event data
+        if (event.event === 'Checkout.Success') {
+        }
+      },
+    });
+  }, []);
+
   // Initial values.
   const initialValues = {
     plan_slug: 'essentials',
     period: 'month',
     license_code: '',
   };
+  const { mutateAsync: getLemonCheckout } = useGetLemonSqueezyCheckout();
+
   // Handle form submit.
-  const handleSubmit = (values) => {};
+  const handleSubmit = (values) => {
+    getLemonCheckout({ variantId: '337977' })
+      .then((res) => {
+        const checkoutUrl = res.data.data.attributes.url;
+        window.LemonSqueezy.Url.Open(checkoutUrl);
+      })
+      .catch(() => {});
+  };
 
   // Retrieve momerized subscription form schema.
   const SubscriptionFormSchema = React.useMemo(

packages/webapp/src/containers/Setup/SetupSubscription/SetupSubscriptionForm.tsx

@@ -1,17 +1,28 @@
 // @ts-nocheck
-import React from 'react';
-
+import { Form } from 'formik';
 import SubscriptionPlansSection from './SubscriptionPlansSection';
 import SubscriptionPeriodsSection from './SubscriptionPeriodsSection';
-import SubscriptionPaymentMethodsSection from './SubscriptionPaymentsMethodsSection';
+import { Button, Intent } from '@blueprintjs/core';
+import { T } from '@/components';
 
-
-export default function SetupSubscriptionForm() {
+function StepSubscriptionActions() {
   return (
-    <div class="billing-plans">
-      <SubscriptionPlansSection />
-      <SubscriptionPeriodsSection />
-      <SubscriptionPaymentMethodsSection />
+    <div>
+      <Button type="submit" intent={Intent.PRIMARY} large={true}>
+        <T id={'submit_voucher'} />
+      </Button>
     </div>
   );
 }
+
+export default function SetupSubscriptionForm() {
+  return (
+    <Form>
+      <div class="billing-plans">
+        <SubscriptionPlansSection />
+        <SubscriptionPeriodsSection />
+        <StepSubscriptionActions />
+      </div>
+    </Form>
+  );
+}