Commit ca8f7144 by Arjun Jhukal

updated the chatbot

parent bb332c15
"use client"; "use client";
import Chatbot from '@/components/atom/ChatbotIcon';
import DashboardLayout from '@/components/layouts/DashboardLayout'; import DashboardLayout from '@/components/layouts/DashboardLayout';
import AgeVerificationModal from '@/components/organism/dialog'; import AgeVerificationModal from '@/components/organism/dialog';
import { useSearchParams } from 'next/navigation'; import { useSearchParams } from 'next/navigation';
...@@ -20,6 +21,7 @@ function LayoutContent({ children }: { children: React.ReactNode }) { ...@@ -20,6 +21,7 @@ function LayoutContent({ children }: { children: React.ReactNode }) {
<DashboardLayout> <DashboardLayout>
{children} {children}
<AgeVerificationModal /> <AgeVerificationModal />
<Chatbot />
</DashboardLayout> </DashboardLayout>
) )
} }
......
import { useGetChatbotSettingQuery } from '@/services/settingApi';
import { Button, Typography } from '@mui/material';
import Image from 'next/image';
export default function Chatbot() {
const { data } = useGetChatbotSettingQuery();
const fileUrl = data?.data?.chatbot_image_url;
const label = data?.data?.chatbot_label;
const isVideo = fileUrl?.toLowerCase().endsWith(".mp4");
return (
<Button
className="fixed! bottom-2 right-2 lg:bottom-4 lg:right-4 max-w-fit px-8!"
variant="contained"
color="primary"
fullWidth
LinkComponent={"a"}
href={data?.data?.chatbot_link || ""}
target='_black'
sx={{
justifyContent: "start"
}}
>
<div className=" w-full flex! justify-start! items-center! gap-4">
{fileUrl && (
isVideo ? (
<video
autoPlay
loop
muted
playsInline
className="w-11 h-11 rounded-full object-cover"
>
<source src={fileUrl} type="video/mp4" />
</video>
) : (
<Image
src={fileUrl}
alt="chatbot"
width={44}
height={44}
className="rounded-full object-cover"
/>
)
)}
<Typography variant="subtitle2">
{label}
</Typography>
</div>
</Button>
);
}
import InputFile from '@/components/atom/InputFile';
import { useAppDispatch } from '@/hooks/hook';
import { useGetChatbotSettingQuery, useUpdateChatbotMutation } from '@/services/settingApi';
import { showToast, ToastVariant } from '@/slice/toastSlice';
import { Button, InputLabel, OutlinedInput } from '@mui/material';
import { useFormik } from 'formik';
import * as Yup from "yup";
const validationSchema = Yup.object({
chatbot_label: Yup.string().required("Label is required"),
chatbot_link: Yup.string().required("Link is required"),
});
export default function Chatbot() {
const dispatch = useAppDispatch();
const { data } = useGetChatbotSettingQuery();
const [updateChatbotSetting, { isLoading }] = useUpdateChatbotMutation();
const formik = useFormik({
enableReinitialize: true,
initialValues: {
chatbot_label: data?.data?.chatbot_label || "",
chatbot_link: data?.data?.chatbot_link || "",
chatbot_image: null as File | null,
chatbot_image_url: data?.data?.chatbot_image_url || "",
},
validationSchema,
onSubmit: async (values) => {
try {
const formData = new FormData();
formData.append("chatbot_label", values.chatbot_label);
formData.append("chatbot_link", values.chatbot_link);
if (values.chatbot_image) {
formData.append("chatbot_image", values.chatbot_image);
}
const response = await updateChatbotSetting(formData).unwrap();
dispatch(
showToast({
variant: ToastVariant.SUCCESS,
message: response?.message || "Chatbot settings updated successfully",
})
);
} catch (e: any) {
dispatch(
showToast({
variant: ToastVariant.ERROR,
message: e?.data?.message || "Something went wrong",
})
);
}
},
});
return (
<form
onSubmit={formik.handleSubmit}
className="border border-gray rounded-[16px] mb-6"
>
<div className="py-6 px-10 border-b border-gray">
<h2 className="text-[20px] font-bold">Chatbot Settings</h2>
</div>
<div className="p-6 lg:p-10 space-y-6">
{/* Label */}
<div>
<InputLabel>
Label<span className="text-red-500">*</span>
</InputLabel>
<OutlinedInput
fullWidth
name="chatbot_label"
placeholder="Enter Label"
value={formik.values.chatbot_label}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
<span className="text-red-500 text-sm">
{formik.touched.chatbot_label && formik.errors.chatbot_label}
</span>
</div>
{/* Link */}
<div>
<InputLabel>
Link<span className="text-red-500">*</span>
</InputLabel>
<OutlinedInput
fullWidth
name="chatbot_link"
placeholder="Enter Link"
value={formik.values.chatbot_link}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
<span className="text-red-500 text-sm">
{formik.touched.chatbot_link && formik.errors.chatbot_link}
</span>
</div>
{/* Single Image Upload */}
<div>
<InputFile
name="chatbot_image"
label="Chatbot Icon"
value={formik.values.chatbot_image}
onChange={(file: File | File[] | null) =>
formik.setFieldValue("chatbot_image", file)
}
serverFile={formik.values.chatbot_image_url}
onRemoveServerFile={() =>
formik.setFieldValue("chatbot_image_url", "")
}
/>
</div>
<Button
type="submit"
variant="contained"
disabled={isLoading}
>
{isLoading ? "Updating..." : "Update"}
</Button>
</div>
</form>
);
}
"use client"; "use client";
import PageHeader from '@/components/molecules/PageHeader' import PageHeader from '@/components/molecules/PageHeader';
import React, { useState } from 'react' import { useState } from 'react';
import SiteSetting from './SiteSetting' import AdminProfile from './AdminProfile';
import AdminProfile from './AdminProfile'
import BannerSlider from './BannerSlider'; import BannerSlider from './BannerSlider';
import Chatbot from './Chatbot';
import SiteSetting from './SiteSetting';
export default function SettingPage() { export default function SettingPage() {
// Track the active tab index // Track the active tab index
...@@ -14,6 +15,7 @@ export default function SettingPage() { ...@@ -14,6 +15,7 @@ export default function SettingPage() {
{ title: "Site Settings", content: <SiteSetting /> }, { title: "Site Settings", content: <SiteSetting /> },
{ title: "My Profile", content: <AdminProfile /> }, { title: "My Profile", content: <AdminProfile /> },
{ title: "Banner Slider", content: <BannerSlider /> }, { title: "Banner Slider", content: <BannerSlider /> },
{ title: "Chatbot", content: <Chatbot /> },
]; ];
return ( return (
......
import { GlobalResponse } from "@/types/config";
import { BannerResponseProps, ChatbotProps, SiteSettingResponseProps } from "@/types/setting";
import { createApi } from "@reduxjs/toolkit/query/react"; import { createApi } from "@reduxjs/toolkit/query/react";
import { baseQuery } from "./baseQuery"; import { baseQuery } from "./baseQuery";
import { GlobalResponse } from "@/types/config";
import { BannerResponseProps, SiteSettingResponseProps } from "@/types/setting";
export const settingApi = createApi({ export const settingApi = createApi({
reducerPath: "settingApi", reducerPath: "settingApi",
baseQuery: baseQuery, baseQuery: baseQuery,
tagTypes: ['settings', 'banners'], tagTypes: ['settings', 'banners', "Chatbot"],
endpoints: (builder) => ({ endpoints: (builder) => ({
updateSetting: builder.mutation<GlobalResponse, FormData>({ updateSetting: builder.mutation<GlobalResponse, FormData>({
query: (body) => ({ query: (body) => ({
...@@ -39,7 +39,30 @@ export const settingApi = createApi({ ...@@ -39,7 +39,30 @@ export const settingApi = createApi({
providesTags: ['banners'] providesTags: ['banners']
}), }),
updateChatbot: builder.mutation<GlobalResponse, FormData>({
query: (body) => ({
url: "/api/admin/setting/chatbot",
method: "POST",
body: body,
}),
invalidatesTags: ['Chatbot']
}),
getChatbotSetting: builder.query<{ data: ChatbotProps }, void>({
query: () => ({
url: "/api/setting/chatbot",
method: "GET",
}),
providesTags: ['Chatbot']
}),
}) })
}) })
export const { useUpdateSettingMutation, useGetSettingsQuery, useUpdateBannerMutation, useGetAllBannerQuery } = settingApi; export const {
\ No newline at end of file useUpdateSettingMutation,
useGetSettingsQuery,
useUpdateBannerMutation,
useGetAllBannerQuery,
useUpdateChatbotMutation,
useGetChatbotSettingQuery
} = settingApi;
\ No newline at end of file
...@@ -65,4 +65,12 @@ export interface BannerResponseProps { ...@@ -65,4 +65,12 @@ export interface BannerResponseProps {
message: string; message: string;
success: boolean; success: boolean;
data: BannerProps[]; data: BannerProps[];
}
export interface ChatbotProps {
chatbot_link: string;
chatbot_image: File | null;
chatbot_image_url?: string;
chatbot_label: string;
} }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment