MermsPanelReactJS/src/component/product/settingsTab/URLConfiguration.jsx

import { Form, Formik } from "formik";
import * as Yup from "yup";
import { useMutation } from "@tanstack/react-query";
import { setExternalURL } from "../../../services/services";
import { useState } from "react";
import { Link } from "react-router-dom";

const validationSchema = Yup.object().shape({
  url: Yup.string()
    .required("URL is required")
    .matches(
      /^https?:\/\/[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-]+\.[a-zA-Z]+/,
      "Must be like: https://example.mysite.com",
    ),
});

// const initialValues = {
//     url: '',
// };

const URLConfiguration = ({ productData }) => {
  const [externalURLChanged, setExternalURLChanged] = useState(true);

  const initialValues = {
    url: productData?.external_url || "",
  };

  let defaultUrl = "https://" + productData?.internal_url;
  let externalUrl = productData?.external_url;

  const handleExternalURLChanged = (e) => {
    if (e.target.value == externalUrl) {
      setExternalURLChanged(true);
    } else {
      setExternalURLChanged(false);
    }
  };

  // API to set url
  const setURL = useMutation({
    mutationFn: (fields) => {
      return setExternalURL(fields);
    },
    onSuccess: (res) => {
      if (res.data.resultCode != "0") {
        // throw({message: res?.data?.resultDescription})
        throw { message: "Something went wrong!" };
      }
    },
    onSettled: () => {
      setTimeout(() => {
        setURL.reset();
      }, 3000);
    },
    // onError: (err) => {
    //     console.log('err', err)
    // }
  });

  const handleSubmit = (values) => {
    let reqData = {
      token: localStorage.getItem("token"), // USER TOKEN
      uid: localStorage.getItem("uid"), // USER UID
      subscription_uid: productData?.subscription_uid,
      external_url: values.url,
    };
    setURL.mutate(reqData);
  };

  return (
    <>
      <div className="card card-statistics">
        <div className="card-header">
          <div className="card-heading">
            <h4 className="card-title" style={{ textTransform: "none" }}>
              {defaultUrl}
            </h4>
          </div>
        </div>
        {/*<div className="card-body">*/}
        {/*    <div className="form-group">*/}
        {/*        /!*<label htmlFor="exampleInputEmail1">Email address</label>*!/*/}
        {/*        <input type="email" className="form-control"*/}
        {/*               aria-describedby="defaultUrlHelp" value={defaultUrl} readOnly={true} />*/}
        {/*    </div>*/}
        {/*</div>*/}
      </div>

      <Formik
        initialValues={initialValues}
        validationSchema={validationSchema}
        onSubmit={handleSubmit}
      >
        {(props) => {
          return (
            <Form className="w-full">
              <div
                className="card card-statistics"
                style={{ backgroundColor: "#b6e5ef" }}
              >
                <div className="card-header">
                  <div className="card-heading">
                    <h4
                      className="card-title"
                      style={{ textTransform: "none" }}
                    >
                      Set your own URL
                    </h4>
                  </div>
                </div>
                <div className="card-body">
                  <div className="form-group">
                    <label htmlFor="exampleInputEmail1">
                      Enter your full URL{" "}
                      <span
                        className={`${props.errors.url && props.touched.url && "text-danger"}`}
                      >
                        {props.errors.url}
                      </span>
                    </label>
                    <input
                      value={props.values.url}
                      onChange={(e) => {
                        props.handleChange(e);
                        handleExternalURLChanged(e);
                      }}
                      type="text"
                      className="form-control"
                      id="url"
                      aria-describedby="url"
                      placeholder="https://example.mysite.com"
                    />
                  </div>
                  <div style={{ width: "100%", textAlign: "right" }}>
                    <button
                      type="submit"
                      disabled={setURL.isPending || externalURLChanged}
                      className="btn btn-primary"
                    >
                      {setURL.isPending ? "Loading..." : "Submit"}
                    </button>
                  </div>
                </div>

                {setURL.error && (
                  <div className="col-12">
                    <p className="text-danger">{setURL.error.message}</p>
                  </div>
                )}

                {setURL.isSuccess && (
                  <div className="col-12">
                    <p className="text-success">{"Completed successfully"}</p>
                  </div>
                )}
                <div
                  style={{
                    backgroundColor: "#148399",
                    borderRadius: "10px",
                    padding: "10px",
                    color: "white",
                    fontWeight: "bolder",
                    fontSize: "14px",
                  }}
                >
                  To link your domain to your website, update your DNS record to
                  point to our hosting provider.
                  <br />
                  <hr />
                  Enter the following DNS servers in your domain settings
                  <br />
                  {process.env.REACT_APP_DNS1}
                  <br />
                  {process.env.REACT_APP_DNS2}
                  <hr />
                  <Link
                    target="_blank"
                    to={process.env.REACT_APP_DNS_LINK}
                    style={{ color: "#f6f5f6" }}
                  >
                    Click here for detailed instructions.
                  </Link>
                  <hr />
                  After updating your DNS settings, click “Start Verification.”
                  You will receive a status notification within 24 hours.
                </div>
              </div>
            </Form>
          );
        }}
      </Formik>
    </>
  );
};

export default URLConfiguration;