@stack-spot/portal-layout 2.22.1 → 2.23.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [2.23.0](https://github.com/stack-spot/portal-commons/compare/portal-layout@v2.22.1...portal-layout@v2.23.0) (2025-01-17)
+
+
+### Features
+
+* 1224 typeform ([#643](https://github.com/stack-spot/portal-commons/issues/643)) ([7203759](https://github.com/stack-spot/portal-commons/commit/7203759c66137fadcc2076d4a536902d118cf33f))
+
 ## [2.22.1](https://github.com/stack-spot/portal-commons/compare/portal-layout@v2.22.0...portal-layout@v2.22.1) (2025-01-16)
 
 

package/dist/components/Rate/hook.d.ts

@@ -1,4 +1,3 @@
 export declare function isLessThan30Days(date1: Date, date2: Date): boolean;
 export declare const shouldShowNpsModal: () => boolean;
-export declare function useRatingEffect(): void;
 //# sourceMappingURL=hook.d.ts.map

package/dist/components/Rate/hook.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../../../src/components/Rate/hook.tsx"],"names":[],"mappings":"AAYA,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,WAaxD;AASD,eAAO,MAAM,kBAAkB,QAAO,OAoCrC,CAAA;AAED,wBAAgB,eAAe,SAS9B"}
+{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../../../src/components/Rate/hook.tsx"],"names":[],"mappings":"AAEA,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,WAaxD;AASD,eAAO,MAAM,kBAAkB,QAAO,OAoCrC,CAAA"}

package/dist/components/Rate/hook.js

@@ -1,12 +1,3 @@
-import { useEffectOnce } from '@stack-spot/portal-components';
-const loadScript = () => new Promise((resolve, reject) => {
-    const script = document.createElement('script');
-    script.setAttribute('src', '//embed.typeform.com/next/embed.js');
-    script.setAttribute('async', 'true');
-    script.onload = () => resolve();
-    script.onerror = (error) => reject(error);
-    document.body.appendChild(script);
-});
 // Function to check if the difference between two dates is greater than 30 days
 export function isLessThan30Days(date1, date2) {
     // Get the timestamps of the dates
@@ -54,12 +45,4 @@ export const shouldShowNpsModal = () => {
     }
     return false;
 };
-export function useRatingEffect() {
-    const handleInit = async () => {
-        await loadScript();
-    };
-    useEffectOnce(() => {
-        handleInit();
-    });
-}
 //# sourceMappingURL=hook.js.map

package/dist/components/Rate/hook.js.map

@@ -1 +1 @@
-{"version":3,"file":"hook.js","sourceRoot":"","sources":["../../../src/components/Rate/hook.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"hook.js","sourceRoot":"","sources":["../../../src/components/Rate/hook.tsx"],"names":[],"mappings":"AACA,gFAAgF;AAChF,MAAM,UAAU,gBAAgB,CAAC,KAAW,EAAE,KAAW;IACvD,kCAAkC;IAClC,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,EAAE,CAAA;IAClC,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,EAAE,CAAA;IAElC,2CAA2C;IAC3C,MAAM,wBAAwB,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,GAAG,UAAU,CAAC,CAAA;IAElE,+BAA+B;IAC/B,MAAM,gBAAgB,GAAG,wBAAwB,GAAG,CAAC,IAAI,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAA;IAEzE,gDAAgD;IAChD,OAAO,gBAAgB,GAAG,EAAE,CAAA;AAC9B,CAAC;AAED,6CAA6C;AAC7C,MAAM,aAAa,GAAG,CAAC,IAAU,EAAW,EAAE;IAC5C,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,EAAE,CAAA;IAC/B,OAAO,SAAS,KAAK,CAAC,IAAI,SAAS,KAAK,CAAC,CAAA,CAAC,2BAA2B;AACvE,CAAC,CAAA;AAED,yDAAyD;AACzD,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAY,EAAE;IAC9C,MAAM,KAAK,GAAG,IAAI,IAAI,EAAE,CAAA;IACxB,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,EAAE,CAAA;IAElC,gDAAgD;IAChD,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAC,aAAa,CAAC,CAAA;IAErD,IAAI,SAAS,EAAE,CAAC;QACd,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,QAAQ,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,CAAA;QACnD,MAAM,WAAW,GAAG,SAAS,CAAC,QAAQ,EAAE,KAAK,KAAK,CAAC,QAAQ,EAAE,IAAI,SAAS,CAAC,WAAW,EAAE,KAAK,KAAK,CAAC,WAAW,EAAE,CAAA;QAEhH,qEAAqE;QACrE,IAAI,WAAW;YAAE,OAAO,KAAK,CAAA;IAC/B,CAAC;IAED,4DAA4D;IAC5D,IAAI,iBAAiB,GAAG,CAAC,CAAA;IACzB,IAAI,GAAG,GAAG,EAAE,CAAA;IAEZ,2DAA2D;IAC3D,OAAO,iBAAiB,GAAG,CAAC,EAAE,CAAC;QAC7B,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,EAAE,KAAK,CAAC,QAAQ,EAAE,EAAE,GAAG,CAAC,CAAA;QAEtE,IAAI,aAAa,CAAC,SAAS,CAAC,EAAE,CAAC;YAC7B,iBAAiB,EAAE,CAAA;QACrB,CAAC;QAED,2FAA2F;QAC3F,IAAI,UAAU,KAAK,GAAG,EAAE,CAAC;YACvB,OAAO,IAAI,CAAA;QACb,CAAC;QAED,GAAG,EAAE,CAAA;IACP,CAAC;IAED,OAAO,KAAK,CAAA;AACd,CAAC,CAAA"}

package/dist/components/TypeForm/hook.d.ts

@@ -0,0 +1,2 @@
+export declare function useTypeFormEffect(): void;
+//# sourceMappingURL=hook.d.ts.map

package/dist/components/TypeForm/hook.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../../../src/components/TypeForm/hook.tsx"],"names":[],"mappings":"AAGA,wBAAgB,iBAAiB,SAShC"}

package/dist/components/TypeForm/hook.js

@@ -0,0 +1,11 @@
+import { useEffectOnce } from '@stack-spot/portal-components';
+import { loadTypeFormScript } from './utils.js';
+export function useTypeFormEffect() {
+    const handleInit = async () => {
+        await loadTypeFormScript();
+    };
+    useEffectOnce(() => {
+        handleInit();
+    });
+}
+//# sourceMappingURL=hook.js.map

package/dist/components/TypeForm/hook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hook.js","sourceRoot":"","sources":["../../../src/components/TypeForm/hook.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA;AAC7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAE5C,MAAM,UAAU,iBAAiB;IAE/B,MAAM,UAAU,GAAG,KAAK,IAAI,EAAE;QAC5B,MAAM,kBAAkB,EAAE,CAAA;IAC5B,CAAC,CAAA;IAED,aAAa,CAAC,GAAG,EAAE;QACjB,UAAU,EAAE,CAAA;IACd,CAAC,CAAC,CAAA;AACJ,CAAC"}

package/dist/components/TypeForm/index.d.ts

@@ -0,0 +1,9 @@
+export interface TypeFormProps {
+    dataTfLive: string;
+    orgId: string;
+    userId: string;
+    appId?: string;
+    infraId?: string;
+}
+export declare const TypeForm: ({ dataTfLive, orgId, userId, appId, infraId, }: TypeFormProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/TypeForm/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TypeForm/index.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,aAAa;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,QAAQ,mDAMlB,aAAa,4CAgCf,CAAA"}

package/dist/components/TypeForm/index.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex } from '@citric/core';
+import { LoadingCircular } from '@citric/ui';
+import { useEffect, useMemo, useState } from 'react';
+export const TypeForm = ({ dataTfLive, orgId, userId, appId, infraId, }) => {
+    const [isLoading, setIsLoading] = useState(true);
+    useEffect(() => {
+        window.tf?.load();
+        setTimeout(() => {
+            setIsLoading(false);
+        }, 2000);
+    }, []);
+    const typeform = useMemo(() => _jsx(Box, { children: appId ? _jsx("div", { "data-tf-live": dataTfLive, "data-tf-hidden": `org_id=${orgId},user_id=${userId},app_id=${appId}` }) : _jsx("div", { "data-tf-live": dataTfLive, "data-tf-hidden": `org_id=${orgId},user_id=${userId}infra_id=${infraId}` }) }), []);
+    return (_jsxs(Box, { sx: { minWidth: '650px', minHeight: '500px' }, children: [isLoading && _jsx(Flex, { alignItems: "center", justifyContent: "center", w: "12", sx: { height: '100%' }, children: _jsx(LoadingCircular, {}) }), _jsx(Box, { sx: { opacity: isLoading ? '0' : 1 }, children: typeform })] }));
+};
+//# sourceMappingURL=index.js.map

package/dist/components/TypeForm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/TypeForm/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAC5C,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAUpD,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,UAAU,EACV,KAAK,EACL,MAAM,EACN,KAAK,EACL,OAAO,GACO,EAAE,EAAE;IAGlB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAA;IAEhD,SAAS,CAAC,GAAG,EAAE;QACZ,MAAc,CAAC,EAAE,EAAE,IAAI,EAAE,CAAA;QAC1B,UAAU,CAAC,GAAG,EAAE;YACd,YAAY,CAAC,KAAK,CAAC,CAAA;QACrB,CAAC,EAAE,IAAI,CAAC,CAAA;IACV,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,KAAC,GAAG,cAChC,KAAK,CAAC,CAAC,CAAC,8BACO,UAAU,oBACR,UAAU,KAAK,YAAY,MAAM,WAAW,KAAK,EAAE,GACnE,CAAC,CAAC,CAAC,8BACW,UAAU,oBACR,UAAU,KAAK,YAAY,MAAM,YAAY,OAAO,EAAE,GACtE,GACE,EAAE,EAAE,CAAC,CAAA;IAEX,OAAO,CACL,MAAC,GAAG,IAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,aAC/C,SAAS,IAAI,KAAC,IAAI,IAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,EAAC,CAAC,EAAC,IAAI,EAAC,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,YAC3F,KAAC,eAAe,KAAG,GACd,EACP,KAAC,GAAG,IAAC,EAAE,EAAE,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,YACtC,QAAQ,GACL,IACF,CACP,CAAA;AACH,CAAC,CAAA"}

package/dist/components/TypeForm/show-typeform-modal.d.ts

@@ -0,0 +1,5 @@
+import { TypeFormProps } from './index.js';
+export declare const showTypeFormModal: ({ title, ...props }: TypeFormProps & {
+    title: string;
+}) => void;
+//# sourceMappingURL=show-typeform-modal.d.ts.map

package/dist/components/TypeForm/show-typeform-modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"show-typeform-modal.d.ts","sourceRoot":"","sources":["../../../src/components/TypeForm/show-typeform-modal.tsx"],"names":[],"mappings":"AACA,OAAO,EAAY,aAAa,EAAE,MAAM,GAAG,CAAA;AAE3C,eAAO,MAAM,iBAAiB,wBAAyB,aAAa,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,SAOvF,CAAA"}

package/dist/components/TypeForm/show-typeform-modal.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { overlay } from '../../LayoutOverlayManager.js';
+import { TypeForm } from './index.js';
+export const showTypeFormModal = ({ title, ...props }) => {
+    const { dataTfLive, orgId, userId, appId, infraId } = props;
+    overlay.showModal({
+        title: title,
+        children: _jsx(TypeForm, { dataTfLive: dataTfLive, orgId: orgId, userId: userId, appId: appId, infraId: infraId }),
+        size: 'large',
+    });
+};
+//# sourceMappingURL=show-typeform-modal.js.map

package/dist/components/TypeForm/show-typeform-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"show-typeform-modal.js","sourceRoot":"","sources":["../../../src/components/TypeForm/show-typeform-modal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AACpD,OAAO,EAAE,QAAQ,EAAiB,MAAM,GAAG,CAAA;AAE3C,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAqC,EAAE,EAAE;IAC1F,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,KAAK,CAAA;IAC3D,OAAO,CAAC,SAAS,CAAC;QAChB,KAAK,EAAE,KAAK;QACZ,QAAQ,EAAE,KAAC,QAAQ,IAAC,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,GAAI;QAC5G,IAAI,EAAE,OAAO;KACd,CAAC,CAAA;AACJ,CAAC,CAAA"}

package/dist/components/TypeForm/utils.d.ts

@@ -0,0 +1,2 @@
+export declare const loadTypeFormScript: () => Promise<void>;
+//# sourceMappingURL=utils.d.ts.map

package/dist/components/TypeForm/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/TypeForm/utils.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,kBAAkB,qBAO7B,CAAA"}

package/dist/components/TypeForm/utils.js

@@ -0,0 +1,9 @@
+export const loadTypeFormScript = () => new Promise((resolve, reject) => {
+    const script = document.createElement('script');
+    script.setAttribute('src', '//embed.typeform.com/next/embed.js');
+    script.setAttribute('async', 'true');
+    script.onload = () => resolve();
+    script.onerror = (error) => reject(error);
+    document.body.appendChild(script);
+});
+//# sourceMappingURL=utils.js.map

package/dist/components/TypeForm/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/TypeForm/utils.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,EAAE,CAAC,IAAI,OAAO,CAAO,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;IAC5E,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAA;IAC/C,MAAM,CAAC,YAAY,CAAC,KAAK,EAAE,oCAAoC,CAAC,CAAA;IAChE,MAAM,CAAC,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC,CAAA;IACpC,MAAM,CAAC,MAAM,GAAG,GAAG,EAAE,CAAC,OAAO,EAAE,CAAA;IAC/B,MAAM,CAAC,OAAO,GAAG,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;IACzC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAA;AACnC,CAAC,CAAC,CAAA"}

package/dist/index.d.ts

@@ -9,9 +9,11 @@ export { CLOSE_OVERLAY_ID, OverlayContent } from './components/OverlayContent.js
 export { PortalSwitcher } from './components/PortalSwitcher.js';
 export { usePrivacyPolicyEffect } from './components/PrivacyPolicyMessage/hooks.js';
 export { RateComponent } from './components/Rate/index.js';
-export { shouldShowNpsModal, useRatingEffect } from './components/Rate/hook.js';
+export { shouldShowNpsModal } from './components/Rate/hook.js';
 export { ShowFeedbackModal, showRateUsModal } from './components/Rate/show-rate-us-modals.js';
 export * from './components/tour/index.js';
+export { useTypeFormEffect } from './components/TypeForm/hook.js';
+export { showTypeFormModal } from './components/TypeForm/show-typeform-modal.js';
 export * from './elements.js';
 export * from './errors.js';
 export { Layout, RawLayout } from './Layout.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAA;AAC5E,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACzD,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAA;AACzF,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAA;AAC7D,cAAc,yBAAyB,CAAA;AACvC,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC9E,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAA;AAChF,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAC5E,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAA;AAC1F,cAAc,mBAAmB,CAAA;AACjC,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAChD,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAA;AAC5E,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACzD,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAA;AACzF,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAA;AAC7D,cAAc,yBAAyB,CAAA;AACvC,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC9E,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAA;AAChF,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAC3D,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAA;AAC1F,cAAc,mBAAmB,CAAA;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,2CAA2C,CAAA;AAC7E,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAChD,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA"}

package/dist/index.js

@@ -9,9 +9,11 @@ export { CLOSE_OVERLAY_ID, OverlayContent } from './components/OverlayContent.js
 export { PortalSwitcher } from './components/PortalSwitcher.js';
 export { usePrivacyPolicyEffect } from './components/PrivacyPolicyMessage/hooks.js';
 export { RateComponent } from './components/Rate/index.js';
-export { shouldShowNpsModal, useRatingEffect } from './components/Rate/hook.js';
+export { shouldShowNpsModal } from './components/Rate/hook.js';
 export { ShowFeedbackModal, showRateUsModal } from './components/Rate/show-rate-us-modals.js';
 export * from './components/tour/index.js';
+export { useTypeFormEffect } from './components/TypeForm/hook.js';
+export { showTypeFormModal } from './components/TypeForm/show-typeform-modal.js';
 export * from './elements.js';
 export * from './errors.js';
 export { Layout, RawLayout } from './Layout.js';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAA;AAC5E,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAA;AACzD,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAA;AACzF,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAA;AAC7D,cAAc,yBAAyB,CAAA;AACvC,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC9E,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAA;AAChF,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAC5E,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAA;AAC1F,cAAc,mBAAmB,CAAA;AACjC,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAChD,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAA;AAC5E,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAA;AACzD,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAA;AACzF,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAA;AAC7D,cAAc,yBAAyB,CAAA;AACvC,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC9E,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAA;AAChF,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAC3D,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAA;AAC1F,cAAc,mBAAmB,CAAA;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,2CAA2C,CAAA;AAC7E,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAChD,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/portal-layout",
-  "version": "2.22.1",
+  "version": "2.23.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/Rate/hook.tsx

@@ -1,26 +1,16 @@
-import { useEffectOnce } from '@stack-spot/portal-components'
-
-const loadScript = () => new Promise<void>((resolve, reject) => {
-  const script = document.createElement('script')
-  script.setAttribute('src', '//embed.typeform.com/next/embed.js')
-  script.setAttribute('async', 'true')
-  script.onload = () => resolve()
-  script.onerror = (error) => reject(error)
-  document.body.appendChild(script)   
-})
 
 // Function to check if the difference between two dates is greater than 30 days
 export function isLessThan30Days(date1: Date, date2: Date) {
   // Get the timestamps of the dates
   const timestamp1 = date1.getTime()
   const timestamp2 = date2.getTime()
-  
+
   // Calculate the difference in milliseconds
   const differenceInMilliseconds = Math.abs(timestamp2 - timestamp1)
-  
+
   // Convert milliseconds to days
   const differenceInDays = differenceInMilliseconds / (1000 * 60 * 60 * 24)
-  
+
   // Check if the difference is fewer than 30 days
   return differenceInDays < 30
 }
@@ -42,7 +32,7 @@ export const shouldShowNpsModal = (): boolean => {
   if (ratedInfo) {
     const savedDate = new Date(parseInt(ratedInfo, 10))
     const isSameMonth = savedDate.getMonth() === today.getMonth() && savedDate.getFullYear() === today.getFullYear()
-    
+
     // If it has already been evaluated this month, do not show the modal
     if (isSameMonth) return false
   }
@@ -69,14 +59,3 @@ export const shouldShowNpsModal = (): boolean => {
 
   return false
 }
-
-export function useRatingEffect() {
-
-  const handleInit = async () => {
-    await loadScript()
-  }
-
-  useEffectOnce(() => {
-    handleInit()
-  })
-}

package/src/components/TypeForm/hook.tsx

@@ -0,0 +1,13 @@
+import { useEffectOnce } from '@stack-spot/portal-components'
+import { loadTypeFormScript } from './utils'
+
+export function useTypeFormEffect() {
+
+  const handleInit = async () => {
+    await loadTypeFormScript()
+  }
+
+  useEffectOnce(() => {
+    handleInit()
+  })
+}

package/src/components/TypeForm/index.tsx

@@ -0,0 +1,51 @@
+import { Box, Flex } from '@citric/core'
+import { LoadingCircular } from '@citric/ui'
+import { useEffect, useMemo, useState } from 'react'
+
+export interface TypeFormProps {
+  dataTfLive: string,
+  orgId: string,
+  userId: string,
+  appId?: string,
+  infraId?: string,
+}
+
+export const TypeForm = ({
+  dataTfLive,
+  orgId,
+  userId,
+  appId,
+  infraId,
+}: TypeFormProps) => {
+
+
+  const [isLoading, setIsLoading] = useState(true)
+
+  useEffect(() => {
+    (window as any).tf?.load()
+    setTimeout(() => {
+      setIsLoading(false)
+    }, 2000)
+  }, [])
+
+  const typeform = useMemo(() => <Box>
+    {appId ? <div
+      data-tf-live={dataTfLive}
+      data-tf-hidden={`org_id=${orgId},user_id=${userId},app_id=${appId}`}
+    /> : <div
+      data-tf-live={dataTfLive}
+      data-tf-hidden={`org_id=${orgId},user_id=${userId}infra_id=${infraId}`}
+    />}
+  </Box>, [])
+
+  return (
+    <Box sx={{ minWidth: '650px', minHeight: '500px' }}>
+      {isLoading && <Flex alignItems="center" justifyContent="center" w="12" sx={{ height: '100%' }}>
+        <LoadingCircular />
+      </Flex>}
+      <Box sx={{ opacity: isLoading ? '0' : 1 }}>
+        {typeform}
+      </Box>
+    </Box>
+  )
+}

package/src/components/TypeForm/show-typeform-modal.tsx

@@ -0,0 +1,11 @@
+import { overlay } from '../../LayoutOverlayManager'
+import { TypeForm, TypeFormProps } from '.'
+
+export const showTypeFormModal = ({ title, ...props }: TypeFormProps & { title: string }) => {
+  const { dataTfLive, orgId, userId, appId, infraId } = props
+  overlay.showModal({
+    title: title,
+    children: <TypeForm dataTfLive={dataTfLive} orgId={orgId} userId={userId} appId={appId} infraId={infraId} />,
+    size: 'large',
+  })
+}

package/src/components/TypeForm/utils.ts

@@ -0,0 +1,8 @@
+export const loadTypeFormScript = () => new Promise<void>((resolve, reject) => {
+  const script = document.createElement('script')
+  script.setAttribute('src', '//embed.typeform.com/next/embed.js')
+  script.setAttribute('async', 'true')
+  script.onload = () => resolve()
+  script.onerror = (error) => reject(error)
+  document.body.appendChild(script)
+})

package/src/index.ts

@@ -9,9 +9,11 @@ export { CLOSE_OVERLAY_ID, OverlayContent } from './components/OverlayContent'
 export { PortalSwitcher } from './components/PortalSwitcher'
 export { usePrivacyPolicyEffect } from './components/PrivacyPolicyMessage/hooks'
 export { RateComponent } from './components/Rate'
-export { shouldShowNpsModal, useRatingEffect } from './components/Rate/hook'
+export { shouldShowNpsModal } from './components/Rate/hook'
 export { ShowFeedbackModal, showRateUsModal } from './components/Rate/show-rate-us-modals'
 export * from './components/tour'
+export { useTypeFormEffect } from './components/TypeForm/hook'
+export { showTypeFormModal } from './components/TypeForm/show-typeform-modal'
 export * from './elements'
 export * from './errors'
 export { Layout, RawLayout } from './Layout'