pager-widget 1.0.11-alpha.9 → 1.0.13

package/out/Form.js

@@ -0,0 +1,238 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Form = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const widgetConfigStore2_1 = require("./widgetConfigStore2");
+const uuid_1 = require("uuid");
+const InputField_1 = require("./InputField");
+const pikaicons_react_1 = require("./assets/icons/pikaicons-react");
+const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const Form = ({ conversationId }) => {
+    const widget = (0, widgetConfigStore2_1.useWidgetData)();
+    const widgetData = (0, widgetConfigStore2_1.widgetHasData)(widget) ? widget.data : null;
+    const [formValues, setFormValues] = (0, react_1.useState)({});
+    const [formErrors, setFormErrors] = (0, react_1.useState)({});
+    const [isSubmittedFormOpen, setIsSubmittedFormOpen] = (0, react_1.useState)(false);
+    const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
+    const isUuid = typeof widgetData?.source_id === 'string' &&
+        uuidRegex.test(widgetData.source_id);
+    console.log('widget status from form', widget);
+    (0, react_1.useEffect)(() => {
+        if (widget.status === 'FORM_INPUT_NEEDED' && isUuid) {
+            console.log('Trigger  here');
+            widgetConfigStore2_1.widgetFetchStore2.trigger.processMessage();
+        }
+        if (widget.status === 'FORM_INPUT_NEEDED' && widget.form_data) {
+            const localKey = `CONVERSATION::${widget.data.id}`;
+            try {
+                const existingRaw = localStorage.getItem(localKey);
+                const existingData = existingRaw
+                    ? JSON.parse(existingRaw)
+                    : {
+                        widget_id: widget.data.id,
+                        conversation_id: null,
+                        user_state: 'FORM_INPUT_NEEDED',
+                        events: [],
+                    };
+                // ✅ Check if already added to prevent duplicates
+                const alreadyExists = existingData.events.some((e) => e.type === 'FORM_INPUT_NEEDED' &&
+                    e.form_data?.form_id === widget.form_data.form_id);
+                if (!alreadyExists) {
+                    const newEvent = {
+                        type: 'FORM_INPUT_NEEDED',
+                        form_data: widget.form_data,
+                    };
+                    existingData.events.push(newEvent);
+                    localStorage.setItem(localKey, JSON.stringify(existingData));
+                    console.log('✅ FORM_INPUT_NEEDED appended successfully');
+                }
+                else {
+                    console.log('ℹ️ FORM_INPUT_NEEDED already present, skipping append.');
+                }
+            }
+            catch (error) {
+                console.error('❌ Failed to append FORM_INPUT_NEEDED event:', error);
+            }
+        }
+    }, [widget.status, widget?.form_data, widget.data.id]);
+    (0, react_1.useEffect)(() => {
+        switch (widget.status) {
+            case 'WIDGET_LOADING':
+                widgetConfigStore2_1.widgetFetchStore2.trigger.setFetchConfig(widget.config);
+                break;
+            case 'CONSENT_GIVEN':
+                widgetConfigStore2_1.widgetFetchStore2.trigger.shouldShowForm({
+                    browser_data: widget.browser_data ?? null,
+                });
+                break;
+            case 'WIDGET_LOADED':
+                widgetConfigStore2_1.widgetFetchStore2.trigger.shouldShowForm({ browser_data: null });
+                break;
+            case 'FORM_SUBMITTED':
+                widgetConfigStore2_1.widgetFetchStore2.trigger.processMessage();
+                break;
+        }
+    }, [widget.status]);
+    if (widget.status !== 'ALLOW_MESSAGE' &&
+        widget.status !== 'FORM_INPUT_NEEDED' &&
+        widget.status !== 'WIDGET_LOADED' &&
+        widget.status !== 'CONSENT_NEEDED' &&
+        widget.status !== 'CONSENT_GIVEN' &&
+        widget.status !== 'FORM_SUBMITTED') {
+        return null;
+    }
+    // const getFormTemplateFromLocalStorage = () => {
+    //     const raw = localStorage.getItem(`CONVERSATION_LIST::${widget.data.id}`);
+    //     if (!raw) {
+    //       console.warn('No data found in localStorage');
+    //       return null;
+    //     }
+    //     try {
+    //       const parsed: any = JSON.parse(raw);
+    //       console.log("parsed event", parsed);
+    //       const eventsArray = Array.isArray(parsed)
+    //         ? parsed.reduce<any[]>((acc, item) => {
+    //             if (item.events && Array.isArray(item.events)) acc.push(...item.events);
+    //             return acc;
+    //           }, [])
+    //         : parsed.events || [];
+    //       const formInputNeededEvent = eventsArray.find(
+    //         (e: any) => e.type === "FORM_INPUT_NEEDED"
+    //       );
+    //       console.log("form input needed event", formInputNeededEvent);
+    //       return formInputNeededEvent?.form_data || null;
+    //     } catch (error) {
+    //       console.error("Failed to parse localStorage data:", error);
+    //       return null;
+    //     }
+    //   };
+    const getFormTemplateFromLocalStorage = () => {
+        const raw = localStorage.getItem(`CONVERSATION::${widget.data.id}`);
+        if (!raw) {
+            console.warn('No data found in localStorage under key "DUMMY"');
+            return null;
+        }
+        try {
+            const parsed = JSON.parse(raw);
+            console.log('parsed event', parsed);
+            const formInputNeededEvent = parsed.events.find((e) => e.type === 'FORM_INPUT_NEEDED');
+            console.log('form input needed event', formInputNeededEvent);
+            return formInputNeededEvent?.form_data || null;
+        }
+        catch (error) {
+            console.error('Failed to parse localStorage DUMMY data:', error);
+            return null;
+        }
+    };
+    const formData = getFormTemplateFromLocalStorage();
+    const formTemplate = formData?.form_template ?? []; // ✅ Safely fallback to empty array
+    console.log('form template', formTemplate);
+    const submittedValueMap = (() => {
+        try {
+            const raw = localStorage.getItem(`CONVERSATION::${widget.data.id}`);
+            if (!raw)
+                return {};
+            const parsed = JSON.parse(raw);
+            const formSubmittedEvent = parsed.events.find((e) => e.type === 'FORM_SUBMITTED');
+            const submittedArray = formSubmittedEvent?.submissionPayload?.lead_data?.fields ?? [];
+            return submittedArray.reduce((acc, { field_id, value }) => {
+                acc[field_id] = value;
+                return acc;
+            }, {});
+        }
+        catch (error) {
+            console.error('Error parsing submitted data:', error);
+            return {};
+        }
+    })();
+    const isFormSubmitted = (() => {
+        try {
+            const raw = localStorage.getItem(`CONVERSATION::${widget.data.id}`);
+            if (!raw)
+                return false;
+            const parsed = JSON.parse(raw);
+            return parsed.events.some((e) => e.type === 'FORM_SUBMITTED');
+        }
+        catch (error) {
+            console.error('Error checking form submission:', error);
+            return false;
+        }
+    })();
+    const handleChange = (e) => {
+        const { name, value } = e.target;
+        setFormValues((prev) => ({ ...prev, [name]: value }));
+        setFormErrors((prev) => ({ ...prev, [name]: '' }));
+    };
+    const validateForm = () => {
+        const errors = {};
+        formTemplate.forEach((field) => {
+            const value = formValues[field.field_id]?.trim() || '';
+            if (field.is_mandatory && !value) {
+                errors[field.field_id] =
+                    `${field.dispaly_name || field.name} is required`;
+            }
+            if (field.field_type === 'email' &&
+                value &&
+                !emailRegex.test(value)) {
+                errors[field.field_id] = 'Please enter a valid email address';
+            }
+        });
+        setFormErrors(errors);
+        return Object.keys(errors).length === 0;
+    };
+    const handleFormSubmission = (e) => {
+        e.preventDefault();
+        if (!validateForm())
+            return;
+        const fieldsArray = Object.entries(formValues).map(([field_id, value]) => ({ field_id, value }));
+        const submissionPayload = {
+            form_id: formData?.form_id ?? '',
+            conversation_id: conversationId ?? (0, uuid_1.v4)(),
+            lead_data: {
+                name: formData?.name ?? '',
+                fields: fieldsArray,
+                ws: formData?.ws ?? '',
+                user_consent: widget.data.user_consent,
+            },
+            type: 'lead',
+        };
+        widgetConfigStore2_1.widgetFetchStore2.trigger.processFormSubmission({ submissionPayload });
+        const localKey = `form::${widget?.data?.id}::${conversationId}`;
+        let existingData = {};
+        try {
+            const stored = localStorage.getItem(localKey);
+            existingData = stored ? JSON.parse(stored) : {};
+        }
+        catch (err) {
+            console.error(`Failed to parse localStorage for ${localKey}`, err);
+        }
+        existingData[formData?.form_id] = fieldsArray;
+        try {
+            localStorage.setItem(localKey, JSON.stringify(existingData));
+            localStorage.setItem('current_conversation', conversationId);
+        }
+        catch (err) {
+            console.error(`Failed to save form data to ${localKey}`, err);
+        }
+    };
+    const shouldShowForm = (widget.status === 'FORM_INPUT_NEEDED' && !isUuid) ||
+        widget.status === 'WIDGET_LOADED' ||
+        (widget.status === 'ALLOW_MESSAGE' &&
+            conversationId === localStorage.getItem('current_conversation'));
+    if (!shouldShowForm)
+        return null;
+    console.log('should show form ', shouldShowForm, formTemplate, conversationId);
+    return ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-start gap-1.5 w-full px-5 animate-slide-in-left", children: (0, jsx_runtime_1.jsx)("div", { className: "flex items-start w-full", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-1.5 items-start w-full rounded-lg overflow-hidden", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2", children: (0, jsx_runtime_1.jsx)("div", { className: "flex items-start gap-[5px]", children: (0, jsx_runtime_1.jsx)("div", { className: "flex w-[24px] h-[24px] items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)("img", { src: widget?.data?.logo_url, className: "w-6 h-6 text-white" }) }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-2 w-[90%]", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex gap-2 items-baseline pt-0.5", children: (0, jsx_runtime_1.jsx)("div", { className: "font-inter text-sm font-medium text-[#020618]", children: widget?.data?.name }) }), (0, jsx_runtime_1.jsx)("div", { className: "relative mt-[-1.00px] text-sm text-[#020618] w-full", children: isFormSubmitted ? ((0, jsx_runtime_1.jsxs)("div", { className: "py-2.5 px-3.5 flex w-full flex-col items-start gap-4 rounded-lg border border-zinc-200", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 rounded-sm w-full justify-between", children: [(0, jsx_runtime_1.jsxs)("span", { className: "flex gap-1 items-center text-slate-950 text-sm font-regular leading-5", children: ["Form submitted", ' ', (0, jsx_runtime_1.jsx)(pikaicons_react_1.PiCheckTickCircleSolid, { className: "h-[18px] w-[18px] text-green-500" })] }), (0, jsx_runtime_1.jsx)("span", { onClick: () => setIsSubmittedFormOpen(!isSubmittedFormOpen), className: "cursor-pointer text-slate-500 hover:text-slate-700 transition-colors hover:bg-slate-100 rounded-full", children: !isSubmittedFormOpen ? ((0, jsx_runtime_1.jsx)(pikaicons_react_1.PiChevronDownStroke, {})) : ((0, jsx_runtime_1.jsx)(pikaicons_react_1.PiChevronUpStroke, {})) })] }), isSubmittedFormOpen && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-start gap-4", children: formTemplate.map((input, index) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-1.5", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-slate-700 text-sm font-medium leading-5", children: input.dispaly_name ||
+                                                            input.name }), (0, jsx_runtime_1.jsx)("span", { className: "text-slate-950 text-sm font-regular leading-5", children: formValues[input.field_id] ??
+                                                            submittedValueMap[input
+                                                                .field_id] ??
+                                                            '' })] }, index))) }))] })) : ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col bg-white w-full gap-2.5 px-3.5 py-2.5 rounded-lg border border-zinc-200", children: (0, jsx_runtime_1.jsxs)("form", { onSubmit: handleFormSubmission, className: "space-y-4 w-full", children: [formTemplate.map((input) => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(InputField_1.InputField, { input: input, handleChange: handleChange, value: formValues[input.field_id] ??
+                                                        submittedValueMap[input.field_id] ??
+                                                        '', error: formErrors[input.field_id], disabled: isFormSubmitted }, input.field_id) }))), (0, jsx_runtime_1.jsx)("button", { type: "submit", className: `${!isFormSubmitted
+                                                    ? 'hover:bg-[#4b2fff]/90'
+                                                    : 'opacity-50'} w-full text-sm bg-[#4b2fff] text-white cursor-pointer font-medium py-2 px-4 rounded-lg transition-colors`, disabled: isFormSubmitted, children: isFormSubmitted
+                                                    ? 'Submitted'
+                                                    : 'Submit' })] }) })) })] })] }) }) }));
+};
+exports.Form = Form;

package/out/HomePage.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HomePage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const HomePageContent_1 = require("./HomePageContent");
+const HomePageFooter_1 = require("./HomePageFooter");
+const HomePageHeader_1 = require("./HomePageHeader");
+const HomePage = ({ toggleWidget, switchTab, isExpanded, }) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(HomePageHeader_1.HomePageHeader, { toggleWidget: toggleWidget }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-1 flex-col justify-between", children: [(0, jsx_runtime_1.jsx)(HomePageContent_1.HomePageContent, {}), (0, jsx_runtime_1.jsx)(HomePageFooter_1.HomePageFooter, { switchTab: switchTab, isExpanded: isExpanded })] })] }));
+};
+exports.HomePage = HomePage;

package/out/HomePageContent.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HomePageContent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const widgetConfigStore2_1 = require("./widgetConfigStore2");
+const RecentMessageTab_1 = require("./RecentMessageTab");
+const BotMain_1 = require("./BotMain");
+const widgetStore_1 = require("./widgetStore");
+// import { NewRecentMessageTab } from './NewRecentMessageTab'
+// import { setWidgetLocalState } from './widgetStateHandler'
+const HomePageContent = () => {
+    const widget = (0, widgetConfigStore2_1.useWidgetData)();
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: "p-5 ", children: [(0, jsx_runtime_1.jsx)(RecentMessageTab_1.RecentMessageTab, {}), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-2 mt-2", children: (0, jsx_runtime_1.jsxs)("button", { className: `flex w-full items-center justify-between rounded-xl pl-5 pr-4 py-[13px] text-sm font-medium text-slate-950 cursor-pointer`, onClick: () => {
+                            localStorage.setItem('Tab', 'Chat');
+                            widgetStore_1.widgetStore.trigger.selectTab({ tab: BotMain_1.TabType.CHAT });
+                            widgetStore_1.widgetStore.send({
+                                type: 'handleExitChatState',
+                                value: false,
+                            });
+                        }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), style: {
+                            border: `1px solid ${isHovered
+                                ? widget?.data?.brand_color
+                                : '#e4e4e7'}`,
+                        }, children: [(0, jsx_runtime_1.jsx)("span", { className: "self-stretch mt-[-1.00px] text-sm text-[#020618]", children: widget?.data?.send_message_description }), (0, jsx_runtime_1.jsx)("svg", { style: {
+                                    color: isHovered
+                                        ? widget?.data?.brand_color
+                                        : '#b8b8b8',
+                                }, width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "M9 18l6-6-6-6" }) })] }) })] }) }));
+};
+exports.HomePageContent = HomePageContent;

package/out/HomePageFooter.js

@@ -0,0 +1,87 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HomePageFooter = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const pikaicons_react_1 = require("./assets/icons/pikaicons-react");
+const BotMain_1 = require("./BotMain");
+const widgetStore_1 = require("./widgetStore");
+const widgetConfigStore2_1 = require("./widgetConfigStore2");
+const CustomTooltip_1 = require("./components/CustomTooltip");
+const HomePageFooter = ({ switchTab, isExpanded, }) => {
+    const widget = (0, widgetConfigStore2_1.useWidgetData)();
+    const [isHomeHovered, setIsHomeHovered] = react_1.default.useState(false);
+    const [isRecentHovered, setIsRecentHovered] = react_1.default.useState(false);
+    // if (
+    //     !(
+    //         status !== 'NOT_STARTED' &&
+    //         status !== 'WIDGET_LOADING' &&
+    //         status !== 'INVALID_STATE' &&
+    //         status !== 'ALLOW_MESSAGE'
+    //     )
+    // ) {
+    //     return null
+    // }
+    function hexToRGB(hex) {
+        hex = hex.replace(/^#/, '');
+        if (hex.length === 3) {
+            hex = hex
+                .split('')
+                .map((c) => c + c)
+                .join('');
+        }
+        const bigint = parseInt(hex, 16);
+        const r = (bigint >> 16) & 255;
+        const g = (bigint >> 8) & 255;
+        const b = bigint & 255;
+        return `rgb(${r}, ${g}, ${b}, 0.1)`;
+    }
+    const handleHomeButtonClick = () => {
+        if (isExpanded !== widgetStore_1.WidgetExpandType.DEFAULT) {
+            widgetStore_1.widgetStore.trigger.expandWidget({
+                expanded_size: widgetStore_1.WidgetExpandType.DEFAULT,
+            });
+            setTimeout(() => {
+                widgetStore_1.widgetStore.trigger.selectTab({ tab: BotMain_1.TabType.HOME });
+            }, 300);
+        }
+        else {
+            widgetStore_1.widgetStore.trigger.selectTab({ tab: BotMain_1.TabType.HOME });
+        }
+    };
+    const widgetData = (0, widgetConfigStore2_1.widgetHasData)(widget) ? widget.data : null;
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-10 border-t border-zinc-200 bg-white px-8 py-3 z-50", children: [(0, jsx_runtime_1.jsx)(CustomTooltip_1.CustomTooltip, { content: "Home", children: (0, jsx_runtime_1.jsx)("button", { className: "rounded-lg cursor-pointer p-1.5", onMouseEnter: () => setIsHomeHovered(true), onMouseLeave: () => setIsHomeHovered(false), onClick: () => handleHomeButtonClick(), style: {
+                            background: switchTab == 'home'
+                                ? widgetData?.brand_color
+                                    ? hexToRGB(widgetData?.brand_color)
+                                    : '#EBEFFF'
+                                : '',
+                            color: switchTab == 'home' || isHomeHovered
+                                ? widgetData?.brand_color
+                                    ? widgetData?.brand_color
+                                    : '#45556c'
+                                : '#62748e',
+                        }, children: switchTab == 'home' ? ((0, jsx_runtime_1.jsx)(pikaicons_react_1.PiHomeAltSolid, { style: {
+                                color: widgetData?.brand_color ?? '#564CFF',
+                            } })) : ((0, jsx_runtime_1.jsx)(pikaicons_react_1.PiHomeAltStroke, {})) }) }), (0, jsx_runtime_1.jsx)(CustomTooltip_1.CustomTooltip, { content: "Recent chats", children: (0, jsx_runtime_1.jsx)("button", { className: "rounded-lg cursor-pointer p-1.5", onMouseEnter: () => setIsRecentHovered(true), onMouseLeave: () => setIsRecentHovered(false), onClick: () => widgetStore_1.widgetStore.trigger.selectTab({
+                            tab: BotMain_1.TabType.RECENT_MESSAGE_LIST,
+                        }), style: {
+                            background: switchTab == 'recentMessageList'
+                                ? widgetData?.brand_color
+                                    ? hexToRGB(widgetData?.brand_color)
+                                    : '#EBEFFF'
+                                : '',
+                            color: switchTab == 'recentMessageList' ||
+                                isRecentHovered
+                                ? widgetData?.brand_color
+                                    ? widgetData?.brand_color
+                                    : '#45556c'
+                                : '#62748e',
+                        }, children: switchTab == 'recentMessageList' ? ((0, jsx_runtime_1.jsx)(pikaicons_react_1.PiChatDefaultSolid, { style: {
+                                color: widgetData?.brand_color ?? '#564CFF',
+                            } })) : ((0, jsx_runtime_1.jsx)(pikaicons_react_1.PiChatDefaultStroke, {})) }) })] }) }));
+};
+exports.HomePageFooter = HomePageFooter;

package/out/HomePageHeader.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HomePageHeader = exports.isDarkColor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const widgetConfigStore2_1 = require("./widgetConfigStore2");
+/**
+ * Determines if a color is "dark" or "light" based on its perceived brightness.
+ * @param color The color string in hex (e.g., #RRGGBB, #RGB) or RGB (e.g., rgb(r, g, b)) format.
+ * @returns 'dark' or 'light'. Returns 'light' for null or unsupported formats.
+ */
+// TODO : Needs to be Verified
+const isDarkColor = (color) => {
+    let r;
+    let g;
+    let b;
+    if (color?.startsWith('#')) {
+        let hex = color.slice(1);
+        if (hex.length === 3) {
+            hex = hex
+                .split('')
+                .map((c) => c + c)
+                .join('');
+        }
+        if (hex.length === 6) {
+            const bigint = parseInt(hex, 16);
+            r = (bigint >> 16) & 255;
+            g = (bigint >> 8) & 255;
+            b = bigint & 255;
+        }
+    }
+    else if (color?.startsWith('rgb')) {
+        const rgbValues = color.match(/\d+/g);
+        if (rgbValues && rgbValues.length >= 3) {
+            ;
+            [r, g, b] = rgbValues.map(Number);
+        }
+    }
+    if (r === undefined || g === undefined || b === undefined) {
+        return 'light';
+    }
+    // --- Improved brightness formula (HSP model) ---
+    const brightness = Math.sqrt(0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b));
+    // --- Increased threshold for detecting “light” colors ---
+    return brightness < 170 ? 'dark' : 'light';
+};
+exports.isDarkColor = isDarkColor;
+const HomePageHeader = ({ toggleWidget, }) => {
+    const widget = (0, widgetConfigStore2_1.useWidgetData)();
+    const { status } = widget;
+    if (!(status !== 'NOT_STARTED' &&
+        status !== 'WIDGET_LOADING' &&
+        status !== 'INVALID_STATE')) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `relative h-[40%] w-full rounded-[22px] ${widget?.data?.welcome_text_color && (0, exports.isDarkColor)(widget?.data?.welcome_text_color) == 'light' ? 'bg-widget-home-light-top' : 'bg-widget-home-dark-top'}`, children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute top-0 left-0 w-full h-full rounded-[22px]", style: { backgroundColor: widget.data?.home_background_color }, children: (0, jsx_runtime_1.jsx)("div", { className: "absolute top-0 left-0 w-full h-full z-[0] rounded-[22px] opacity-90", style: {
+                        backgroundImage: `url(${widget.data?.home_cover_image})`,
+                        backgroundSize: 'cover',
+                        backgroundPosition: 'center',
+                        backgroundRepeat: 'no-repeat',
+                    }, children: (0, jsx_runtime_1.jsx)("button", { className: "absolute top-6 right-6 hover:bg-white/10 rounded-lg p-1.5 cursor-pointer flex items-start h-max", style: { mixBlendMode: 'difference' }, onClick: toggleWidget, children: (0, jsx_runtime_1.jsx)("svg", { style: {
+                                mixBlendMode: 'difference',
+                            }, width: "20", height: "20", viewBox: "0 0 24 24", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "M18 6L6 18M6 6l12 12" }) }) }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex justify-start p-6 z-10 absolute w-2/3", children: (0, jsx_runtime_1.jsx)("img", { className: "h-[32] w-auto cursor-pointer", src: widget?.data?.home_header_logo }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col absolute bottom-[1.2rem] left-[1.5rem]", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-2xl font-semibold leading-8 ", style: { color: widget?.data?.welcome_text_color }, children: widget?.data?.home_header_title }), (0, jsx_runtime_1.jsx)("span", { className: "text-base font-medium leading-6", style: {
+                            color: widget?.data?.welcome_text_color,
+                        }, children: widget?.data?.home_header_description })] })] }));
+};
+exports.HomePageHeader = HomePageHeader;

package/out/InputField.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const country_codes_flags_phone_codes_1 = require("country-codes-flags-phone-codes");
+const CountryDropdown_1 = require("./CountryDropdown");
+const InputField = ({ input, handleChange, value, error, disabled, }) => {
+    // const [selectedCountry, setSelectedCountry] = useState(value||"");
+    if (input.field_type === 'short_text' || input.field_type === 'email') {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "w-full", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: input.name, className: "block text-sm font-medium text-gray-700 mb-1", children: input.dispaly_name ? input.dispaly_name : input.name }), (0, jsx_runtime_1.jsx)("input", { type: input.field_type === 'short_text' ||
+                        input.field_type === 'email'
+                        ? 'text'
+                        : input.field_type, id: input._id, name: input.field_id, value: value, onChange: handleChange, formNoValidate: true, placeholder: input.placeholder, disabled: disabled, className: `w-full px-4 py-2 h-9 text-sm rounded-lg border ${disabled ? 'text-slate-400 border-zinc-200 bg-zinc-50' : 'bg-white'} ${error
+                        ? 'border-red-500 focus:ring-red-500'
+                        : 'border-gray-300 focus:ring-blue-500'} focus:outline-none focus:ring-2 focus:border-transparent` }), error && (0, jsx_runtime_1.jsx)("p", { className: "text-red-500 text-xs mt-1", children: error })] }));
+    }
+    else if (input.field_type === 'country') {
+        return ((0, jsx_runtime_1.jsx)(CountryDropdown_1.CountryDropdown, { disabled: disabled, countries: country_codes_flags_phone_codes_1.countries, value: value, onChange: (selectedValue) => {
+                const syntheticEvent = {
+                    target: {
+                        name: input.field_id,
+                        value: selectedValue,
+                    },
+                };
+                handleChange(syntheticEvent);
+            } })
+        // <CountryDropdown countries={countries}
+        //  value={selectedCountry}
+        // />
+        // <div className="w-full">
+        //     <label
+        //         htmlFor={input.field_id}
+        //         className="block text-sm font-medium text-gray-700 mb-1"
+        //     >
+        //         {input.display_name || 'Country'}
+        //     </label>
+        //     <select
+        //         id={input._id}
+        //         name={input.field_id}
+        //         value={value}
+        //         onChange={(e) =>
+        //             handleChange(
+        //                 e as unknown as React.ChangeEvent<HTMLInputElement>
+        //             )
+        //         }
+        //         className={`w-full px-2 py-2 h-9 text-sm rounded-lg border ${
+        //             error
+        //                 ? 'border-red-500 focus:ring-red-500'
+        //                 : 'border-gray-300 focus:ring-blue-500'
+        //         } focus:outline-none focus:ring-2 focus:border-transparent bg-white`}
+        //     >
+        //         <option
+        //             value=""
+        //             disabled
+        //             className="bg-[red] mt-10 text-[#fff]"
+        //         >
+        //             {input.placeholder || 'Select a country'}
+        //         </option>
+        //         {countries.map((c) => (
+        //             <option key={c.code} value={c.name}>
+        //                 {c.name}
+        //             </option>
+        //         ))}
+        //     </select>
+        //     {error && <p className="text-red-500 text-xs mt-1">{error}</p>}
+        // </div>
+        );
+    }
+    else if (input.field_type === 'long_text') {
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: input.name, className: "block text-sm font-medium text-gray-700 mb-1", children: input.dispaly_name ? input.dispaly_name : input.name }), (0, jsx_runtime_1.jsx)("textarea", { name: input.field_id, value: value, className: `w-full px-4 py-2 h-32 text-sm rounded-lg border ${disabled ? 'text-slate-400 border-zinc-200 bg-zinc-50' : 'bg-white'} ${error
+                        ? 'border-red-500 focus:ring-red-500'
+                        : 'border-gray-300 focus:ring-blue-500'} focus:outline-none focus:ring-2 focus:border-transparent`, onChange: handleChange }), error && (0, jsx_runtime_1.jsx)("p", { className: "text-red-500 text-xs mt-1", children: error })] }));
+    }
+    else if (input.field_type === 'phone_number') {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "w-full", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: input.name, className: "block text-sm font-medium text-gray-700 mb-1", children: input.dispaly_name ? input.dispaly_name : input.name }), (0, jsx_runtime_1.jsx)("input", { id: input._id, name: input.field_id, value: value, onChange: handleChange, formNoValidate: true, placeholder: input.placeholder, disabled: disabled, maxLength: 15, className: `w-full px-4 py-2 h-9 text-sm rounded-lg border ${disabled ? 'text-slate-400 border-zinc-200 bg-zinc-50' : 'bg-white'} ${error
+                        ? 'border-red-500 focus:ring-red-500'
+                        : 'border-gray-300 focus:ring-blue-500'} focus:outline-none focus:ring-2 focus:border-transparent` }), error && (0, jsx_runtime_1.jsx)("p", { className: "text-red-500 text-xs mt-1", children: error })] }));
+    }
+};
+exports.InputField = InputField;