@redneckz/wildless-cms-uni-blocks 0.14.918 → 0.14.920

package/src/common.css

@@ -19,6 +19,9 @@ html {
   --color-gradient-from: 141, 189, 76;
   --color-gradient-to: 69, 172, 69;
   --color-primary-divider: 235, 237, 240;
+  --border-radius-md: 0.375rem;
+  --border-radius-lg: 0.5rem;
+  --border-radius-none: 0rem;
 }
 
 /* Private clients | Green */

package/src/components/ApplicationLeadForm/ApplicationLeadForm.tsx

@@ -3,6 +3,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useEffect, useMemo, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useForm } from '../../hooks/useForm/useForm';
 import { NoConsentDialog } from '../../retail/components/NoConsentDialog/NoConsentDialog';
+import { useIFrameMode } from '../../retail/hooks/useIFrameMode';
 import { type SectionsRetailProps } from '../../retail/model/InputSectionsType';
 import { type FieldRetailDef } from '../../retail/model/RetailFormContent';
 import { getLimitedBirthdayValidation } from '../../retail/validator/getLimitedBirthdayValidation';
@@ -49,7 +50,7 @@ export const ApplicationLeadForm = JSX<ApplicationLeadFormProps>(
     const applicationFormData = useMemo(() => getApplicationFormData(productType), [productType]);
     const inputs = useMemo(() => getInputs(applicationFormData), [applicationFormData]);
     const noConsentDialog = useDialog(NoConsentDialog);
-
+    useIFrameMode();
     const extendedValidatorObj = useMemo(() => getExtendedValidatorObj(productType), [productType]);
     const formValidator = useMemo(
       () => getFormValidator(inputs, extendedValidatorObj),

package/src/components/ApplicationLeadForm/EsiaLoginBanner.tsx

@@ -1,7 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { useSessionStore } from '@redneckz/uni-jsx/lib/Store/useSessionStore';
 import { locationNavigator } from '../../external/locationNavigator';
 import { getLink } from '../../retail/api/getLink';
+import { type IFrameStore } from '../../retail/hooks/useIFrameMode';
 import { Button } from '../../ui-kit/Button/Button';
 import { Img } from '../../ui-kit/Img/Img';
 import { EsiaStatuses, type ProductType } from './ApplicationLeadFormContent';
@@ -13,20 +15,23 @@ export interface EsiaLoginBannerProps {
 
 export const EsiaLoginBanner = JSX<EsiaLoginBannerProps>(({ onChangeEsiaStatus, productType }) => {
   const navigator = locationNavigator();
+  const sessionStore = useSessionStore<IFrameStore>();
+  const frameLocation = sessionStore.frameLocation;
 
   const handleAuth = useCallback(async () => {
     try {
       const resp = await getLink({
-        redirectUri: globalThis.location.origin + globalThis.location.pathname,
+        redirectUri: frameLocation || globalThis.location.origin + globalThis.location.pathname,
       });
-
       if (resp?.link) {
-        navigator.assign(resp.link);
+        frameLocation
+          ? window.parent.postMessage({ redirectUri: resp?.link }, '*')
+          : navigator.assign(resp.link);
       }
     } catch {
       onChangeEsiaStatus(EsiaStatuses.Error);
     }
-  }, []);
+  }, [frameLocation]);
 
   return (
     <div className="flex items-center rounded-md bg-main-gray p-4xl">

package/src/components/ContentPage/ContentPage.tsx

@@ -13,6 +13,7 @@ import { CookiePopup } from '../../ui-kit/CookiePopup/CookiePopup';
 import { DialogManager } from '../../ui-kit/DialogManager/DialogManager';
 import { PopupManager } from '../../ui-kit/PopupManager/PopupManager';
 import { type UniBlockMeta } from '../../UniBlock/UniBlock';
+import { isIFrame } from '../../utils/isIFrame';
 import { style } from '../../utils/style';
 
 interface ContentPageProps extends ComponentType {
@@ -30,7 +31,7 @@ export const ContentPage = JSX<ContentPageProps>(
   ({ className, data = EMPTY_DATA, blocksRegistry, blockDecorator }) => {
     const { slots, blocks, fallback, ...pageContent } = data;
     const resolvedPageContent = useJSONRef(pageContent, fallback);
-
+    const isFrame = isIFrame();
     useClickHandler();
     useDefaultLocation();
 
@@ -45,7 +46,7 @@ export const ContentPage = JSX<ContentPageProps>(
     return (
       <div data-theme={data.colorPalette || 'pc'}>
         <section className={style('@container relative', data.style, className)}>
-          {slots?.[HEADER_SLOT]?.length ? (
+          {!isFrame && slots?.[HEADER_SLOT]?.length ? (
             <div className="relative z-10 mb-lg shadow-[0_8px_32px_0px_#00000014]">
               {renderBlocksList(slots?.[HEADER_SLOT], { ...options, slotName: HEADER_SLOT })}
             </div>
@@ -56,10 +57,11 @@ export const ContentPage = JSX<ContentPageProps>(
               options,
               extraProps: { className: 'scroll-mt-12' },
             })}
-            {renderBlocksList(slots?.[FOOTER_SLOT], { ...options, slotName: FOOTER_SLOT })}
+            {!isFrame &&
+              renderBlocksList(slots?.[FOOTER_SLOT], { ...options, slotName: FOOTER_SLOT })}
           </div>
         </section>
-        {slots?.[STICKY_FOOTER_SLOT]?.length ? (
+        {!isFrame && slots?.[STICKY_FOOTER_SLOT]?.length ? (
           <div className="fixed w-full bottom-0 left-0 z-[100]">
             {renderBlocksList(slots?.[STICKY_FOOTER_SLOT], {
               ...options,

package/src/components/CreditCardForm/CreditCardFormStep.tsx

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useMemo } from '@redneckz/uni-jsx/lib/hooks';
 import { useForm } from '../../hooks/useForm/useForm';
+import { useIFrameMode } from '../../retail/hooks/useIFrameMode';
 import { type SectionsRetailProps } from '../../retail/model/InputSectionsType';
 import { type LeadFormState } from '../../retail/model/LeadFormState';
 import { renderStep } from '../../retail/utils/renderStep';
@@ -20,6 +21,7 @@ const PRODUCT_TYPE = 'creditCard';
 
 export const CreditCardFormStep = JSX<CreditCardFormStepProps>(
   ({ step, sections, onPrevStep, onNextStep, onFinish }) => {
+    useIFrameMode();
     const inputs = useMemo(
       () => sections?.flatMap((_: SectionsRetailProps) => _?.inputs || []),
       [sections],

package/src/components/CreditForm/CreditFormStep.tsx

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useMemo } from '@redneckz/uni-jsx/lib/hooks';
 import { useForm } from '../../hooks/useForm/useForm';
+import { useIFrameMode } from '../../retail/hooks/useIFrameMode';
 import { useRetailFormStore } from '../../retail/hooks/useRetailFormStore';
 import { type SectionsRetailProps } from '../../retail/model/InputSectionsType';
 import { type LeadFormState } from '../../retail/model/LeadFormState';
@@ -24,6 +25,7 @@ const PRODUCT_TYPE = 'credit';
 export const CreditFormStep = JSX<CreditFormStepProps>(
   ({ step, sections, programsSource, onPrevStep, onNextStep, onFinish }) => {
     const { programId } = useRetailFormStore();
+    useIFrameMode();
     const calcData = programsSource?.[programId ?? '']; // Need normalizator useForm, to be save defaultParams
 
     const inputs = useMemo(

package/src/components/DebitForm/DebitFormStep.tsx

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useMemo } from '@redneckz/uni-jsx/lib/hooks';
 import { useForm } from '../../hooks/useForm/useForm';
+import { useIFrameMode } from '../../retail/hooks/useIFrameMode';
 import { type SectionsRetailProps } from '../../retail/model/InputSectionsType';
 import type { LeadFormState } from '../../retail/model/LeadFormState';
 import { renderStep } from '../../retail/utils/renderStep';
@@ -20,6 +21,7 @@ const PRODUCT_TYPE = 'debitCard';
 
 export const DebitFormStep = JSX<DebitFormStepProps>(
   ({ step, sections, onPrevStep, onNextStep, onFinish }) => {
+    useIFrameMode();
     const inputs = useMemo(
       () => sections?.flatMap((_: SectionsRetailProps) => _?.inputs ?? []),
       [sections],

package/src/retail/hooks/useIFrameMode.ts

@@ -0,0 +1,45 @@
+import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { useSessionStore } from '@redneckz/uni-jsx/lib/Store/useSessionStore';
+import { initializeExternalStylesheet } from '../../hooks/useExternalNS';
+import { isIFrame } from '../../utils/isIFrame';
+
+export type IFrameStore = {
+  frameLocation: string;
+};
+
+export const useIFrameMode = () => {
+  const isFrame = isIFrame();
+  const height = globalThis.document?.body?.scrollHeight;
+  const sessionStore = useSessionStore<IFrameStore>();
+  const params = new URLSearchParams(decodeURIComponent(globalThis.location?.search));
+
+  const styles = params.get('styles');
+  if (styles) {
+    initializeExternalStylesheet(styles);
+  }
+
+  useEffect(() => {
+    if (isFrame) {
+      globalThis.parent.postMessage({ height: document.body.scrollHeight }, '*');
+    }
+  }, [height, isFrame]);
+
+  useEffect(() => {
+    const handlePostMessage = (event: MessageEvent<{ location: string }>) => {
+      if (!event.data?.location) {
+        return;
+      }
+
+      sessionStore.frameLocation = event.data?.location;
+    };
+    if (isFrame) {
+      globalThis.addEventListener('message', handlePostMessage);
+    }
+
+    return () => {
+      if (isFrame) {
+        globalThis.removeEventListener('message', handlePostMessage);
+      }
+    };
+  }, [isFrame]);
+};

package/src/ui-kit/DatePicker/DatePickerInput.tsx

@@ -70,7 +70,7 @@ export const DatePickerInput = JSX<DatePickerInputProps>(
       <div onClick={onInputClick} className={style('relative', className)}>
         <input
           ref={ref}
-          className="h-full w-full px-m text-l text-black focus-visible:outline-none"
+          className="h-full w-full px-m text-l text-black focus-visible:outline-none rounded-none"
           value={inputValue}
           type="text"
           onChange={handleChange}

package/src/ui-kit/SearchDialog/SearchDialog.tsx

@@ -43,7 +43,7 @@ export const SearchDialog = JSX<SearchDialogProps>(({ initialQuery, navigationIt
       head={<SearchInput className="mt-s" autoFocus={true} {...searchInputProps} />}
       onClose={onClose}
     >
-      <Sitemap navigationItems={searchItems} />
+      <Sitemap navigationItems={searchItems} isSearchPanel={true} />
     </Dialog>
   );
 });

package/src/ui-kit/TabsControl/TabItemInner.tsx

@@ -50,6 +50,7 @@ export const TabItemInner = JSX<TabItemInnerProps>(
           'h-12',
           'block flex-1',
           'cursor-pointer',
+          'rounded-none',
           tabPaddingStyleMap[type],
           isActive ? activeTabBgStyleMap[type] : tabBgStyleMap[type],
         )}

package/src/utils/isIFrame.ts

@@ -0,0 +1 @@
+export const isIFrame = () => globalThis.location !== globalThis?.top?.location;

package/tailwind.config.cjs

@@ -266,6 +266,9 @@ module.exports = {
       },
       borderRadius: {
         icon: '50%',
+        md: 'var(--border-radius-md)',
+        lg: 'var(--border-radius-lg)',
+        none: 'var(--border-radius-none)',
       },
     },
   },