mfe-customer/src/client/jsx/react/pages/main/components/withMain.jsx

Subscription page with Checkout

import React, { useState } from "react";
import { Form, Select } from "antd";
const { Option } = Select;
import { countries } from "./phoneCountries";
import RequestService from "@ozoneuniverse/mfe-components/dist/components/request-manager";
import { querys } from "../../querys";
import { useHistory } from "react-router-dom";

export const withMain = (Component) => (props) => {
  let history = useHistory();
  const [errorForm, setErrorForm] = useState("");
  const [isSend, setIsSend] = useState(false);
  const [isSendLoading, setIsSendLoading] = useState(false);

  const prefixSelector = (
    <Form.Item name={["metaverse", "prefixPhone"]} noStyle>
      <Select
        showSearch
        style={{
          width: 100,
        }}
      >
        {countries.map((value, index) => {
          const code = `+${value.code}`;
          return (
            <Option value={code} key={index}>
              {code}
            </Option>
          );
        })}
      </Select>
    </Form.Item>
  );

  const validateMessages = {
    required: "${label} is required!",
    types: {
      string: "${label} is not a valid!",
      email: "${label} is not a valid email!",
    },
  };

  const addWorldType = ({ metaverse }) => {
    const variables = {
      input: {
        metaverseWorldTypeName: "freemium",
        metaverseWorldTypeMaxScenesLimit: 3,
      },
    };
    RequestService.makeMutation(
      querys["addWorldType"],
      "addWorldType",
      variables
    ).then((response) => {
      const { success, error } = response.data.addMetaverseWorldType;
      if (success) {
        getWorldType({ metaverse });
        //console.log('type world Respon23e', response);
      } else {
        setIsSendLoading(false);
        setErrorForm("Error with freemium");
      }
    });
  };

  const getWorldType = ({ metaverse }) => {
    RequestService.queryGetGraphQL(querys["getWorldType"]).then((response) => {
      const { success, data } = response.data.getMetaverseWorldTypes;
      if (success && data.length > 0) {
        addUser({
          metaverse,
          metaverseWorldTypeId: data[0].metaverseWorldTypeId,
        });
        //console.log('type world Response', response);
      } else {
        addWorldType({ metaverse });
      }
    });
  };

  const addUser = ({ metaverse, metaverseWorldTypeId }) => {
    RequestService.makeMutation(querys["addUser"], "addUser", {
      input: {
        metaverseUserName: metaverse.userName,
        metaverseUserFirstName: metaverse.firstName,
        metaverseUserLastName: metaverse.lastName,
        metaverseUserEmail: metaverse.email,
        metaverseUserPhoneNumber: `${metaverse.prefixPhone}${metaverse.phone}`,
      },
    }).then((response) => {
      const { success, error } = response.data.addMetaverseUser;
      if (success) {
        const variablesWorld = {
          input: {
            metaverseWorldName: metaverse.metaverseName,
            metaverseUserEmail: metaverse.email,
            metaverseWorldTypeId: metaverseWorldTypeId,
          },
        };

        addWorld(variablesWorld);
      } else {
        //console.error('Error with user: ', error);
        setIsSendLoading(false);
        setErrorForm(`Error with create user: ${error}`);
      }
    });
  };

  const addWorld = (variablesWorld) => {
    RequestService.makeMutation(
      querys["addWorld"],
      "addWorld",
      variablesWorld
    ).then((response) => {
      const { success, error, data } = response.data.addMetaverseWorld;

      if (success) {
        //console.log('World Create', response);
        history.push(`/metaverse/${data.metaverseWorldName}`);
      } else {
        setErrorForm(`Error with create world: ${error}`);
        //console.error(error);
      }
      setIsSendLoading(false);
    });
  };

  const onFinish = (values) => {
    const { metaverse } = values;
    setIsSend(true);
    setIsSendLoading(true);
    getWorldType({ metaverse });
  };

  const actionsMain = {
    prefixSelector,
    validateMessages,
    onFinish,
    isSend,
    errorForm,
    isSendLoading,
  };
  return <Component {...props} {...actionsMain} />;
};