feat: select payment methods dialog

packages/webapp/src/containers/PaymentLink/dialogs/SelectPaymentMethodsDialog/SelectPaymemtMethodsForm.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Formik, Form } from 'formik';
+
+interface SelectPaymentMethodsFormValues {}
+
+const initialValues: SelectPaymentMethodsFormValues = {};
+
+export const SelectPaymentMethodsForm: React.FC<{
+  children: React.ReactNode;
+}> = ({ children }) => {
+  const handleSubmit = (values: SelectPaymentMethodsFormValues) => {};
+
+  return (
+    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
+      <Form>{children}</Form>
+    </Formik>
+  );
+};

packages/webapp/src/containers/PaymentLink/dialogs/SelectPaymentMethodsDialog/SelectPaymentMethodsBoot.tsx

@@ -0,0 +1,35 @@
+import React, { createContext, useContext, useState, ReactNode } from 'react';
+
+interface SelectPaymentMethodsContextType {}
+
+const SelectPaymentMethodsContext =
+  createContext<SelectPaymentMethodsContextType>(
+    {} as SelectPaymentMethodsContextType,
+  );
+
+export const useSelectPaymentMethods = () => {
+  const context = useContext(SelectPaymentMethodsContext);
+
+  if (!context) {
+    throw new Error(
+      'useSelectPaymentMethods must be used within a SelectPaymentMethodsProvider',
+    );
+  }
+  return context;
+};
+
+interface SelectPaymentMethodsProviderProps {
+  children: ReactNode;
+}
+
+export const SelectPaymentMethodsBoot: React.FC<
+  SelectPaymentMethodsProviderProps
+> = ({ children }) => {
+  return (
+    <SelectPaymentMethodsContext.Provider
+      value={{ }}
+    >
+      {children}
+    </SelectPaymentMethodsContext.Provider>
+  );
+};

packages/webapp/src/containers/PaymentLink/dialogs/SelectPaymentMethodsDialog/SelectPaymentMethodsContent.tsx

@@ -0,0 +1,114 @@
+import { SelectPaymentMethodsBoot } from './SelectPaymentMethodsBoot';
+import { SelectPaymentMethodsForm } from './SelectPaymemtMethodsForm';
+import styled from 'styled-components';
+import { Group, Stack } from '@/components';
+import {
+  DialogFooter,
+  Button,
+  Checkbox,
+  DialogBody,
+  Intent,
+  Text,
+} from '@blueprintjs/core';
+import { useDialogActions } from '@/hooks/state';
+import { DialogsName } from '@/constants/dialogs';
+import { useUncontrolled } from '@/hooks/useUncontrolled';
+
+export function SelectPaymentMethodsContent() {
+  const { closeDialog } = useDialogActions();
+
+  const handleCancelBtnClick = () => {
+    closeDialog(DialogsName.SelectPaymentMethod);
+  };
+  return (
+    <SelectPaymentMethodsBoot>
+      <SelectPaymentMethodsForm>
+        <DialogBody>
+          <Stack spacing={12}>
+            <PaymentMethodSelect
+              label={'Card (Including Apple Pay, Google Pay and Link)'}
+            />
+            <PaymentMethodSelect
+              label={'Card (Including Apple Pay, Google Pay and Link)'}
+            />
+            <PaymentMethodSelect
+              label={'Card (Including Apple Pay, Google Pay and Link)'}
+            />
+            <PaymentMethodSelect
+              label={'Card (Including Apple Pay, Google Pay and Link)'}
+            />
+            <PaymentMethodSelect
+              label={'Card (Including Apple Pay, Google Pay and Link)'}
+            />
+            <PaymentMethodSelect
+              label={'Card (Including Apple Pay, Google Pay and Link)'}
+            />
+          </Stack>
+        </DialogBody>
+
+        <DialogFooter
+          actions={
+            <>
+              <Button onClick={handleCancelBtnClick}>Cancel</Button>
+              <Button intent={Intent.PRIMARY}>Submit</Button>
+            </>
+          }
+        ></DialogFooter>
+      </SelectPaymentMethodsForm>
+    </SelectPaymentMethodsBoot>
+  );
+}
+
+interface PaymentMethodSelectProps {
+  label: string;
+  value?: boolean;
+  initialValue?: boolean;
+  onChange?: (value: boolean) => void;
+}
+function PaymentMethodSelect({
+  value,
+  initialValue,
+  onChange,
+  label,
+}: PaymentMethodSelectProps) {
+  const [_value, handleChange] = useUncontrolled<boolean>({
+    value,
+    initialValue,
+    finalValue: false,
+    onChange,
+  });
+  const handleClick = () => {
+    handleChange(!_value);
+  };
+
+  return (
+    <PaymentMethodSelectRoot onClick={handleClick}>
+      <PaymentMethodCheckbox
+        label={''}
+        checked={_value}
+        onClick={handleClick}
+      />
+      <PaymentMethodText>{label}</PaymentMethodText>
+    </PaymentMethodSelectRoot>
+  );
+}
+
+const PaymentMethodSelectRoot = styled(Group)`
+  border: 1px solid #d3d8de;
+  border-radius: 5px;
+  padding: 10px;
+  gap: 0;
+  cursor: pointer;
+`;
+
+const PaymentMethodCheckbox = styled(Checkbox)`
+  margin: 0;
+
+  &.bp4-control .bp4-control-indicator {
+    box-shadow: 0 0 0 1px #c5cbd3;
+  }
+`;
+
+const PaymentMethodText = styled(Text)`
+  color: #404854;
+`;

packages/webapp/src/containers/PaymentLink/dialogs/SelectPaymentMethodsDialog/SelectPaymentMethodsDialog.tsx

@@ -0,0 +1,38 @@
+// @ts-nocheck
+import React from 'react';
+import { Dialog, DialogSuspense } from '@/components';
+import withDialogRedux from '@/components/DialogReduxConnect';
+import { compose } from '@/utils';
+
+const SelectPaymentMethodsDialogContent = React.lazy(() =>
+  import('./SelectPaymentMethodsContent').then((module) => ({
+    default: module.SelectPaymentMethodsContent,
+  })),
+);
+
+/**
+ * Select payment methods dialogs.
+ */
+function SelectPaymentMethodsDialogRoot({ dialogName, payload, isOpen }) {
+  return (
+    <Dialog
+      name={dialogName}
+      isOpen={isOpen}
+      payload={payload}
+      title={'Share Link'}
+      canEscapeJeyClose={true}
+      autoFocus={true}
+      style={{ width: 570 }}
+    >
+      <DialogSuspense>
+        <SelectPaymentMethodsDialogContent />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export const SelectPaymentMethodsDialog = compose(withDialogRedux())(
+  SelectPaymentMethodsDialogRoot,
+);
+
+SelectPaymentMethodsDialog.displayName = 'SelectPaymentMethodsDialog';