Helpical React Components.

Include these components:

• Ticket List
• Ticket Create
• Ticket Reply

yarn add smartech-support

1- Create a page in your app: (Tickets List)

Add MainTicket to this page:

import { MainTicket } from "smartech-support";

const Tickets = () => {
  const nav = useNavigate();
  const userEmail = '';
  const currentDepartment = 'HELPICAL_DEPARTMENT_ID';

  return (
      <MainTicket
        router={nav}
        options={{
          createRoute: "/tickets/create",
          editRoute: "/tickets/",
          userEmail: userEmail,
          currentDepartment: currentDepartment,
        }}
      />
  );
};

export default Tickets;

2- Create a page for add ticket: add TicketCreate component like this:

import { useNavigate } from "react-router-dom";
import { TicketCreate } from "smartech-support";

import MainContainer from "@/components/container/MainContainer";
import { HELPICAL_DEPARTMENT_ID } from "@/utils/constants/configConstants";
import { useAccount } from "@/utils/hooks/useAuth";

const Ticket = () => {
  const nav = useNavigate();
  const { userDetail } = useAccount();

  const userEmail = userDetail?.email;
  const currentDepartment = HELPICAL_DEPARTMENT_ID;
  const userProfile = {
    email: userEmail,
    firstName: userDetail?.first_name,
    lastName: userDetail?.last_name,
    id: userDetail?.mobile,
  };

  return (
    <div>
      <MainContainer>
        <TicketCreate
          router={nav}
          options={{
            routeList: "/tickets",
            userProfile: userProfile,
            currentDepartment: currentDepartment,
          }}
        />
      </MainContainer>
    </div>
  );
};

export default Ticket;

3- Create Reply page in your app:

import { useMatch, useNavigate } from "react-router-dom";
import { TicketReply as TicketReplyMain } from "smartech-support";

import MainContainer from "@/components/container/MainContainer";
import { HELPICAL_DEPARTMENT_ID } from "@/utils/constants/configConstants";
import { useAccount } from "@/utils/hooks/useAuth";

const TicketReply = () => {
  const { userDetail } = useAccount();
  const nav = useNavigate();
  const replyId = useMatch("/tickets/:id")?.params?.id;
  const selectedTicket = replyId;

  const currentDepartment = HELPICAL_DEPARTMENT_ID;

  const userProfile = {
    email: userDetail?.email,
    firstName: userDetail?.first_name,
    lastName: userDetail?.last_name,
    id: userDetail?.mobile,
  };

  return (
    <div>
      <MainContainer>
        <TicketReplyMain
          router={nav}
          selectedTicket={selectedTicket}
          options={{
            currentDepartment: currentDepartment,
            userProfile: userProfile,
          }}
        />
      </MainContainer>
    </div>
  );
};

export default TicketReply;