@pagamio/frontend-commons-lib 0.8.184 → 0.8.187

package/lib/feedback/FeedbackPage.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { FeedbackPageProps } from './types';
+export declare const FeedbackPage: React.FC<FeedbackPageProps>;

package/lib/feedback/FeedbackPage.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ExternalLink, MessageSquare } from 'lucide-react';
+import Button from '../components/ui/Button';
+import Card from '../components/ui/Card';
+import { openFeedbackForm } from './utils';
+export const FeedbackPage = ({ config, userData, onNavigateBack, title = 'Share Your Feedback', description = 'We value your feedback! Help us improve by sharing your thoughts and suggestions.', buttonText = 'Open Feedback Form', }) => {
+    const handleOpenFeedback = () => {
+        openFeedbackForm(config, userData, onNavigateBack);
+    };
+    return (_jsx("div", { className: "min-h-screen flex items-center justify-center p-4", children: _jsx(Card, { className: "w-full max-w-md", children: _jsxs("div", { className: "p-6 text-center", children: [_jsx("div", { className: "mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900", children: _jsx(MessageSquare, { className: "h-6 w-6 text-blue-600 dark:text-blue-300" }) }), _jsx("h1", { className: "text-xl font-semibold mb-2", children: title }), _jsx("p", { className: "text-gray-600 dark:text-gray-400 mb-6", children: description }), _jsxs("div", { className: "space-y-4", children: [_jsxs(Button, { onClick: handleOpenFeedback, className: "w-full", size: "lg", children: [_jsx(ExternalLink, { className: "mr-2 h-4 w-4" }), buttonText] }), onNavigateBack && (_jsx(Button, { variant: "outline", onClick: onNavigateBack, className: "w-full", children: "Go Back" }))] })] }) }) }));
+};

package/lib/feedback/index.d.ts

@@ -0,0 +1,3 @@
+export type { FeedbackFormConfig, FeedbackUserData, FeedbackPageProps } from './types';
+export { generateFeedbackFormUrl, openFeedbackForm } from './utils';
+export { FeedbackPage } from './FeedbackPage';

package/lib/feedback/index.js

@@ -0,0 +1,4 @@
+// Utilities
+export { generateFeedbackFormUrl, openFeedbackForm } from './utils';
+// Components
+export { FeedbackPage } from './FeedbackPage';

package/lib/feedback/types.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Feedback Form Configuration Types
+ */
+export interface FeedbackFormConfig {
+    /** Base URL of the Google Form */
+    baseUrl: string;
+    /** Mapping of field names to Google Form entry IDs */
+    fieldIds: {
+        email?: string;
+        userRole?: string;
+        userId?: string;
+        userName?: string;
+        [key: string]: string | undefined;
+    };
+}
+export interface FeedbackUserData {
+    email?: string;
+    userRole?: string;
+    userId?: string | number;
+    userName?: string;
+    [key: string]: string | number | undefined;
+}
+export interface FeedbackPageProps {
+    /** Configuration for the feedback form */
+    config: FeedbackFormConfig;
+    /** User data to pre-fill the form */
+    userData?: FeedbackUserData;
+    /** Optional callback for navigation back */
+    onNavigateBack?: () => void;
+    /** Optional custom page title */
+    title?: string;
+    /** Optional custom page description */
+    description?: string;
+    /** Optional custom button text */
+    buttonText?: string;
+}

package/lib/feedback/types.js

@@ -0,0 +1,4 @@
+/**
+ * Feedback Form Configuration Types
+ */
+export {};

package/lib/feedback/utils.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Configurable Google Form Pre-fill Utility
+ *
+ * This utility provides a configurable way to generate pre-filled Google Form URLs
+ * and open feedback forms across different applications.
+ */
+import type { FeedbackFormConfig, FeedbackUserData } from './types';
+/**
+ * Generate a pre-filled Google Form URL with user data
+ * @param config - Form configuration with base URL and field mappings
+ * @param userData - User information to pre-fill in the form
+ * @returns Pre-filled Google Form URL
+ */
+export declare function generateFeedbackFormUrl(config: FeedbackFormConfig, userData?: FeedbackUserData): string;
+/**
+ * Open feedback form in a new tab with pre-filled user data
+ * @param config - Form configuration with base URL and field mappings
+ * @param userData - User information to pre-fill in the form
+ * @param onFormOpened - Optional callback after form is opened
+ */
+export declare function openFeedbackForm(config: FeedbackFormConfig, userData?: FeedbackUserData, onFormOpened?: () => void): void;

package/lib/feedback/utils.js

@@ -0,0 +1,36 @@
+/**
+ * Generate a pre-filled Google Form URL with user data
+ * @param config - Form configuration with base URL and field mappings
+ * @param userData - User information to pre-fill in the form
+ * @returns Pre-filled Google Form URL
+ */
+export function generateFeedbackFormUrl(config, userData = {}) {
+    const params = new URLSearchParams();
+    // Required by Google Forms for pre-filled links
+    params.append('usp', 'pp_url');
+    // Add user data to URL parameters
+    for (const [key, value] of Object.entries(userData)) {
+        const fieldId = config.fieldIds[key];
+        if (value != null && fieldId) {
+            // Encode the value but preserve @ symbol in email addresses
+            let encodedValue = encodeURIComponent(String(value));
+            if (key === 'email') {
+                // Replace encoded @ symbol back to @ for email fields
+                encodedValue = encodedValue.replaceAll('%40', '@');
+            }
+            params.append(fieldId, encodedValue);
+        }
+    }
+    return `${config.baseUrl}?${params.toString()}`;
+}
+/**
+ * Open feedback form in a new tab with pre-filled user data
+ * @param config - Form configuration with base URL and field mappings
+ * @param userData - User information to pre-fill in the form
+ * @param onFormOpened - Optional callback after form is opened
+ */
+export function openFeedbackForm(config, userData = {}, onFormOpened) {
+    const url = generateFeedbackFormUrl(config, userData);
+    window.open(url, '_blank', 'noopener,noreferrer');
+    onFormOpened?.();
+}

package/lib/index.d.ts

@@ -19,3 +19,4 @@ export * from './translations';
 export * from './rbac';
 export { useImageUpload } from './shared/hooks/useImageUpload';
 export type { UseImageUploadProps, UploadResponse } from './shared/hooks/useImageUpload';
+export * from './feedback';

package/lib/index.js

@@ -28,3 +28,5 @@ export * from './translations';
 export * from './rbac';
 // Hooks
 export { useImageUpload } from './shared/hooks/useImageUpload';
+// Feedback System
+export * from './feedback';

package/lib/styles.css

@@ -3132,6 +3132,10 @@ input[type="range"]::-ms-fill-lower {
   --tw-text-opacity: 1;
   color: rgb(63 131 248 / var(--tw-text-opacity, 1));
 }
+.text-blue-600 {
+  --tw-text-opacity: 1;
+  color: rgb(28 100 242 / var(--tw-text-opacity, 1));
+}
 .text-blue-700 {
   --tw-text-opacity: 1;
   color: rgb(26 86 219 / var(--tw-text-opacity, 1));
@@ -4790,6 +4794,10 @@ input[type="range"]::-ms-fill-lower {
   --tw-bg-opacity: 1;
   background-color: rgb(28 100 242 / var(--tw-bg-opacity, 1));
 }
+.dark\:bg-blue-900:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(35 56 118 / var(--tw-bg-opacity, 1));
+}
 .dark\:bg-cyan-100:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(207 250 254 / var(--tw-bg-opacity, 1));
@@ -4967,6 +4975,10 @@ input[type="range"]::-ms-fill-lower {
 .dark\:fill-gray-300:is(.dark *) {
   fill: #D1D5DB;
 }
+.dark\:text-blue-300:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(164 202 254 / var(--tw-text-opacity, 1));
+}
 .dark\:text-blue-500:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(63 131 248 / var(--tw-text-opacity, 1));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pagamio/frontend-commons-lib",
   "description": "Pagamio library for Frontend reusable components like the form engine and table container",
-  "version": "0.8.184",
+  "version": "0.8.187",
   "publishConfig": {
     "access": "public",
     "provenance": false