1#@!#!123s

ALWAYS HENGHENG888 1#@!#!123s
: / var / www / chinawholesale-frontend-next / src / components / pages / contact /
Filename : ContactComponent.js
back
'use client';
import React, {useState} from "react";
import parser from "html-react-parser";
import {useContactMessage, useSettings} from "@/api/generale";
import Swal from "sweetalert2";
import PageCardComponent from "@/components/mixed/PageCardComponent";
import {cn} from "@/helpers/general";
import ExpressButton from "@/components/buttons/ExpressButton";
import InputPlain from "@/components/input/InputPlain";
import InputTextArea from "@/components/input/InputTextArea";
import {Form} from "antd";
import { LocationIcon, MailIcon, PhoneIcon } from '@/components/icons'

const AddressItem = ({icon, text, className = '', ...rest}) => {

	return (
		<div className={cn('flex items-start gap-1 mb-1', className)} {...rest}>
			{
				!!icon &&
				<div className="">
					{icon}
				</div>
			}
			<p className="mt-[-4px] mb-1">
				{parser(text)}
			</p>
		</div>
	)
}

const ContactComponent = ({contact}) => {
	const [complete, setComplete] = useState(false);
	const [form] = Form.useForm();
	const settings = useSettings()
	const {mutateAsync,  isPending} = useContactMessage();

	const submitContactForm = (data) => {
		mutateAsync({...data})
			.then((data) => {
				if (data.status === true) {
					Swal.fire({
						text: data.msg,
						icon: 'success',
						confirmButtonText: 'Dismiss'
					}).then(() => {
						form.resetFields()
						setComplete(true)
					})
				} else if (data.status === false) {
					Swal.fire({
						text: 'Your data is not valid!',
						icon: 'error',
						confirmButtonText: 'Dismiss'
					}).then()
					// setErrors(data?.errors || {})
				}
			})
	};

	return (
		<PageCardComponent
			title={'Contact Information'}
		>
			<div className={'grid grid-cols-1 lg:grid-cols-2 lg:gap-4'}>
				<div className={'col-span-1'}>
					<div
						className={'[&_*]:text-base [&_*]:text-neutral-900 mb-2 [&_p]:mb-0'}>{contact?.post_content && parser(contact.post_content)}</div>
					<div className={'[&_*]:text-base [&_*]:text-neutral-900 mb-2 lg:mb-3'}>
						<h3 className="text-lg text-neutral-900 font-semibold mb-2">Our Office</h3>
						<AddressItem
							icon={<LocationIcon size={32}/>}
							text={settings?.office_address}
						/>
						<AddressItem
                            icon={<PhoneIcon size={32}/>}
							text={settings?.office_phone}
						/>
						<AddressItem
							className={'mb-0'}
                            icon={<MailIcon size={32}/>}
							text={settings?.office_email}
						/>
					</div>
					<h3 className="text-base lg:text-lg text-neutral-900 font-semibold mb-2">Got Any Questions?</h3>
					<p className="text-sm text-neutral-900 mb-2">
						Use the form below to get in touch with the sales team
					</p>

					<Form
						form={form}
						layout="vertical"
						name={`contact`}
						onFinish={submitContactForm}
					>
						<InputPlain
							type="text"
							label="Name"
							name='name'
							message='Name is required.'
							placeholder="Your Name"
							required={true}
						/>
						<div className="grid grid-cols-2 gap-2">
							<InputPlain
								type="text"
								label="Email"
								name='email'
								message='Email is required.'
								placeholder="Email *"
								required={true}
							/>
							<InputPlain
								type="text"
								label="Phone"
								name='phone'
								message='Phone is required.'
								placeholder="Phone"
								required={true}
							/>
						</div>


						<InputPlain
							type="text"
							label="Subject"
							name='subject'
							message='Subject is required.'
							placeholder="Subject"
							required={true}
						/>

						<InputTextArea
							label="Message"
							name="message"
							maxRows={4}
							message='Message required.'
							placeholder="Your Message"
							required={true}
						/>

						<div className="mt-2">
							<ExpressButton
								htmlType={'submit'}
								type={'red'}
								label={'Submit'}
								className={'w-full'}
								block={true}
								loading={isPending}
								disabled={complete}
							/>
						</div>

					</Form>

				</div>
				<div className={'col-span-1 mt-3 lg:mt-0'}>
					{settings?.g_map_iframe_url && (
						<div className="embed-responsive embed-responsive-1by1">
							<iframe
								title="our_google_map_location"
								className="embed-responsive-item w-full h-[300px] lg:h-[680px]"
								src={settings.g_map_iframe_url}
							/>
						</div>
					)}
				</div>
			</div>
		</PageCardComponent>
	);
};


export default ContactComponent;