fbehjfej

import React, { Fragment, useEffect, useState } from 'react';
import { FormattedMessage, useIntl } from 'react-intl';
import { shape, string } from 'prop-types';
import { Form } from 'informed';

import { useToasts } from '@magento/peregrine';
import { useContactPage } from '@magento/peregrine/lib/talons/ContactPage';

import { useStyle } from '@magento/venia-ui/lib/classify';
import { isRequired } from '@magento/venia-ui/lib/util/formValidators';


import CmsBlock from '@magento/venia-ui/lib/components/CmsBlock/block';
import { Meta, StoreTitle } from '@magento/venia-ui/lib/components/Head';
import FormError from '@magento/venia-ui/lib/components/FormError';
import Field from '../Field';
import TextInput from '../TextInput';
import TextArea from '@magento/venia-ui/lib/components/TextArea';
import LoadingIndicator from '../LoadingIndicator';
import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
import ContactPageShimmer from './contactPage.shimmer';
import defaultClasses from '@magento/venia-ui/lib/components/ContactPage/contactPage.module.css';
import phone from './images/phone.svg';
import location from './images/location.svg';
import facebook from './images/facebook.svg';
import instagram from './images/instagram.svg';
import whatsapp from './images/whatsapp.png';
import email from './images/email.png';
import twitter from './images/twitter.svg';
import youtube from './images/youtube.svg';
import Button from '../Button';
import apiClient from '../../api';

import {Link } from "react-router-dom";


const BANNER_IDENTIFIER = 'contact-us-banner';
const SIDEBAR_IDENTIFIER = 'contact-us-sidebar';
const NOT_FOUND_MESSAGE =
    "Looks like the page you were hoping to find doesn't exist. Sorry about that.";

const ContactPage = props => {
    const { classes: propClasses } = props;
    const classes = useStyle(defaultClasses, propClasses);
    const { formatMessage } = useIntl();
    const talonProps = useContactPage({
        cmsBlockIdentifiers: [BANNER_IDENTIFIER, SIDEBAR_IDENTIFIER]
    });
    const [, { addToast }] = useToasts();
    const {
        isEnabled,
        cmsBlocks,
        errors,
        handleSubmit,
        isBusy,
        isLoading,
        setFormApi,
        response
    } = talonProps;

    const [contactInfo, setContactInfo] = useState()

    const [userName, setUserName] = useState('');

    const [mobileNumber, setPhoneNumber] = useState('');

    const [email, setEmail] = useState('');

    const [message, setMessage] = useState('');


    const getContactDetails = async () => {
        try {
            const response = await apiClient.get(apiClient.Urls.getSlider, {
                identifier: 'contact_info'
            });
            if (response.success) {
                setContactInfo(response.data);
            }
        } catch (error) {
            console.log('error', error);
        }
    };



    const submitContactUsForm = async () => {

        try {

            const response = await apiClient.post(

                apiClient.Urls.contactUsForm,

                {

                    params: {

                        name:userName,

                        mobile_number:mobileNumber,

                        email:email,

                        message:message

                    }

                },

            );

           if (response.data && response.data.success == true) {

                console.log(response.message);

             }

        } catch (error) {

            console.log('error', error);

        }

    };

    useEffect(() => {
        getContactDetails()
    }, [])

    const phoneNumber = contactInfo && contactInfo.find(i => i.slide_title === "phone_number");

    const whatsappNumber = contactInfo && contactInfo.find(i => i.slide_title === "whatsapp_number");

    const mailId = contactInfo && contactInfo.find(i => i.slide_title === "email_id");

    const addressInfo = contactInfo && contactInfo.find(i => i.slide_title === "address_info");

    useEffect(() => {
        if (response && response.status) {
            addToast({
                type: 'success',
                message: formatMessage({
                    id: 'contactPage.submitMessage',
                    defaultMessage: 'Your message has been sent.'
                }),
                timeout: 5000
            });
        }
    }, [addToast, formatMessage, response]);

    if (!isLoading && !isEnabled) {
        return (
            <Fragment>
                <StoreTitle>
                    {formatMessage({
                        id: 'contactPage.title',
                        defaultMessage: 'Contact Us'
                    })}
                </StoreTitle>
                <ErrorView
                    message={formatMessage({
                        id: 'magentoRoute.routeError',
                        defaultMessage: NOT_FOUND_MESSAGE
                    })}
                />
            </Fragment>
        );
    }

    if (isLoading) {
        return <ContactPageShimmer />;
    }

    const maybeLoadingIndicator = isBusy ? (
        <div className={classes.loadingContainer}>
            <LoadingIndicator>
                <FormattedMessage
                    id={'contactPage.loadingText'}
                    defaultMessage={'Sending'}
                />
            </LoadingIndicator>
        </div>
    ) : null;

    const contactUsBannerContent = cmsBlocks.find(
        item => item.identifier === BANNER_IDENTIFIER
    )?.content;

    const contactUsBanner = contactUsBannerContent ? (
        <div className={classes.banner}>
            <CmsBlock content={contactUsBannerContent} />
        </div>
    ) : null;

    const contactUsSidebarContent = cmsBlocks.find(
        item => item.identifier === SIDEBAR_IDENTIFIER
    )?.content;

    const contactUsSidebar = contactUsSidebarContent ? (
        <div className={classes.sideContent}>
            <CmsBlock content={contactUsSidebarContent} />
        </div>
    ) : null;

    const pageTitle = formatMessage({
        id: 'contactPage.title',
        defaultMessage: 'Contact Us'
    });

    const metaDescription = formatMessage({
        id: 'contactPage.metaDescription',
        defaultMessage: 'Contact Us'
    });

    return (
        <Fragment>
            <StoreTitle>{pageTitle}</StoreTitle>
            <Meta name="title" content={pageTitle} />
            <Meta name="description" content={metaDescription} />
            <article className={classes.root} data-cy="ContactPage-root">
                {contactUsBanner}
                <div className={classes.content + ' contact-content'}>
                    <div className='bg-[#FCFAFB] contact-main rounded-lg'>
                        <div className='contact-container'>
                            <h3 className='ivymode-regular text-[42px]
                        text-[#774E4F] contact-section'>Contact Details</h3>
                            <p className='text-[#3B444D] text-[14px] font-lato regular'>Find our contact number and other details</p>
                        </div>
                        <section className='contact_details_section px-[20px]'>
                            <a target={'_blank'} href="tel:18001212511" className='flex phone-section items-center'>
                                <img src={phone} alt='phone' className='phone_section' />
                                <p className='text-[#181A1D]'>{phoneNumber?.mapping_value}</p>
                            </a>
                            <a target={"_blank"} href="https://wa.me/+916379337011" className='flex phone-section items-center'>
                                <img src={whatsapp} alt='phone' className='phone_section' style={{ width: 50, height: 50 }} />
                                <p className='text-[#181A1D]'>{whatsappNumber?.mapping_value}</p>
                            </a>
                            <a target={'_blank'} href="mailto:[email protected]" className='flex items-center'>
                                <img src={email} alt='phone' className='phone_section' style={{ width: 50, height: 50 }} />
                                <p className='text-[#181A1D]'>{mailId?.mapping_value}</p>
                            </a>
                            <div className='flex items-center'>
                                <img src={location} alt='location' className='phone_section' />
                                <div className='text-[#181A1D]'>
                                    <p>{addressInfo?.mapping_value}</p>
                                    {/* <p>KIRTILAL KALIDAS JEWELLERS PVT. LTD.</p>
                                    <p>GN Mills Post, Mettupalayam Road, Coimbatore</p>
                                    <p>Tamilnadu-641029</p> */}
                                </div>
                            </div>
                        </section>
                        <section className='social_linking pb-[20px]'>
                            <p className='text-[#293036] text-center mt-[3rem] mb-4 text-[14px] font-lato regular get-social'>Let’s get social</p>
                            <div className='flex justify-evenly cursor-pointer'>
                                <a target={"_blank"} href="https://www.facebook.com/Glowjewelsonline/"><img src={facebook} alt='facebook' /></a>
                                <a target={"_blank"} href="https://www.instagram.com/Glowjewelsonline/"><img src={instagram} alt='instagram' /></a>
                                <a target={"_blank"} href="https://twitter.com/Glowjewelonline/"><img src={twitter} alt='twitter' /></a>
                                <a target={"_blank"} href="https://www.youtube.com/@glowjewelsonline"><img src={youtube} alt='youtube' /></a>
                            </div>
                        </section>
                    </div>
                    <div
                        className={classes.formContainer + ' contactpage-form'}
                        data-cy="ContactPage-formContainer"
                    >
                        {maybeLoadingIndicator}
                        <h1 className={classes.title + ' ivymode-regular text-[42px] text-[#774E4F] send-us-section'}>
                            {/* <FormattedMessage
                                id={'contactPage.titleText'}
                                defaultMessage={'Contact Us'}
                            /> */}
                            Send Us A Message
                        </h1>

                        <p className={classes.subtitle + ' text-[#3B444D] font-lato regular text-[14px] text-center'}>
                            {/* <FormattedMessage
                                id={'contactPage.infoText'}
                                defaultMessage={`Drop us a line and we'll get back to you as soon as possible.`}
                            /> */}
                            Please enter the details to hear back from us!
                        </p>
                        <FormError
                            allowErrorMessages
                            errors={Array.from(errors.values())}
                        />
                        <Form
                            getApi={setFormApi}
                            className={classes.form}
                            onSubmit={handleSubmit}
                        >
                            <div className='send-message-field'>
                                <section className='send-message'>
                                    {/* <Field
                                id="contact-name"
                                className='contact-form-field'
                                label={formatMessage({
                                    id: 'global.name',
                                    defaultMessage: 'Name'
                                })}
                            > */}
                                    <TextInput
                                        autoComplete="name"
                                        field="name"
                                        id="contact-name"
                                        validate={isRequired}
                                        data-cy="name"
                                        placeholder='Name'
                                        className='name-field'
                                        onValueChange={(value)=>setUserName(value)}
                                    />
                                </section>
                                {/* </Field> */}
                                {/* <Field
                                id="contact-email"
                                label={formatMessage({
                                    id: 'global.email',
                                    defaultMessage: 'Email'
                                })}
                            > */}
                                <section className='send-message'>
                                    <TextInput
                                        autoComplete="email"
                                        field="email"
                                        id="contact-email"
                                        validate={isRequired}
                                        // placeholder={formatMessage({
                                        //     id: 'global.emailPlaceholder',
                                        //     defaultMessage: '[email protected]'
                                        // })}
                                        data-cy="email"
                                        placeholder='Email'
                                        onValueChange={(value)=>setEmail(value)}
                                    />
                                </section>
                            </div>
                            {/* </Field> */}
                            {/* <Field
                                id="contact-telephone"
                                label={formatMessage({
                                    id: 'contactPage.telephone',
                                    defaultMessage: 'Phone Number'
                                })}
                                optional={true}
                            > */}
                            <TextInput
                                autoComplete="tel"
                                field="telephone"
                                id="contact-telephone"
                                validate={isRequired}
                                // placeholder={formatMessage({
                                //     id: 'contactPage.telephonePlaceholder',
                                //     defaultMessage: '(222)-222-2222'
                                // })}
                                data-cy="telephone"
                                placeholder='Phone number'
                                onValueChange={(value)=>setPhoneNumber(value)}
                            />
                            {/* </Field> */}
                            {/* <Field
                                id="contact-comment"
                                label={formatMessage({
                                    id: 'contactPage.comment',
                                    defaultMessage: 'Message'
                                })}
                            > */}
                            <TextArea
                                autoComplete="comment"
                                field="comment"
                                id="contact-comment"
                                validate={isRequired}
                                // placeholder={formatMessage({
                                //     id: 'contactPage.commentPlaceholder',
                                //     defaultMessage: `Tell us what's on your mind`
                                // })}
                                data-cy="comment"
                                placeholder='write a message'
                                onValueChange={(value)=>setMessage(value)}
                            />
                            {/* </Field> */}
                            <div className={classes.buttonsContainer + ' button_container'}>
							<Link to="/thank-you">
                                <Button
                                    priority="high"
                                    type="submit"
                                    disabled={isBusy}
                                    data-cy="submit"
                                    className='submit-button'
                                    onClick={()=>{

                                        submitContactUsForm()

                                    }}
                                >
                                    {/* <FormattedMessage
                                        id={'contactPage.submit'}
                                        defaultMessage={'Send'}
                                    /> */}
                                    submit
                                </Button>
								</Link>
                            </div>
                        </Form>
                    </div>
                    {contactUsSidebar}
                </div>
            </article>
        </Fragment>
    );
};

ContactPage.propTypes = {
    classes: shape({
        loadingContainer: string,
        banner: string,
        sideContent: string,
        root: string,
        content: string,
        formContainer: string,
        title: string,
        subtitle: string,
        form: string,
        buttonsContainer: string
    })
};

export default ContactPage;