From 6e7c705b95299b593451accd5cd278db679d4a1f Mon Sep 17 00:00:00 2001
From: blushi <marie.gauthier63@gmail.com>
Date: Tue, 10 Sep 2024 16:44:15 +0200
Subject: [PATCH] feat: add BuyCredits flow wip

---
 .../BuyCredits/BuyCredits.Form.tsx            | 20 ++++++++++
 .../BuyCredits/BuyCredits.constants.ts        |  4 ++
 .../marketplace/BuyCredits/BuyCredits.tsx     | 33 ++++++++++++++++
 .../BuyCredits/BuyCredits.types.ts            |  1 +
 .../BuyCredits/BuyCredits.utils.ts            | 39 +++++++++++++++++++
 5 files changed, 97 insertions(+)
 create mode 100644 web-marketplace/src/features/marketplace/BuyCredits/BuyCredits.Form.tsx
 create mode 100644 web-marketplace/src/features/marketplace/BuyCredits/BuyCredits.constants.ts
 create mode 100644 web-marketplace/src/features/marketplace/BuyCredits/BuyCredits.tsx
 create mode 100644 web-marketplace/src/features/marketplace/BuyCredits/BuyCredits.types.ts
 create mode 100644 web-marketplace/src/features/marketplace/BuyCredits/BuyCredits.utils.ts

diff --git a/web-marketplace/src/features/marketplace/BuyCredits/BuyCredits.Form.tsx b/web-marketplace/src/features/marketplace/BuyCredits/BuyCredits.Form.tsx
new file mode 100644
index 0000000000..ca2c4ecc6a
--- /dev/null
+++ b/web-marketplace/src/features/marketplace/BuyCredits/BuyCredits.Form.tsx
@@ -0,0 +1,20 @@
+import { PaymentInfoForm } from 'components/organisms/PaymentInfoForm/PaymentInfoForm';
+import { useMultiStep } from 'components/templates/MultiStepTemplate';
+
+export const BuyCreditsForm = () => {
+  const {
+    data,
+    percentComplete,
+    activeStep,
+    handleBack,
+    handleNext,
+    isLastStep,
+  } = useMultiStep();
+  return (
+    <>
+      {activeStep === 0 && <></>}
+      {activeStep === 1 && <PaymentInfoForm />}
+      {activeStep === 2 && <RetirementFo />}
+    </>
+  );
+};
diff --git a/web-marketplace/src/features/marketplace/BuyCredits/BuyCredits.constants.ts b/web-marketplace/src/features/marketplace/BuyCredits/BuyCredits.constants.ts
new file mode 100644
index 0000000000..e412d52dd4
--- /dev/null
+++ b/web-marketplace/src/features/marketplace/BuyCredits/BuyCredits.constants.ts
@@ -0,0 +1,4 @@
+export const PAYMENT_OPTIONS = {
+  CARD: 'card',
+  CRYPTO: 'crypto',
+} as const;
diff --git a/web-marketplace/src/features/marketplace/BuyCredits/BuyCredits.tsx b/web-marketplace/src/features/marketplace/BuyCredits/BuyCredits.tsx
new file mode 100644
index 0000000000..374d77f2d9
--- /dev/null
+++ b/web-marketplace/src/features/marketplace/BuyCredits/BuyCredits.tsx
@@ -0,0 +1,33 @@
+import { useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { useLingui } from '@lingui/react';
+
+import { MultiStepTemplate } from 'components/templates/MultiStepTemplate';
+
+import { PAYMENT_OPTIONS } from './BuyCredits.constants';
+import { PaymentOptionsType } from './BuyCredits.types';
+import { getFormModel } from './BuyCredits.utils';
+
+export const BuyCredits = () => {
+  const { _ } = useLingui();
+  const { projectId } = useParams();
+
+  // Get project info: on chain id, sanity (available credits for fiat purchase)
+
+  const [paymentOption, setPaymentOption] = useState<PaymentOptionsType>(
+    PAYMENT_OPTIONS.CARD, // TODO or set to crypto if not credits with fiat purchase
+  );
+  const [retiring, setRetiring] = useState<boolean>(true);
+
+  const formModel = getFormModel({ _, paymentOption, retiring });
+
+  return (
+    <MultiStepTemplate
+      formId={formModel.formId}
+      steps={formModel.steps}
+      initialValues={formModel.initialValues}
+    >
+      <BuyCreditsMultiStepForm />
+    </MultiStepTemplate>
+  );
+};
diff --git a/web-marketplace/src/features/marketplace/BuyCredits/BuyCredits.types.ts b/web-marketplace/src/features/marketplace/BuyCredits/BuyCredits.types.ts
new file mode 100644
index 0000000000..916cef9d5a
--- /dev/null
+++ b/web-marketplace/src/features/marketplace/BuyCredits/BuyCredits.types.ts
@@ -0,0 +1 @@
+export type PaymentOptionsType = 'card' | 'crypto';
diff --git a/web-marketplace/src/features/marketplace/BuyCredits/BuyCredits.utils.ts b/web-marketplace/src/features/marketplace/BuyCredits/BuyCredits.utils.ts
new file mode 100644
index 0000000000..a1e58dfe1f
--- /dev/null
+++ b/web-marketplace/src/features/marketplace/BuyCredits/BuyCredits.utils.ts
@@ -0,0 +1,39 @@
+import { msg } from '@lingui/macro';
+
+import { TranslatorType } from 'lib/i18n/i18n.types';
+
+import { PAYMENT_OPTIONS } from './BuyCredits.constants';
+import { PaymentOptionsType } from './BuyCredits.types';
+
+type GetFormModelParams = {
+  _: TranslatorType;
+  paymentOption: PaymentOptionsType;
+  retiring: boolean;
+};
+export const getFormModel = ({
+  _,
+  paymentOption,
+  retiring,
+}: GetFormModelParams) => {
+  return {
+    formId: 'buy-credits',
+    steps: [
+      {
+        id: 'choose-credits',
+        name: _(msg`Choose credits`),
+        // schema: TODO
+      },
+      {
+        id: 'payment-customer-info',
+        name:
+          paymentOption === PAYMENT_OPTIONS.CARD
+            ? _(msg`Payment info`)
+            : _(msg`Choose info`),
+      },
+      {
+        id: 'retirement-agree',
+        name: retiring ? _(msg`Retirement`) : _(msg`Agree & purchase`),
+      },
+    ],
+  };
+};