@pushwoosh/dumb-components 1.1.164 → 1.1.166

package/Modal/components/Modal/styles.js

@@ -17,7 +17,7 @@ export const ModalBox = styled.div.attrs(({
 export const ModalInner = styled.div.withConfig({
   displayName: "ModalInner",
   componentId: "sc-lejcgu-1"
-})(["display:flex;justify-content:center;width:100vw;height:100vh;padding:56px 0;"]);
+})(["display:flex;align-items:flex-start;justify-content:center;width:100vw;height:100vh;padding:56px 0;"]);
 function ModalBoxBase(props) {
   const {
     isOpen,
@@ -44,9 +44,9 @@ export const ModalBoxTrans = styled(ModalBoxBase).withConfig({
 export const ModalContainer = styled.div.withConfig({
   displayName: "ModalContainer",
   componentId: "sc-lejcgu-3"
-})(["display:inline-flex;flex-direction:column;align-items:stretch;justify-content:flex-start;position:relative;width:", ";height:calc(100vh - 2 * 56px);vertical-align:middle;z-index:10;background:", ";& > *{&:first-child{border-top-left-radius:", ";border-top-right-radius:", ";}&:last-child{border-bottom-left-radius:", ";border-bottom-right-radius:", ";}}"], ({
+})(["display:inline-flex;flex-direction:column;align-items:stretch;justify-content:flex-start;position:relative;width:", ";max-height:calc(100vh - 2 * 56px);vertical-align:middle;z-index:10;background:", ";border-radius:", ";& > *{&:first-child{border-top-left-radius:", ";border-top-right-radius:", ";}&:last-child{border-bottom-left-radius:", ";border-bottom-right-radius:", ";}}"], ({
   $width
-}) => $width, Color.CLEAR, ShapeRadius.DIALOG, ShapeRadius.DIALOG, ShapeRadius.DIALOG, ShapeRadius.DIALOG);
+}) => $width, Color.CLEAR, ShapeRadius.DIALOG, ShapeRadius.DIALOG, ShapeRadius.DIALOG, ShapeRadius.DIALOG, ShapeRadius.DIALOG);
 ModalBox.displayName = 'ModalBox';
 ModalInner.displayName = 'ModalInner';
 ModalContainer.displayName = 'ModalContainer';

package/NativeRichMediaPreview/parseNativeRichMediaConfig.d.ts

@@ -3,6 +3,9 @@ import { type NativeRichMediaConfig } from './types';
  * Parses and validates a native rich media config from an object or a JSON
  * string; returns `null` when the input is not a well-formed config — unknown
  * `displayType`, missing block, empty `items`/`segments`, or any required
- * field of the block contract absent or malformed.
+ * field of the block contract absent or malformed. Content that may be
+ * legitimately unfinished in a draft — empty text values, an empty or absent
+ * video `url`, an absent `reward` — is accepted and rendered bare, so live
+ * editor drafts preview without a placeholder.
  */
 export declare function parseNativeRichMediaConfig(content: string | NativeRichMediaConfig): NativeRichMediaConfig | null;

package/NativeRichMediaPreview/parseNativeRichMediaConfig.js

@@ -9,7 +9,13 @@ function isFiniteNumber(value) {
   return typeof value === 'number' && Number.isFinite(value);
 }
 function isText(value) {
-  return isObject(value) && isNonEmptyString(value.text) && isNonEmptyString(value.color);
+  return isObject(value) && typeof value.text === 'string' && isNonEmptyString(value.color);
+}
+function isFilledText(value) {
+  return isText(value) && isNonEmptyString(value.text);
+}
+function isOptionalString(value) {
+  return value === undefined || typeof value === 'string';
 }
 function isOptionalText(value) {
   return value === undefined || isText(value);
@@ -21,7 +27,7 @@ function isAction(value) {
   if (value.type === 'close') {
     return true;
   }
-  return value.type === 'url' && isNonEmptyString(value.url);
+  return value.type === 'url' && isOptionalString(value.url);
 }
 function isOptionalAction(value) {
   return value === undefined || isAction(value);
@@ -45,7 +51,7 @@ function isReward(value) {
   if (!isObject(value)) {
     return false;
   }
-  const hasIdentity = isText(value.title) || isNonEmptyString(value.code);
+  const hasIdentity = isFilledText(value.title) || isNonEmptyString(value.code);
   return hasIdentity && isOptionalText(value.title) && isOptionalText(value.message) && (value.button === undefined || isButton(value.button));
 }
 function isOptionalReward(value) {
@@ -59,18 +65,21 @@ const BLOCK_VALIDATORS = {
   carousel: block => typeof block.showClose === 'boolean' && Array.isArray(block.items) && block.items.length > 0 && block.items.every(item => isObject(item) && isOptionalText(item.title) && isOptionalText(item.message) && isOptionalAction(item.action)),
   fullscreen: block => typeof block.showClose === 'boolean' && isCover(block.cover) && isOptionalText(block.title) && isOptionalText(block.message) && isButtonArray(block.buttons),
   modal: block => typeof block.showClose === 'boolean' && typeof block.dimBackground === 'boolean' && isNonEmptyString(block.background) && isOptionalText(block.title) && isOptionalText(block.message) && isButtonArray(block.buttons),
-  pip: block => typeof block.showClose === 'boolean' && ['bottom-right', 'bottom-left', 'top-right', 'top-left'].includes(block.position) && typeof block.loop === 'boolean' && typeof block.muted === 'boolean' && isNonEmptyString(block.url) && isFiniteNumber(block.width) && isFiniteNumber(block.aspectRatio) && isOptionalAction(block.action),
-  scratchcard: block => typeof block.showClose === 'boolean' && isBackground(block.background) && isFiniteNumber(block.revealThreshold) && isCover(block.cover) && (block.revealButton === undefined || isActionlessButton(block.revealButton)) && isOptionalText(block.title) && isOptionalText(block.message) && isReward(block.reward),
+  pip: block => typeof block.showClose === 'boolean' && ['bottom-right', 'bottom-left', 'top-right', 'top-left'].includes(block.position) && typeof block.loop === 'boolean' && typeof block.muted === 'boolean' && isOptionalString(block.url) && isFiniteNumber(block.width) && isFiniteNumber(block.aspectRatio) && isOptionalAction(block.action),
+  scratchcard: block => typeof block.showClose === 'boolean' && isBackground(block.background) && isFiniteNumber(block.revealThreshold) && isCover(block.cover) && (block.revealButton === undefined || isActionlessButton(block.revealButton)) && isOptionalText(block.title) && isOptionalText(block.message) && isOptionalReward(block.reward),
   sheet: block => typeof block.showClose === 'boolean' && typeof block.dimBackground === 'boolean' && isNonEmptyString(block.background) && isOptionalText(block.title) && isOptionalText(block.message) && isButtonArray(block.buttons),
-  spinwheel: block => typeof block.showClose === 'boolean' && isBackground(block.background) && isFiniteNumber(block.winIndex) && isActionlessButton(block.spinButton) && isOptionalText(block.title) && isOptionalText(block.message) && isReward(block.reward) && isOptionalText(block.loseTitle) && Array.isArray(block.segments) && block.segments.length > 0 && block.segments.every(segment => isObject(segment) && isText(segment.message) && isFiniteNumber(segment.weight) && isOptionalReward(segment.reward)),
+  spinwheel: block => typeof block.showClose === 'boolean' && isBackground(block.background) && isFiniteNumber(block.winIndex) && isActionlessButton(block.spinButton) && isOptionalText(block.title) && isOptionalText(block.message) && isOptionalReward(block.reward) && isOptionalText(block.loseTitle) && Array.isArray(block.segments) && block.segments.length > 0 && block.segments.every(segment => isObject(segment) && isText(segment.message) && isFiniteNumber(segment.weight) && isOptionalReward(segment.reward)),
   stories: block => typeof block.showClose === 'boolean' && typeof block.loop === 'boolean' && Array.isArray(block.items) && block.items.length > 0 && block.items.every(item => isObject(item) && isOptionalText(item.title) && isOptionalText(item.message) && isButtonArray(item.buttons) && isFiniteNumber(item.duration)),
-  video: block => typeof block.showClose === 'boolean' && typeof block.loop === 'boolean' && typeof block.muted === 'boolean' && isNonEmptyString(block.url) && isOptionalText(block.title) && isOptionalText(block.message) && isButtonArray(block.buttons)
+  video: block => typeof block.showClose === 'boolean' && typeof block.loop === 'boolean' && typeof block.muted === 'boolean' && isOptionalString(block.url) && isOptionalText(block.title) && isOptionalText(block.message) && isButtonArray(block.buttons)
 };
 /**
  * Parses and validates a native rich media config from an object or a JSON
  * string; returns `null` when the input is not a well-formed config — unknown
  * `displayType`, missing block, empty `items`/`segments`, or any required
- * field of the block contract absent or malformed.
+ * field of the block contract absent or malformed. Content that may be
+ * legitimately unfinished in a draft — empty text values, an empty or absent
+ * video `url`, an absent `reward` — is accepted and rendered bare, so live
+ * editor drafts preview without a placeholder.
  */
 export function parseNativeRichMediaConfig(content) {
   let raw = content;

package/NativeRichMediaPreview/types.d.ts

@@ -22,9 +22,11 @@ export type NativeRichMediaCover = {
 /** Available actions. */
 export type NativeRichMediaAction = {
     type: 'close';
-} | {
+}
+/** `url` is required by the SDK, but may be empty or absent in a draft. */
+ | {
     type: 'url';
-    url: string;
+    url?: string;
 };
 /** Button block. */
 export type NativeRichMediaButton = {
@@ -162,8 +164,8 @@ export type NativeRichMediaVideoBlock = {
     loop: boolean;
     /** Start playback muted. */
     muted: boolean;
-    /** Video URL. */
-    url: string;
+    /** Video URL; required by the SDK, may be empty or absent in a draft. */
+    url?: string;
     /** Poster image URL shown before playback. */
     poster?: string;
     /** Image URL shown when the video cannot be played. */
@@ -181,8 +183,8 @@ export type NativeRichMediaPipBlock = {
     loop: boolean;
     /** Start playback muted. */
     muted: boolean;
-    /** Video URL. */
-    url: string;
+    /** Video URL; required by the SDK, may be empty or absent in a draft. */
+    url?: string;
     /** Poster image URL shown before playback. */
     poster?: string;
     /** Image URL shown when the video cannot be played. */
@@ -212,8 +214,8 @@ export type NativeRichMediaScratchcardBlock = {
     title?: NativeRichMediaText;
     /** Message. */
     message?: NativeRichMediaText;
-    /** Reward revealed under the cover. */
-    reward: NativeRichMediaReward;
+    /** Reward revealed under the cover; required by the SDK, may be absent in a draft. */
+    reward?: NativeRichMediaReward;
 };
 /** Content of a `spinwheel` rich media. */
 export type NativeRichMediaSpinwheelBlock = {
@@ -229,8 +231,8 @@ export type NativeRichMediaSpinwheelBlock = {
     winIndex: number;
     /** Spin button, including its own tap action. */
     spinButton: Omit<NativeRichMediaButton, 'action'>;
-    /** Reward shown after a winning spin. */
-    reward: NativeRichMediaReward;
+    /** Reward shown after a winning spin; required by the SDK, may be absent in a draft. */
+    reward?: NativeRichMediaReward;
     /** Heading shown after a losing spin. */
     loseTitle?: NativeRichMediaText;
     /** Wheel sectors. */

package/NativeRichMediaPreview/views/NativeRichMediaBannerView/styles.js

@@ -13,4 +13,4 @@ export const Card = styled.div.withConfig({
 export const CloseGlyph = styled.div.withConfig({
   displayName: "CloseGlyph",
   componentId: "sc-1fs78cm-1"
-})(["flex:none;width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.6);font-size:", ";font-weight:", ";user-select:none;cursor:pointer;"], FontSize.SMALL, FontWeight.BOLD);
+})(["flex:none;margin-left:auto;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,0.4);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.6);font-size:", ";font-weight:", ";user-select:none;cursor:pointer;"], FontSize.SMALL, FontWeight.BOLD);

package/NativeRichMediaPreview/views/NativeRichMediaModalView/styles.js

@@ -5,4 +5,4 @@ export const Card = styled(SharedCard).attrs({
 }).withConfig({
   displayName: "Card",
   componentId: "sc-1std439-0"
-})([""]);
+})(["min-height:70px;"]);

package/NativeRichMediaPreview/views/NativeRichMediaScratchcardView/NativeRichMediaScratchcardView.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Card, HintOverlay, HintText, RevealArea, RevealButtonText, RewardSlot } from './styles';
+import { Card, HintOverlay, HintText, RevealArea, RevealButtonText, RewardSlot, TextBlock } from './styles';
 import { NativeRichMediaCloseChip } from '../../components/NativeRichMediaCloseChip';
 import { NativeRichMediaCoverImg } from '../../components/NativeRichMediaCoverImg';
 import { NativeRichMediaRewardPanel } from '../../components/NativeRichMediaRewardPanel';
@@ -21,15 +21,17 @@ export function NativeRichMediaScratchcardView(props) {
   const revealButton = asButtonValue(block.revealButton);
   return _jsxs(Card, {
     "$background": surfaceBackground(block.background, '#FFFFFF'),
-    children: [title.text && _jsx(NativeRichMediaTitle, {
-      "$color": title.color,
-      "$align": "center",
-      children: title.text
-    }), message.text && _jsx(NativeRichMediaText, {
-      "$color": message.color,
-      "$marginTop": 4,
-      "$align": "center",
-      children: message.text
+    children: [(title.text || message.text) && _jsxs(TextBlock, {
+      children: [title.text && _jsx(NativeRichMediaTitle, {
+        "$color": title.color,
+        "$align": "center",
+        children: title.text
+      }), message.text && _jsx(NativeRichMediaText, {
+        "$color": message.color,
+        "$marginTop": 4,
+        "$align": "center",
+        children: message.text
+      })]
     }), _jsxs(RevealArea, {
       children: [_jsx(RewardSlot, {
         children: _jsx(NativeRichMediaRewardPanel, {

package/NativeRichMediaPreview/views/NativeRichMediaScratchcardView/styles.d.ts

@@ -4,6 +4,7 @@ export declare const Card: import("styled-components").StyledComponent<"div", an
 } & {
     $padding: string;
 }, "$padding">;
+export declare const TextBlock: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const RevealArea: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const RewardSlot: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const HintOverlay: import("styled-components").StyledComponent<"div", any, {

package/NativeRichMediaPreview/views/NativeRichMediaScratchcardView/styles.js

@@ -4,35 +4,39 @@ import { NativeRichMediaText } from '../../components/NativeRichMediaText';
 import { mixHex } from '../../helpers';
 import { Card as SharedCard } from '../shared/styles';
 export const Card = styled(SharedCard).attrs({
-  $padding: '28px 24px 16px'
+  $padding: '24px'
 }).withConfig({
   displayName: "Card",
   componentId: "sc-nguevq-0"
 })([""]);
+export const TextBlock = styled.div.withConfig({
+  displayName: "TextBlock",
+  componentId: "sc-nguevq-1"
+})(["margin-bottom:14px;"]);
 export const RevealArea = styled.div.withConfig({
   displayName: "RevealArea",
-  componentId: "sc-nguevq-1"
-})(["position:relative;margin-top:14px;height:179px;border-radius:18px;background:#F7F7F7;overflow:hidden;"]);
+  componentId: "sc-nguevq-2"
+})(["position:relative;height:179px;border-radius:18px;background:#F7F7F7;overflow:hidden;"]);
 export const RewardSlot = styled.div.withConfig({
   displayName: "RewardSlot",
-  componentId: "sc-nguevq-2"
+  componentId: "sc-nguevq-3"
 })(["position:absolute;left:16px;right:16px;top:50%;transform:translateY(-50%);"]);
 export const HintOverlay = styled.div.withConfig({
   displayName: "HintOverlay",
-  componentId: "sc-nguevq-3"
+  componentId: "sc-nguevq-4"
 })(["position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:", ";"], ({
   $coverBase
 }) => `linear-gradient(135deg, ${mixHex($coverBase, '#FFFFFF', 0.4)}, ${$coverBase} 45%, ${mixHex($coverBase, '#000000', 0.12)})`);
 export const HintText = styled(NativeRichMediaText).withConfig({
   displayName: "HintText",
-  componentId: "sc-nguevq-4"
+  componentId: "sc-nguevq-5"
 })(["font-weight:", ";"], FontWeight.MEDIUM);
 export const RevealButtonText = styled(NativeRichMediaText).attrs({
   $align: 'center',
   $marginTop: 14
 }).withConfig({
   displayName: "RevealButtonText",
-  componentId: "sc-nguevq-5"
+  componentId: "sc-nguevq-6"
 })(["font-weight:", ";width:fit-content;margin-left:auto;margin-right:auto;background:", ";border-radius:", "px;padding:10px 16px;border:1px solid ", ";user-select:none;cursor:pointer;"], FontWeight.MEDIUM, ({
   $background
 }) => $background, ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.1.164",
+  "version": "1.1.166",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",