@redneckz/wildless-cms-uni-blocks 0.14.894 → 0.14.896

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

@@ -0,0 +1,83 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { Headline } from '../../components/Headline/Headline';
+import { type HandleAspectsProps } from '../../hooks/useAspects/handleAspects';
+import { type Aspects } from '../../hooks/useAspects/useAspects';
+import { type AspectsDef } from '../../model/AspectsProps';
+import { type HeadlineCommonProps } from '../../model/HeadlineType';
+import { type Picture } from '../../model/Picture';
+import { Dialog } from '../DialogManager/Dialog';
+import { Img } from '../Img/Img';
+import { type LinkButtonContent } from '../LinkButton/LinkButtonContent';
+import { renderButtonsSection } from '../LinkButton/renderButtonsSection';
+import { type PreventableEventWithTarget } from '../PreventableEvent';
+import { RichText } from '../RichText/RichText';
+import { type RichTextProps } from '../RichText/RichTextProps';
+export interface SnowplowPopupDialogContent extends HeadlineCommonProps, RichTextProps {
+  img?: Picture;
+  buttons?: LinkButtonContent[];
+  dataShow?: AspectsDef[];
+  dataClose?: AspectsDef[];
+  delay?: number;
+}
+
+export interface SnowplowPopupDialogProps extends SnowplowPopupDialogContent {
+  onClose?: () => void;
+  aspects: Aspects;
+  handleAspects: (props: HandleAspectsProps) => void;
+}
+
+export const SnowplowPopupDialog = JSX<SnowplowPopupDialogProps>(
+  ({
+    title,
+    description,
+    buttons,
+    img,
+    dataClose,
+    onClose,
+    align,
+    isDotted,
+    __html,
+    itemSize,
+    richVersion,
+    aspects,
+    handleAspects,
+  }) => {
+    const handleClose = useCallback(() => {
+      if (dataClose) {
+        handleAspects({
+          aspectsAttributes: dataClose,
+          aspects,
+          ev: {} as PreventableEventWithTarget,
+        });
+      }
+
+      onClose?.();
+    }, [aspects, dataClose, onClose, handleAspects]);
+
+    return (
+      <Dialog maxWidth="sm" onClose={handleClose}>
+        <div className="flex flex-col gap-lg items-center rounded-md">
+          <Img image={img} />
+          {title || description ? (
+            <Headline
+              align={align}
+              className="w-full"
+              title={title}
+              description={description}
+              headlineVersion="XS"
+              isEmbedded={true}
+            />
+          ) : null}
+          <RichText
+            __html={__html}
+            isDotted={isDotted}
+            itemSize={itemSize}
+            richVersion={richVersion}
+          />
+          {renderButtonsSection(buttons, { isVertical: true })}
+        </div>
+      </Dialog>
+    );
+  },
+);