rasp-feedback 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 MasterKlm
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,85 @@
+# Rasp
+
+Official Rasp SDK to implement user feedback collection forms easily into your website.
+
+## Installation
+```bash
+npm install rasp-feedback
+
+```
+
+## Usage
+
+### Next.js / React
+```tsx
+import { RaspProvider } from 'rasp-feedback/nextjs';
+
+export default function App() {
+  return (
+    <RaspProvider launcherPosition={{ top: '90%', left: '95%' }}>
+      <YourApp />
+    </RaspProvider>
+  );
+}
+```
+
+### Vue 3
+```vue
+<script setup>
+import { RaspProvider } from 'rasp-feedback/vue';
+</script>
+
+<template>
+  <RaspProvider>
+    <YourApp />
+  </RaspProvider>
+</template>
+```
+
+## Environment Setup
+
+Create a `.env` file:
+```
+# Next.js
+NEXT_PUBLIC_RASP_COMPANY_ID=your_company_id
+
+# Vue (Vite)
+VITE_RASP_COMPANY_ID=your_company_id
+```
+
+## Documentation
+
+Full documentation available at [https://tryrasp.online/docs](https://tryrasp.online/docs)
+
+## License
+
+MIT © Rabuuk (Pty) Ltd.
+```
+
+### Create `LICENSE`:
+```
+MIT License
+
+Copyright (c) 2025 Rabuuk (Pty) Ltd.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+```
+
+### Create `.npmignore`:
+```

package/dist/nextjs/components/RaspForm.d.ts

@@ -0,0 +1,7 @@
+import type { CSSProperties } from 'react';
+interface Props {
+    otherStyles?: CSSProperties;
+}
+export declare function RaspForm({ otherStyles }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=RaspForm.d.ts.map

package/dist/nextjs/components/RaspForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RaspForm.d.ts","sourceRoot":"","sources":["../../../src/nextjs/components/RaspForm.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAS3C,UAAU,KAAK;IACb,WAAW,CAAC,EAAE,aAAa,CAAC;CAC7B;AAED,wBAAgB,QAAQ,CAAC,EAAE,WAAW,EAAE,EAAE,KAAK,2CAwJ9C"}

package/dist/nextjs/components/RaspForm.js

@@ -0,0 +1,105 @@
+'use client'; // Important for Next.js App Router
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+{ /*@ts-ignore*/ }
+import { getFormByDomainOrCompany, getBrandTheme, getFormTheme } from '../functions/functionsexp';
+import StaticFormComponent from './StaticFormComponent';
+import Skeleton from './Skeleton';
+import { fontMap } from '../constants/fontexp';
+import { RASP_LOGO_BASE64 } from '../constants/baserasplogo';
+export function RaspForm({ otherStyles }) {
+    const [companyId, setCompanyId] = useState(null);
+    const [currentUrl, setCurrentUrl] = useState('');
+    const [form, setForm] = useState(null);
+    const [fields, setFields] = useState(null);
+    const [mainTheme, setMainTheme] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const getForm = async () => {
+        const f = await getFormByDomainOrCompany(companyId, currentUrl);
+        if (!f) {
+            setForm(f);
+            setIsLoading(false);
+            return;
+        }
+        setForm(f[0]);
+    };
+    useEffect(() => {
+        if (typeof window !== 'undefined') {
+            setCompanyId(process.env.NEXT_PUBLIC_RASP_COMPANY_ID);
+            setCurrentUrl(window.location.href);
+        }
+    }, []);
+    useEffect(() => {
+        if (companyId) {
+            if (form) {
+                setFields(form.fields);
+                if (form.usebrandtheme === true) {
+                    getBrandTheme(companyId).then((brandTheme) => {
+                        setMainTheme(brandTheme);
+                        setIsLoading(false);
+                    });
+                }
+                if (form.usebrandtheme === false) {
+                    getFormTheme(form.formId).then((formTheme) => {
+                        setMainTheme(formTheme);
+                        setIsLoading(false);
+                    });
+                }
+            }
+        }
+    }, [form]);
+    useEffect(() => {
+        if (currentUrl.trim()) {
+            if (companyId) {
+                getForm();
+            }
+        }
+    });
+    return (_jsxs("div", { children: [form && _jsx(_Fragment, { children: form.active && mainTheme && fields && _jsx("div", { id: "rasp-form-div", style: {
+                        padding: 0,
+                        margin: 0,
+                        border: 0,
+                        background: "transparent",
+                        width: "auto",
+                        height: "auto",
+                        display: "inline-block",
+                        transform: "translate(-50%, -25%)",
+                        overflow: "visible",
+                        ...otherStyles
+                    }, children: _jsx(StaticFormComponent, { form: form, mainTheme: mainTheme, fields: fields }) }) }), !isLoading && !form && _jsxs("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    borderRadius: '0.75rem',
+                    backgroundColor: 'white',
+                    margin: '1.25rem',
+                    width: '470px',
+                    minHeight: '400px',
+                    border: '1px solid black',
+                    padding: '1rem',
+                    boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)'
+                }, children: [_jsx("br", {}), _jsx("br", {}), _jsx("img", { src: RASP_LOGO_BASE64, width: "150px", height: "150px", alt: "rasp logo" }), _jsx("h1", { className: `${fontMap.poppins.className}`, children: "404" }), _jsx("h2", { className: `${fontMap.wixmadefor.className}`, style: { textAlign: 'center' }, children: !companyId ? "CompanyId is not provided. Please provide companyId in your env file." : "No forms found for this URL." }), !companyId && _jsxs("p", { className: `${fontMap.wixmadefor.className}`, style: { textAlign: 'center' }, children: [" Refer to Rasp docs for help: ", _jsx("a", { href: 'https://tryrasp.online/docs', style: { textDecoration: "underline" }, children: "https://tryrasp.online/docs" })] }), companyId && _jsxs("p", { className: `${fontMap.wixmadefor.className}`, style: { textAlign: 'center' }, children: [" Set this as your form domain url: ", currentUrl] })] }), isLoading &&
+                _jsx("div", { id: "rasp-form-div", style: {
+                        padding: 0,
+                        margin: 0,
+                        border: 0,
+                        background: "transparent",
+                        width: "auto",
+                        height: "auto",
+                        display: "inline-block",
+                        transform: "translate(-50%, -25%)",
+                        overflow: "visible",
+                    }, children: _jsx("div", { style: {
+                            display: 'flex',
+                            flexDirection: "column",
+                            justifyContent: 'center',
+                            borderRadius: '0.75rem',
+                            backgroundColor: "white",
+                            margin: '1.25rem',
+                            width: '470px',
+                            minHeight: '400px',
+                            border: '1px solid whitesmoke',
+                            padding: '2rem',
+                            paddingTop: "0px"
+                        }, children: _jsxs("div", { style: { marginTop: "-30px" }, children: [_jsx(Skeleton, { width: 400, height: 40 }), _jsx(Skeleton, { width: 400, height: 30 }), _jsx("br", {}), _jsx(Skeleton, { width: 400, height: 70 }), _jsx(Skeleton, { width: 400, height: 100 })] }) }) })] }));
+}

package/dist/nextjs/components/RaspProvider.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import "../index.css";
+export interface RaspProviderProps {
+    launcherPosition?: {
+        top?: string;
+        left?: string;
+    };
+    children: React.ReactNode;
+}
+export declare const RaspProvider: React.FC<RaspProviderProps>;
+//# sourceMappingURL=RaspProvider.d.ts.map

package/dist/nextjs/components/RaspProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RaspProvider.d.ts","sourceRoot":"","sources":["../../../src/nextjs/components/RaspProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAKlD,OAAO,cAAc,CAAA;AAMrB,MAAM,WAAW,iBAAiB;IAChC,gBAAgB,CAAC,EAAC;QAChB,GAAG,CAAC,EAAC,MAAM,CAAC;QACZ,IAAI,CAAC,EAAC,MAAM,CAAA;KACb,CAAA;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAGD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA2MpD,CAAA"}

package/dist/nextjs/components/RaspProvider.js

@@ -0,0 +1,150 @@
+'use client'; // Important for Next.js App Router
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+{ /*@ts-ignore*/ }
+import { getFormByDomainOrCompany, getBrandTheme, getFormTheme } from '../functions/functionsexp';
+import { MessageSquare } from 'lucide-react';
+import "../index.css";
+import StaticFormComponent from './StaticFormComponent';
+import Skeleton from './Skeleton';
+import { fontMap } from '../constants/fontexp';
+import { RASP_LOGO_BASE64 } from '../constants/baserasplogo';
+export const RaspProvider = ({ children, launcherPosition }) => {
+    const [companyId, setCompanyId] = useState(null);
+    const [currentUrl, setCurrentUrl] = useState('');
+    const [form, setForm] = useState(null);
+    const [fields, setFields] = useState(null);
+    const [mainTheme, setMainTheme] = useState(null);
+    const [showForm, setShowForm] = useState(false);
+    const [isLoading, setIsLoading] = useState(true);
+    const [showFormSkeleton, setShowFormSkeleton] = useState(false);
+    const getForm = async () => {
+        setIsLoading(true);
+        const f = await getFormByDomainOrCompany(companyId, currentUrl);
+        if (!f) {
+            setForm(f);
+            setIsLoading(false);
+            return;
+        }
+        setForm(f[0]);
+    };
+    useEffect(() => {
+        if (typeof window !== 'undefined') {
+            setCompanyId(process.env.NEXT_PUBLIC_RASP_COMPANY_ID);
+            setCurrentUrl(window.location.href);
+        }
+    }, []);
+    useEffect(() => {
+        if (companyId) {
+            if (form) {
+                setFields(form.fields);
+                if (form.usebrandtheme === true) {
+                    getBrandTheme(companyId).then((brandTheme) => {
+                        setMainTheme(brandTheme);
+                    });
+                }
+                if (form.usebrandtheme === false) {
+                    getFormTheme(form.formId).then((formTheme) => {
+                        setMainTheme(formTheme);
+                    });
+                }
+            }
+        }
+    }, [form]);
+    return (_jsxs("div", { children: [children, form && _jsx(_Fragment, { children: showForm && form.active && mainTheme && fields && _jsx("div", { id: "rasp-form-div", style: {
+                        position: "fixed",
+                        top: "15%",
+                        left: "60%",
+                        zIndex: 1000000000000000,
+                        padding: 0,
+                        margin: 0,
+                        border: 0,
+                        background: "transparent",
+                        width: "auto",
+                        height: "auto",
+                        display: "inline-block",
+                        transform: "translate(-50%, -25%)",
+                        overflow: "visible"
+                    }, children: _jsx(StaticFormComponent, { form: form, mainTheme: mainTheme, fields: fields }) }) }), !isLoading && !form && _jsxs("div", { style: {
+                    position: "fixed",
+                    top: "19%",
+                    left: "60%",
+                    zIndex: 1000000000000000,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    borderRadius: '0.75rem',
+                    backgroundColor: 'white',
+                    margin: '1.25rem',
+                    width: '470px',
+                    minHeight: '400px',
+                    border: '1px solid black',
+                    padding: '1rem',
+                    boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)'
+                }, children: [_jsx("br", {}), _jsx("br", {}), _jsx("img", { src: RASP_LOGO_BASE64, width: "150px", height: "150px", alt: "rasp logo" }), _jsx("h1", { className: `${fontMap.poppins.className}`, children: "404" }), _jsx("h2", { className: `${fontMap.wixmadefor.className}`, style: { textAlign: 'center' }, children: !companyId ? "CompanyId is not provided. Please provide companyId in your env file." : "No forms found for this URL." }), !companyId && _jsxs("p", { className: `${fontMap.wixmadefor.className}`, style: { textAlign: 'center' }, children: [" Refer to Rasp docs for help: ", _jsx("a", { href: 'https://tryrasp.online/docs', style: { textDecoration: "underline" }, children: "https://tryrasp.online/docs" })] }), companyId && _jsxs("p", { className: `${fontMap.wixmadefor.className}`, style: { textAlign: 'center' }, children: [" Set this as your form domain url: ", currentUrl] })] }), isLoading && showFormSkeleton && !form && !mainTheme &&
+                _jsx("div", { id: "rasp-form-div", style: {
+                        position: "fixed",
+                        top: "18%",
+                        left: "60%",
+                        zIndex: 1000000000000000,
+                        padding: 0,
+                        margin: 0,
+                        border: 0,
+                        background: "transparent",
+                        width: "auto",
+                        height: "auto",
+                        display: "inline-block",
+                        transform: "translate(-50%, -25%)",
+                        overflow: "visible"
+                    }, children: _jsx("div", { style: {
+                            display: 'flex',
+                            flexDirection: "column",
+                            justifyContent: 'center',
+                            borderRadius: '0.75rem',
+                            backgroundColor: "white",
+                            margin: '1.25rem',
+                            width: '470px',
+                            minHeight: '400px',
+                            border: '1px solid whitesmoke',
+                            padding: '2rem',
+                            paddingTop: "0px"
+                        }, children: _jsxs("div", { style: { marginTop: "-30px" }, children: [_jsx(Skeleton, { width: 400, height: 40 }), _jsx(Skeleton, { width: 400, height: 30 }), _jsx("br", {}), _jsx(Skeleton, { width: 400, height: 70 }), _jsx(Skeleton, { width: 400, height: 100 })] }) }) }), _jsx("div", { id: "rasp-launcher", onClick: () => {
+                    if (!currentUrl.trim() || !companyId)
+                        return;
+                    // If the form is visible, play exit animation then hide
+                    if (showForm) {
+                        const el = document.getElementById('rasp-form-div');
+                        if (el) {
+                            el.classList.add('rasp-exit');
+                            // match animation duration (250ms) + small buffer
+                            setTimeout(() => {
+                                setShowForm(false);
+                                el.classList.remove('rasp-exit');
+                            }, 300);
+                            return;
+                        }
+                        // fallback: just hide
+                        setShowForm(false);
+                        return;
+                    }
+                    setIsLoading(true);
+                    setShowFormSkeleton(true);
+                    // If the form is not visible, fetch then show it
+                    getForm().then(() => {
+                        setShowForm(true);
+                        setIsLoading(false);
+                        setShowFormSkeleton(false);
+                    });
+                }, style: {
+                    backgroundColor: "white",
+                    padding: 15,
+                    borderWidth: 1,
+                    borderColor: "black",
+                    borderRadius: "100%",
+                    position: "fixed",
+                    zIndex: 1000000000000000,
+                    cursor: "pointer",
+                    top: launcherPosition ? launcherPosition.top : "90%",
+                    left: launcherPosition ? launcherPosition.left : "95%"
+                }, children: _jsx(MessageSquare, { color: 'black', size: 20 }) })] }));
+};

package/dist/nextjs/components/Skeleton.d.ts

@@ -0,0 +1,7 @@
+import "../index.css";
+declare function Skeleton({ width, height }: {
+    width: number;
+    height: number;
+}): import("react/jsx-runtime").JSX.Element;
+export default Skeleton;
+//# sourceMappingURL=Skeleton.d.ts.map

package/dist/nextjs/components/Skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/nextjs/components/Skeleton.tsx"],"names":[],"mappings":"AACA,OAAO,cAAc,CAAA;AAErB,iBAAS,QAAQ,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,2CAcrE;AAED,eAAe,QAAQ,CAAC"}

package/dist/nextjs/components/Skeleton.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "../index.css";
+function Skeleton({ width, height }) {
+    return (_jsx("div", { style: {
+            width: width + 'px',
+            height: height + 'px',
+            borderRadius: '10px',
+            marginTop: '5px',
+            background: 'linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 37%, #f0f0f0 63%)',
+            backgroundSize: '400% 100%',
+            animation: 'skeleton-loading 1.4s ease infinite',
+        } }));
+}
+export default Skeleton;

package/dist/nextjs/components/StaticFormComponent.d.ts

@@ -0,0 +1,7 @@
+declare function StaticFormComponent({ form, mainTheme, fields }: {
+    form: any;
+    mainTheme: any;
+    fields: any[];
+}): import("react/jsx-runtime").JSX.Element;
+export default StaticFormComponent;
+//# sourceMappingURL=StaticFormComponent.d.ts.map

package/dist/nextjs/components/StaticFormComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StaticFormComponent.d.ts","sourceRoot":"","sources":["../../../src/nextjs/components/StaticFormComponent.tsx"],"names":[],"mappings":"AAMA,iBAAS,mBAAmB,CAAC,EAAC,IAAI,EAAE,SAAS,EAAE,MAAM,EAAC,EAAC;IAAG,IAAI,EAAE,GAAG,CAAC;IAClE,SAAS,EAAE,GAAG,CAAC;IACf,MAAM,EAAE,GAAG,EAAE,CAAC;CAAC,2CA0LhB;AAED,eAAe,mBAAmB,CAAA"}

package/dist/nextjs/components/StaticFormComponent.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { iconMap } from '../constants/iconexp';
+import { fontMap } from '../constants/fontexp';
+import { addFeedback } from '../functions/functionsexp';
+function StaticFormComponent({ form, mainTheme, fields }) {
+    const [responses, setResponses] = useState(() => form.fieldsResponseObj.map((field) => ({
+        ...field,
+        response: ""
+    })));
+    const [submitted, setSubmitted] = useState(false);
+    const formContainerId = 'form-container-' + Math.random().toString(36).substr(2, 9);
+    const successContainerId = 'success-container-' + Math.random().toString(36).substr(2, 9);
+    const updateResponse = (index, value) => {
+        setResponses((prev) => {
+            const updated = [...prev];
+            updated[index] = { ...updated[index], response: value };
+            return updated;
+        });
+    };
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        try {
+            await addFeedback(form.companyId, form.formId, responses);
+            // Clear fields
+            setResponses(form.fieldsResponseObj.map((field) => ({
+                ...field,
+                response: ""
+            })));
+            // Show success UI
+            setSubmitted(true);
+        }
+        catch (error) {
+            console.error('Error submitting feedback:', error);
+            alert('Failed to submit feedback. Please try again.');
+        }
+    };
+    return (_jsx(_Fragment, { children: mainTheme && mainTheme.data && _jsx("div", { style: {
+                display: 'flex',
+                justifyContent: 'center',
+                borderRadius: '0.75rem',
+                backgroundColor: mainTheme.data.background,
+                margin: '1.25rem',
+                width: '470px',
+                minHeight: '400px',
+                border: '1px solid black',
+                padding: '1rem',
+                boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)'
+            }, children: form && _jsxs(_Fragment, { children: [!submitted && _jsxs("form", { onSubmit: handleSubmit, id: formContainerId, style: { display: 'flex', flexDirection: 'column', alignItems: 'center', width: '100%' }, children: [_jsx("h2", { className: fontMap[form.design.title.fontId].className, style: { marginTop: '1rem', fontSize: form.design.title.size + "px", textAlign: 'center', color: mainTheme.data.text.title }, children: form.title }), _jsx("p", { className: fontMap[form.design.subtitle.fontId].className, style: { marginTop: '1rem', fontSize: form.design.subtitle.size + "px", textAlign: 'center', color: mainTheme.data.text.subtitle }, children: form.subtitle }), _jsx("br", {}), fields.map((field, index) => {
+                                if (field._type === 'input') {
+                                    return (_jsx("input", { required: true, value: responses[index]?.response || "", placeholder: field.placeholder, className: fontMap.wixmadefor.className, onChange: (e) => updateResponse(index, e.target.value), style: {
+                                            width: "100%",
+                                            padding: 10,
+                                            borderColor: mainTheme.data.text.title,
+                                            borderWidth: 1,
+                                            marginTop: '5px',
+                                            borderRadius: 10,
+                                            color: mainTheme.data.text.title
+                                        } }, index));
+                                }
+                                if (field._type === "rating") {
+                                    const currentRating = parseInt(responses[index]?.response || 0);
+                                    return (_jsx("div", { style: { display: "flex", gap: "10px", marginTop: "10px" }, children: [1, 2, 3, 4, 5].map((num) => (_jsx("div", { style: { cursor: "pointer" }, onClick: () => updateResponse(index, String(num)), children: currentRating >= num ? iconMap.starActive : iconMap.starUnactive }, num))) }, index));
+                                }
+                                if (field._type === 'textarea') {
+                                    return (_jsx("textarea", { required: true, className: fontMap.wixmadefor.className, value: responses[index]?.response || "", placeholder: field.placeholder, onChange: (e) => updateResponse(index, e.target.value), style: {
+                                            height: '7.5rem',
+                                            marginTop: '5px',
+                                            borderWidth: 1,
+                                            borderColor: mainTheme.data.text.title,
+                                            padding: 10,
+                                            borderRadius: 10,
+                                            width: "100%",
+                                            color: mainTheme.data.text.title
+                                        } }, index));
+                                }
+                                return null;
+                            }), _jsx("br", {}), _jsx("button", { type: "submit", className: fontMap.poppins.className, style: {
+                                    padding: "15px",
+                                    borderRadius: "15px",
+                                    backgroundColor: mainTheme.data.highlight,
+                                    color: "white",
+                                    width: "40%",
+                                    fontSize: "13px",
+                                    cursor: "pointer",
+                                    border: "none"
+                                }, children: "Send Feedback" })] }), submitted && _jsxs("div", { id: successContainerId, style: { display: "flex", flexDirection: 'column', alignItems: 'center', width: '100%' }, children: [_jsx("br", {}), _jsx("br", {}), _jsx("br", {}), form.success_icon && iconMap[form.success_icon] ? iconMap[form.success_icon] : iconMap.circleCheckBig, _jsx("h2", { className: fontMap[form.success_heading_font].className, style: { marginTop: '1rem', fontSize: form.design.title.size + "px", color: mainTheme.data.text.title }, children: form.success_heading }), _jsx("p", { className: fontMap[form.success_message_font].className, style: { marginTop: '1rem', fontSize: '0.875rem', textAlign: 'center', color: mainTheme.data.text.subtitle }, children: form.success_message })] })] }) }) }));
+}
+export default StaticFormComponent;