mfe-customer/src/client/jsx/react/pages/main/mainPage.jsx

Subscription page with Checkout

import React from "react";
import { withMain } from "./components/withMain";
import "antd/dist/antd.css";
import { Form, Input, Button, Card } from "antd";
import { Loader } from "../../componentsReact/index";
const Main = (props) => {
  const {
    prefixSelector,
    validateMessages,
    onFinish,
    isSend,
    isSendLoading,
    errorForm,
  } = props;

  return (
    <Card title="Form Metaverse" bordered={true} className="container-form">
      {!isSend ? (
        <Form
          layout="vertical"
          onFinish={onFinish}
          validateMessages={validateMessages}
          initialValues={{
            metaverse: {
              prefixPhone: "+86",
            },
          }}
        >
          <Form.Item
            name={["metaverse", "metaverseName"]}
            label="Metaverse Name"
            rules={[
              {
                required: true,
                pattern: "^[a-zA-Z]+[a-zA-Z0-9]*$",
                message: "Is not a valid Metaverse Name, ex: OzoneUniverse123",
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name={["metaverse", "userName"]}
            label="User Name"
            rules={[
              {
                required: true,
                message: "Is not a valid User Name, ex: Lester456",
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name={["metaverse", "firstName"]}
            label="First Name"
            rules={[
              {
                required: true,
                message: "Is not a valid First Name, ex: Lester",
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name={["metaverse", "lastName"]}
            label="Last Name"
            rules={[
              {
                required: true,
                message: "Is not a valid Last Name, ex: Gonzalez",
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name={["metaverse", "email"]}
            label="Email"
            rules={[
              {
                required: true,
                type: "email",
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name={["metaverse", "phone"]}
            label="Phone Number"
            rules={[
              {
                required: true,
                pattern: "^[0-9]+$",
                message: "Is not a valid Phone Number, ex: 12345678",
              },
            ]}
          >
            <Input
              addonBefore={prefixSelector}
              style={{
                width: "100%",
              }}
            />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" block>
              Submit
            </Button>
          </Form.Item>
        </Form>
      ) : (
        <div>
          {isSendLoading ? (
            <Loader />
          ) : errorForm !== "" ? (
            errorForm
          ) : (
            "Waiting Email"
          )}
        </div>
      )}
    </Card>
  );
};

export default withMain(Main);