1 - New Form

This component allows you to create a form easily and quickly

1.1 - Necessary parameters

• const formInfo

The information to improve the UI of the component for the end user

• const fields

An array with the keys of the fields and the type of field so that the form displays the inputs correctly

• function onSubmit

The onSubmit function will receive the data from the New Form in order to save it

• values DB

We must have the source of the database values so that the newForm component attributes its respective value to each element, taking the name as key If there is no data, the fields will be empty and this is normal when we are going to create an entity for the first time.

import NewForm from "../../../../components/commons/NewForm";
import { useMutation, useQuery } from "@apollo/client";
import {
  GET_PLANS,
  GET_SUPER_ADMIN_SETTINGS,
  SAVE_SUPER_ADMIN_SETTINGS
} from "../../../../utils/queries";

...others imports

const SuperAdminMarketingSettingGeneral = () => {

  const [saveSettings] = useMutation(SAVE_SUPER_ADMIN_SETTINGS);
  const { data: getSettings, refetch } = useQuery(GET_SUPER_ADMIN_SETTINGS);
  const { t } = useTranslation("superadmin");
  const { data: plans, loading } = useQuery(GET_PLANS);

  const **formInfo** = {
    name: t("free_trial"),
    description: t("free_trial_config"),
  };

  const fields = [
    {
      name: "MARKETING_FREE_TRIAL",
      label: t("free_trial_enabled"),
      type: "toggle",
      required: true,
    },
    {
      name: "MARKETING_FREE_DAYS",
      label: t("days_free"),
      type: "number",
      required: true,
    },
    {
      name: "MARKETING_FREE_TRIAL_PLAN",
      label: t("plan_for_free_trial"),
      type: "select",
      required: true,
      options: plans?.getAllPlans.map((plan: UserMembershipPlanType) => {
        return {
          optionName: plan.name,
          optionValue: plan.id,
        };
      }),
    },
  ];

  const onSubmit = (data: any) => {
    let payload = parseSettingDataOnSubmit(data, fields);

    saveSettings({
      variables: {
        settings: payload,
      },
    })
      .then((r) => {
        refetch();
        toast.success(t("setting_updated"));
      })
      .catch((e) => {
        console.log(e);
        toast.error("Error");
      });
  };

  return (
    <div>
      **<NewForm**
        values={getSettings?.getSuperAdminSettings}
        info={formInfo}
        fields={fields}
        onSubmit={onSubmit}
      />
    </div>
  );
};

export default SuperAdminMarketingSettingGeneral;

2- Connected components

An easy way to create the backend for certain components that we need to have dynamic data or because we want to touch the code as little as possible once it is in production. Even in this way we can manage that data in the languages that we have established on the platform

On the frontend, we can use the following functions to get that data

  const componentName = "Pricing";
  const { component, loading: loadingComponent } = useFrontendComponent({
    componentName,
  });

  // component = { content: "Mi content for about component / page" }
  // Any other field added to component in the backend

useFrontendComponent, is a custom hook that we created so you can use anywhere on the frontend