WebChat

import React, { useEffect, useState } from "react";
import { SketchPicker } from "react-color";
import { Col, Row, Container } from "../../components/Grid";
import Card from "react-bootstrap/Card";
import Button from "react-bootstrap/Button";
import axios from "axios";
import "../../css/App.css";
import { LoadingModal } from "../../components/Modal";
import { AppsModal } from "../../components/Modal";
import { useHistory } from "react-router-dom";

export function WebChat() {

  const [install, setInstall] = useState(true);
  const [uninstall, setUninstall] = useState(false);
  const [textColor, setTextColor] = useState();
  const [buttonColor, setButtonColor] = useState();
  const [color, setColor] = useState();
  const [displayColorPicker, setDisplayColorPicker] = useState(false);
  const [displayColorPicker1, setDisplayColorPicker1] = useState(false);
  const [displayColorPicker2, setDisplayColorPicker2] = useState(false);
  const [loader, setLoader] = useState(false);
  const [modalShow, setModalShow] = useState(false);
  const [appAction, setAppAction] = useState("");

  const history = useHistory();

  useEffect(() => {
    const thryv_id = localStorage.getItem("business_id");
    axios
      .get(
        `${process.env.REACT_APP_BACKEND_URL}/api/webmessenger/thryvUser/getusertableinfo`,
        {
          params: {
            id: thryv_id,
          },
        }
      )
      .then((response) => {
        if (response?.data?.length > 0) {
          setUninstall(true);
          setInstall(false);
          setColor(response.data[0].brand_color); // ==>brand_color from db
          setTextColor(response.data[0].conversation_color); // ==> conversation_color from db
          setButtonColor(response.data[0].action_color); //==> action_color from db
          localStorage.setItem("color", response.data[0].brand_color);
          localStorage.setItem(
            "textColor",
            response.data[0].conversation_color
          );
          localStorage.setItem("buttonColor", response.data[0].action_color);
        }
      })
      .catch((error) => {
        console.log(error);
      });
  },[]);

  useEffect(() => {
    const access_token = localStorage.getItem("access_token");
    const thryv_business_id = localStorage.getItem("business_id");

    const authHeader = {
      headers: {
        Authorization: `Bearer ${access_token}`,
      },
    };

    axios
      .get(
        `https://api.thryv.com/platform/v1/businesses/${thryv_business_id}`,
        authHeader
      )
      .then((response) => {
        if (response?.status === 200) {
          setColor(response?.data?.data?.business?.meta?.branding?.color);
        }
      })
      .catch((error) => {
        console.log(error);
      });
  },[]);

  const pickHeaderColor = () => {
    setDisplayColorPicker(!displayColorPicker);
  };

  const handleCloseHeader = () => {
    setDisplayColorPicker(false);
  };

  const handleHeaderColorChange = (color) => {
    setColor(color.hex);
  };

  const pickTextColor = () => {
    setDisplayColorPicker1(!displayColorPicker1);
  };

  const handleCloseText = () => {
    setDisplayColorPicker1(false);
  };

  const handleTextColorChange = (color) => {
    setTextColor(color.hex);
  };

  const pickButtonColor = () => {
    setDisplayColorPicker2(!displayColorPicker2);
  };

  const handleCloseButton = () => {
    setDisplayColorPicker2(false);
  };

  const handleButtonColorChange = (color) => {
    setButtonColor(color.hex);
  };

  const installColorSetting = () => {
    setLoader(true);

    const colorPayload = {
      thryv_id: localStorage.getItem("business_id"),
      method: "install",
      type: "web",
      thryv_access_token: localStorage.getItem("access_token"),
      brand_color: color,
      conversation_color: textColor,
      action_color: buttonColor,
    };

    axios
      .post(
        `${process.env.REACT_APP_BACKEND_URL}/api/webmessenger/thryvUser/installColorSetting`,
        {
          payload: colorPayload,
        }
      )
      .then((response) => {
        localStorage.setItem("Script", response?.data?.payload);
        if (response?.status === 200) {
          setLoader(false);
          history.push("/webMessengerNext");
        }
      })
      .catch((error) => {
        console.log(error);
      });
  };

  const updateColorSetting = () => {
    setLoader(true);

    const colorPayload = {
      thryv_id: localStorage.getItem("business_id"),
      method: "update",
      type: "web",
      thryv_access_token: localStorage.getItem("access_token"),
      brand_color: color,
      conversation_color: textColor,
      action_color: buttonColor,
    };

    axios
      .post(
        `${process.env.REACT_APP_BACKEND_URL}/api/webmessenger/thryvUser/installColorSetting`,
        {
          payload: colorPayload,
        }
      )
      .then((response) => {
        localStorage.setItem("Script", response?.data?.payload);
        if (response?.status === 200) {
          setAppAction("Updated");
          setModalShow(true);
          setLoader(false);
        }
      })
      .catch((error) => {
        console.log(error);
      });
  };

  const uninstallSetting = () => {
    setLoader(true);
    setModalShow(true);

    const colorPayload = {
      thryv_id: localStorage.getItem("business_id"),
      method: "uninstall",
      type: "web",
    };

    axios
      .post(
        `${process.env.REACT_APP_BACKEND_URL}/api/webmessenger/thryvUser/installColorSetting`,
        {
          payload: colorPayload,
        }
      )
      .then((response) => {
        localStorage.setItem("Script", response?.data?.payload);
        if (response?.status === 200) {
          setAppAction("Uninstalled");
          setModalShow(true);
          setLoader(false);
        }
      })
      .catch((error) => {
        console.log(error);
      });
  };

  const dontUninstall = () => {
    window.location.href = "https://go.thryv.com/app/app-market";
  };

  const popover = {
    position: "absolute",
    zIndex: "2",
  };
  const cover = {
    position: "fixed",
    top: "0px",
    right: "0px",
    bottom: "0px",
    left: "0px",
  };

  return (
    <Container fluid>
      {loader && <LoadingModal show={loader} />}
      {modalShow && (
        <AppsModal
          show={modalShow}
          appName="WebMessenger"
          appAction={appAction}
          onHide={() => {
            setModalShow(false);
            window.location.href = "https://go.thryv.com/app";
          }}
        />
      )}
      <div class="container-Fluid" style={{ paddingBottom: "50px" }}>
        <div
          style={{
            height: "301px",
            clear: "both",
            paddingTop: "120px",
            textAlign: "center",
            backgroundColor: "rgb(236, 238, 239)",
            marginBottom: "55px",
          }}
        >
          <p class="lead mt-2 step1" style={{ fontSize: "x-large" }}>
            You can choose the color combination below which suits to your
            website.
          </p>
          <p>
            Please customize the below colors to best suite your website. Don’t
            worry, if you don’t like your initial selection this can always be
            updated!
          </p>
        </div>
      </div>
      <Row>
        <Col size="md-6">
          <div>
            <div
              class="container d-flex justify-content-center"
              style={{ width: "400px" }}
            >
              <div class="card" style={{ border: "none" }}>
                {install && (
                  <div
                    class="d-flex flex-row justify-content-between p-3 adiv text-white"
                    style={{ backgroundColor: color }}
                  >
                    {" "}
                    <i className="fa fa-arrow-left"></i>{" "}
                    <span class="pb-3">Thryv chat</span>{" "}
                    <i class="fa fa-times"></i>{" "}
                  </div>
                )}
                {uninstall && (
                  <div
                    class="d-flex flex-row justify-content-between p-3 adiv text-white"
                    style={{ backgroundColor: color }}
                  >
                    {" "}
                    <i className="fa fa-arrow-left"></i>{" "}
                    <span class="pb-3">Thryv chat</span>{" "}
                    <i class="fa fa-times"></i>{" "}
                  </div>
                )}
                <div class="d-flex flex-row p-3">
                  {install && (
                    <div
                      class="chat mr-2 p-3"
                      style={{ backgroundColor: textColor }}
                    >
                      Hello and thank you for using the Thryv.{" "}
                    </div>
                  )}
                  {uninstall && (
                    <div
                      class="chat mr-2 p-3"
                      style={{ backgroundColor: textColor }}
                    >
                      Hello and thank you for using the Thryv.{" "}
                    </div>
                  )}
                  <img
                    src="https://img.icons8.com/color/48/000000/circled-user-male-skin-type-7.png"
                    alt="male-user"
                    width="30"
                    height="30"
                  ></img>
                </div>
                <div class="d-flex flex-row p-3">
                  <img
                    src="https://img.icons8.com/color/48/000000/circled-user-female-skin-type-7.png"
                    alt="female-user"
                    width="30"
                    height="30"
                  ></img>
                  <div
                    class="chat ml-2 p-3"
                    style={{ backgroundColor: "rgba(0, 0, 0, 0.03)" }}
                  >
                    I would like to have a introductory demo call if possible.
                  </div>
                </div>
                <div class="d-flex flex-row p-3">
                  {install && (
                    <div
                      class="chat mr-2 p-3"
                      style={{ backgroundColor: textColor }}
                    >
                      Absolutely, please use below book button to do so.{" "}
                    </div>
                  )}
                  {uninstall && (
                    <div
                      class="chat mr-2 p-3"
                      style={{ backgroundColor: textColor }}
                    >
                      Absolutely, please use below book button to do so.{" "}
                    </div>
                  )}
                  <img
                    src="https://img.icons8.com/color/48/000000/circled-user-male-skin-type-7.png"
                    alt="female-user"
                    width="30"
                    height="30"
                  ></img>
                </div>
                <div class="d-flex flex-row p-3">
                  <div
                    class="chat ml-5 p-3"
                    style={{ backgroundColor: textColor }}
                  >
                    <p> Introductory Phone </p>
                    <center>
                      {install && (
                        <Button
                          style={{
                            backgroundColor: buttonColor,
                            border: "none",
                            color: "white",
                            borderRadius: "50px",
                          }}
                        >
                          Book
                        </Button>
                      )}
                      {uninstall && (
                        <Button
                          style={{
                            backgroundColor: buttonColor,
                            border: "none",
                            color: "white",
                            borderRadius: "50px",
                          }}
                        >
                          Book
                        </Button>
                      )}
                    </center>
                  </div>
                </div>
                <div class="d-flex flex-row p-3">
                  <img
                    src="https://img.icons8.com/color/48/000000/circled-user-female-skin-type-7.png"
                    width="30"
                    height="30"
                    alt="female-user"
                  ></img>
                  <div
                    class="chat ml-2 p-3"
                    style={{ backgroundColor: "rgba(0, 0, 0, 0.03)" }}
                  >
                    Thank you!
                  </div>
                </div>
                <div class="form-group px-3">
                  {" "}
                  <textarea
                    class="form-control"
                    style={{ borderRadius: "100px", height: "40px" }}
                    rows="5"
                    placeholder="Type your message"
                  ></textarea>{" "}
                </div>
              </div>
            </div>
          </div>
        </Col>
        <Col size="md-2">
          <div>
            <Card border="light" style={{ width: "40rem" }}>
              <Card.Header style={{ textAlign: "center" }}>
                Color Setting
              </Card.Header>
              <Card.Body>
                <Card.Title>Header Color</Card.Title>
                <Card.Text>
                  Pick a messenger header color from color pallete which suits
                  to your website.
                  <br></br> <br></br>
                  <p style={{ fontSize: "smaller" }}>
                    - We’ve defaulted this to the brand color you specified on
                    your Thryv profile! However, if this color doesn’t suit your
                    website feel free to change it!
                  </p>
                  <br></br>
                  <center>
                    <Button
                      variant="primary"
                      style={{
                        backgroundColor: "rgba(0,0,0,.03)",
                        border: "none",
                        color: "black",
                      }}
                      onClick={pickHeaderColor}
                    >
                      Pick Header Color
                    </Button>
                  </center>
                  <div className="siderbar">
                    {displayColorPicker ? (
                      <div style={popover}>
                        <div style={cover} onClick={handleCloseHeader} />
                        <SketchPicker
                          color={color}
                          onChange={handleHeaderColorChange}
                          onSwatchHover={(color, e) => {
                            console.log("color", color);
                          }}
                        />
                      </div>
                    ) : null}
                  </div>
                  <br></br>
                  <Card.Title>Text Color</Card.Title>
                  Pick a messenger text color from color pallete which suits to
                  your website.
                  <br></br> <br></br>
                  <p style={{ fontSize: "smaller" }}>
                    - Pick a color that best suits your website!
                  </p>
                  <br></br>
                  <center>
                    <Button
                      variant="primary"
                      style={{
                        backgroundColor: "rgba(0,0,0,.03)",
                        border: "none",
                        color: "black",
                      }}
                      onClick={pickTextColor}
                    >
                      Pick Text Color
                    </Button>
                  </center>
                  <div className="siderbar">
                    {displayColorPicker1 ? (
                      <div style={popover}>
                        <div style={cover} onClick={handleCloseText} />
                        <SketchPicker
                          color={textColor}
                          onChange={handleTextColorChange}
                          onSwatchHover={(color, e) => {
                            console.log("color", color);
                          }}
                        />
                      </div>
                    ) : null}
                  </div>
                  <br></br>
                  <Card.Title>Button Color</Card.Title>
                  Pick a messenger text color from color pallete which suits to
                  your website.
                  <br></br> <br></br>
                  <p style={{ fontSize: "smaller" }}>
                    - Pick a color that best suits your website!
                  </p>
                  <br></br>
                  <center>
                    <Button
                      variant="primary"
                      style={{
                        backgroundColor: "rgba(0,0,0,.03)",
                        border: "none",
                        color: "black",
                      }}
                      onClick={pickButtonColor}
                    >
                      Pick Button Color
                    </Button>
                  </center>
                  <div className="siderbar">
                    {displayColorPicker2 ? (
                      <div style={popover}>
                        <div style={cover} onClick={handleCloseButton} />
                        <SketchPicker
                          color={buttonColor}
                          onChange={handleButtonColorChange}
                          onSwatchHover={(color, e) => {
                            console.log("color", color);
                          }}
                        />
                      </div>
                    ) : null}
                  </div>{" "}
                  <br></br> <br></br>
                </Card.Text>
              </Card.Body>
            </Card>
            <br />{" "}
          </div>
        </Col>
      </Row>
      <Row>
        <Col size="12">
          <center>
            {install && (
              <Button
                variant="primary"
                style={{
                  backgroundColor: "rgb(255, 80, 0)",
                  width: "150px",
                  fontSize: "18px",
                  border: "none",
                  height: "50px",
                  color: "white",
                }}
                onClick={installColorSetting}
              >
                Install
              </Button>
            )}
            {uninstall && (
              <Button
                variant="primary"
                style={{
                  backgroundColor: "rgb(255, 80, 0)",
                  width: "150px",
                  fontSize: "18px",
                  border: "none",
                  height: "50px",
                  color: "white",
                  marginRight: "15px",
                }}
                onClick={updateColorSetting}
              >
                Update
              </Button>
            )}
            {uninstall && (
              <Button
                variant="primary"
                style={{
                  backgroundColor: "rgb(255, 80, 0)",
                  width: "150px",
                  fontSize: "18px",
                  border: "none",
                  height: "50px",
                  color: "white",
                  marginRight: "15px",
                }}
                onClick={uninstallSetting}
              >
                Uninstall
              </Button>
            )}
            {uninstall && (
              <Button
                variant="primary"
                style={{
                  backgroundColor: "rgb(255, 80, 0)",
                  width: "150px",
                  fontSize: "18px",
                  border: "none",
                  height: "50px",
                  color: "white",
                  marginRight: "15px",
                }}
                onClick={dontUninstall}
              >
                Go Back to thryv
              </Button>
            )}
          </center>
        </Col>
      </Row>
    </Container>
  );
}