feat: add BuyCredits flow wip

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 />}
+    </>
+  );
+};

web-marketplace/src/features/marketplace/BuyCredits/BuyCredits.constants.ts

@@ -0,0 +1,4 @@
+export const PAYMENT_OPTIONS = {
+  CARD: 'card',
+  CRYPTO: 'crypto',
+} as const;

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>
+  );
+};

web-marketplace/src/features/marketplace/BuyCredits/BuyCredits.types.ts

@@ -0,0 +1 @@
+export type PaymentOptionsType = 'card' | 'crypto';

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`),
+      },
+    ],
+  };
+};