@nascentdigital/funnel-ui 4.4.18

package/dist/server/blocks/Outcome.js

@@ -0,0 +1,489 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Outcome = Outcome;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const fields_1 = require("../fields");
+const panels_1 = require("../panels");
+const schema_1 = require("../schema");
+const Block_1 = require("./Block");
+const OutcomeDetail_1 = require("./OutcomeDetail");
+// component
+function Outcome(_a) {
+    var _b, _c, _d;
+    var { className, titleTag = 'span', headlineTag = 'h2', captionTag = 'div', detailsTag = 'ul', detailTag = 'li', outcome, visualLoading } = _a, props = __rest(_a, ["className", "titleTag", "headlineTag", "captionTag", "detailsTag", "detailTag", "outcome", "visualLoading"]);
+    // don't render if missing model
+    if (!outcome) {
+        console.warn('[Outcome] attempted to render without outcome model');
+        return null;
+    }
+    // destructure props
+    const config = (_b = outcome.config) !== null && _b !== void 0 ? _b : {};
+    const fields = (_c = outcome.fields) !== null && _c !== void 0 ? _c : {};
+    const { title: titleRaw, headline: headlineRaw, caption: captionRaw, link: linkRaw, visual: visualRaw, details: detailsRaw } = fields;
+    const title = titleRaw === null || titleRaw === void 0 ? void 0 : titleRaw.value;
+    const headline = headlineRaw === null || headlineRaw === void 0 ? void 0 : headlineRaw.value;
+    const caption = captionRaw === null || captionRaw === void 0 ? void 0 : captionRaw.value;
+    const link = linkRaw === null || linkRaw === void 0 ? void 0 : linkRaw.value;
+    const visual = visualRaw === null || visualRaw === void 0 ? void 0 : visualRaw.value;
+    const details = ((_d = detailsRaw === null || detailsRaw === void 0 ? void 0 : detailsRaw.value) !== null && _d !== void 0 ? _d : []);
+    // panel layout
+    const layout = getOutcomeLayout({ fields, config });
+    const getPanel = ({ className, panel }) => {
+        var _a;
+        switch (panel.type) {
+            case 'message':
+                return ((0, jsx_runtime_1.jsx)(panels_1.MessagePanel, { className: (0, classnames_1.default)(className, 'nd-Outcome-message'), panel: panel, title: title, titleTag: titleTag, headline: headline, headlineTag: headlineTag, caption: caption, captionTag: captionTag, ctas: link }));
+            case 'visual':
+                return visual
+                    ?
+                        (0, jsx_runtime_1.jsx)(panels_1.VisualPanel, { className: (0, classnames_1.default)(className, 'nd-Outcome-visual'), panel: panel, visual: visual, anchor: (_a = funnel_core_1.Schema.EnumField.Value.fromData(config.visualAnchor)) !== null && _a !== void 0 ? _a : 'center', visualLoading: visualLoading })
+                    : undefined;
+            case 'list':
+                return renderDetails({
+                    className,
+                    panel,
+                    details,
+                    detailsTag,
+                    detailTag
+                });
+        }
+    };
+    // render block
+    return ((0, jsx_runtime_1.jsx)(Block_1.Block, Object.assign({ className: "nd-Outcome", config: outcome.config, layout: layout, renderPanel: getPanel }, props)));
+}
+// extension
+(function (Outcome) {
+    let IntroPosition;
+    (function (IntroPosition) {
+        // schema
+        IntroPosition.Enum = {
+            left: { name: 'Top-Left', hint: 'Place headline on top-left of the block.' },
+            center: { name: 'Top-Center', hint: 'Place headline on top-center of the block.' },
+            right: { name: 'Top-Right', hint: 'Place headline on top-right of the block.' },
+            inline: { name: 'Inline', hint: 'Place headline beside the visual.' },
+        };
+        IntroPosition.schema = funnel_core_1.Schema.Field.enumeration({
+            name: 'Intro Position',
+            semantics: 'dropdown',
+            hint: 'Set position',
+            description: 'Control the positioning of the intro.',
+            options: IntroPosition.Enum,
+            defaultOption: 'inline'
+        });
+        // helpers
+        function getClassName(position) {
+            switch (position) {
+                case 'inline':
+                    return 'nd-Block-intro-inline';
+                case 'left':
+                    return 'nd-Block-intro-left';
+                case 'center':
+                    return 'nd-Block-intro-center';
+                case 'right':
+                    return 'nd-Block-intro-right';
+                default:
+                    console.warn('[Outcome] unrecognized intro position: ', position);
+                    return 'nd-Block-intro-inline';
+            }
+        }
+        IntroPosition.getClassName = getClassName;
+    })(IntroPosition = Outcome.IntroPosition || (Outcome.IntroPosition = {}));
+    // schema
+    Outcome.configSchema = Object.assign(Object.assign({}, schema_1.BlockConfig.Presets.ThemeOnly.schema), { introPosition: IntroPosition.schema.optional(), introTextAlignment: schema_1.TextAlignment.schema.rename('Intro Text Alignment').optional(), introWidth: schema_1.ItemSize.schema
+            .modify({ semantics: 'segmented', name: 'Intro Width' })
+            .keepOptions('md', 'lg')
+            .setDefault('md')
+            .optional(), detailsWidth: schema_1.ItemSize.schema
+            .modify({ semantics: 'segmented', name: 'Details Width' })
+            .keepOptions('md', 'lg')
+            .setDefault('md')
+            .optional(), detailsPosition: schema_1.ItemAlignment.Horizontal.schema.rename('Details Position').optional(), visualPosition: schema_1.ItemPosition.schema
+            .modify({ name: 'Visual Position' })
+            .keepOptions('left', 'right', 'top', 'bottom')
+            .setDefault('left')
+            .optional(), visualAspect: schema_1.AspectRatio.schema
+            .rename('Visual Aspect')
+            .optional(), visualAnchor: schema_1.Anchor.schema
+            .rename('Visual Anchor')
+            .optional(), contentAlignment: schema_1.ItemAlignment.Vertical.schema.rename('Content Alignment').optional() });
+    const fieldsSchema = {
+        visual: fields_1.Visual.schema.modify({
+            tags: ['lifestyle', 'person', 'product', 'brand']
+        }).optional(),
+        title: fields_1.Title.schema.optional(),
+        headline: fields_1.Headline.schema,
+        caption: fields_1.Caption.schema.optional(),
+        link: funnel_core_1.Schema.Field.link({ name: 'Link' }).optional(),
+        details: funnel_core_1.Schema.Field.list({
+            name: 'Outcome Details',
+            itemTypes: {
+                detail: OutcomeDetail_1.OutcomeDetail.schema
+            },
+            min: 1,
+            max: 3
+        }).optional()
+    };
+    Outcome.schema = funnel_core_1.Schema.Block.create({
+        id: '_nd-outcome',
+        name: 'Outcome',
+        version: 1,
+        config: Outcome.configSchema,
+        fields: fieldsSchema,
+        getConfig: getOutcomeConfig,
+        getLayout: getOutcomeLayout
+    });
+})(Outcome || (exports.Outcome = Outcome = {}));
+// helpers
+function getOutcomeConfig(args) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+    // parse args
+    const { configSchema, config, fields } = args;
+    // current config helpers
+    const visual = fields === null || fields === void 0 ? void 0 : fields.visual;
+    const hasVisual = ((_a = fields === null || fields === void 0 ? void 0 : fields.visual) === null || _a === void 0 ? void 0 : _a.value) !== undefined;
+    const hasDetails = !!((_c = (_b = fields === null || fields === void 0 ? void 0 : fields.details) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.length);
+    const visualConfig = panels_1.VisualPanel.getConfig({ visual, config, aspectKey: 'visualAspect', anchorKey: 'visualAnchor' });
+    const defaultConfig = Object.assign(Object.assign(Object.assign(Object.assign({}, config), { theme: funnel_core_1.Schema.EnumField.Value.toData('default'), introPosition: funnel_core_1.Schema.EnumField.Value.toData('left'), introTextAlignment: funnel_core_1.Schema.EnumField.Value.toData('left'), introWidth: funnel_core_1.Schema.EnumField.Value.toData('md'), detailsPosition: funnel_core_1.Schema.EnumField.Value.toData('start'), detailsWidth: funnel_core_1.Schema.EnumField.Value.toData('md'), visualPosition: funnel_core_1.Schema.EnumField.Value.toData('left') }), visualConfig.defaultConfig), { contentAlignment: funnel_core_1.Schema.EnumField.Value.toData('start') });
+    // current values or fallback to a valid value
+    const introPosition = (_d = funnel_core_1.Schema.EnumField.Value.fromData(config.introPosition)) !== null && _d !== void 0 ? _d : (_e = defaultConfig.introPosition) === null || _e === void 0 ? void 0 : _e.value;
+    const introTextAlignment = (_f = funnel_core_1.Schema.EnumField.Value.fromData(config.introTextAlignment)) !== null && _f !== void 0 ? _f : (_g = defaultConfig.introTextAlignment) === null || _g === void 0 ? void 0 : _g.value;
+    const introWidth = (_h = funnel_core_1.Schema.EnumField.Value.fromData(config.introWidth)) !== null && _h !== void 0 ? _h : (_j = defaultConfig.introWidth) === null || _j === void 0 ? void 0 : _j.value;
+    const detailsPosition = (_k = funnel_core_1.Schema.EnumField.Value.fromData(config.detailsPosition)) !== null && _k !== void 0 ? _k : (_l = defaultConfig.detailsPosition) === null || _l === void 0 ? void 0 : _l.value;
+    const detailsWidth = (_m = funnel_core_1.Schema.EnumField.Value.fromData(config.detailsWidth)) !== null && _m !== void 0 ? _m : (_o = defaultConfig.detailsWidth) === null || _o === void 0 ? void 0 : _o.value;
+    const visualPosition = (_p = funnel_core_1.Schema.EnumField.Value.fromData(config.visualPosition)) !== null && _p !== void 0 ? _p : (_q = defaultConfig.visualPosition) === null || _q === void 0 ? void 0 : _q.value;
+    const contentAlignment = (_r = funnel_core_1.Schema.EnumField.Value.fromData(config.contentAlignment)) !== null && _r !== void 0 ? _r : (_s = defaultConfig.contentAlignment) === null || _s === void 0 ? void 0 : _s.value;
+    // has details and has visual
+    if (hasDetails && hasVisual) {
+        const updatedConfigSchema = Object.assign(Object.assign({}, configSchema), visualConfig.configSchema);
+        let newVisualPosition = visualPosition;
+        // if intro is inline, drop introTextAlignment, introWidth and reduce visual position options
+        if (introPosition === 'inline') {
+            delete updatedConfigSchema.introTextAlignment;
+            delete updatedConfigSchema.introWidth;
+            const newVisualPositionOptions = {
+                left: { name: 'Left', hint: 'Aligns the item to the left.' },
+                right: { name: 'Right', hint: 'Aligns the item to the right.' },
+            };
+            // use the current visual position as the new one if it's valid. otherwise, fallback to left
+            newVisualPosition =
+                Object.keys(newVisualPositionOptions).includes(visualPosition) ? visualPosition : 'left';
+            updatedConfigSchema.visualPosition = configSchema.visualPosition.modify({
+                semantics: 'segmented',
+                options: newVisualPositionOptions
+            });
+        }
+        if (newVisualPosition === 'left' || newVisualPosition === 'right') {
+            delete updatedConfigSchema.detailsWidth;
+            delete updatedConfigSchema.detailsPosition;
+        }
+        // return configuration
+        return {
+            updatedConfigSchema,
+            updatedConfig: Object.assign(Object.assign(Object.assign(Object.assign({}, config), { introPosition: funnel_core_1.Schema.EnumField.Value.toData(introPosition), introTextAlignment: funnel_core_1.Schema.EnumField.Value.toData(introTextAlignment), introWidth: funnel_core_1.Schema.EnumField.Value.toData(introWidth), detailsWidth: funnel_core_1.Schema.EnumField.Value.toData(detailsWidth), detailsPosition: funnel_core_1.Schema.EnumField.Value.toData(detailsPosition), visualPosition: funnel_core_1.Schema.EnumField.Value.toData(newVisualPosition) }), visualConfig.config), { contentAlignment: funnel_core_1.Schema.EnumField.Value.toData(contentAlignment) }),
+            defaultConfig
+        };
+    }
+    // has only visual
+    else if (hasVisual) {
+        const newVisualPositionOptions = {
+            left: { name: 'Left', hint: 'Aligns the item to the left.' },
+            right: { name: 'Right', hint: 'Aligns the item to the right.' },
+        };
+        // use the current visual position as the new one if it's valid. otherwise, fallback to left
+        const newVisualPosition = Object.keys(newVisualPositionOptions).includes(introPosition) ? visualPosition : 'left';
+        return {
+            updatedConfigSchema: Object.assign(Object.assign({ theme: configSchema.theme, visualPosition: configSchema.visualPosition.modify({
+                    semantics: 'segmented',
+                    options: newVisualPositionOptions
+                }) }, visualConfig.configSchema), { contentAlignment: configSchema.contentAlignment }),
+            updatedConfig: Object.assign(Object.assign(Object.assign(Object.assign({}, config), { visualPosition: funnel_core_1.Schema.EnumField.Value.toData(newVisualPosition) }), visualConfig.config), { contentAlignment: funnel_core_1.Schema.EnumField.Value.toData(contentAlignment) }),
+            defaultConfig
+        };
+    }
+    // has only details
+    else if (hasDetails) {
+        // use the current intro position as the new one if it's valid. otherwise, fallback to left
+        const newIntroPositionOptions = {
+            left: { name: 'Left', hint: 'Align all the text inside the intro to left.' },
+            right: { name: 'Right', hint: 'Align all the text inside the intro to right.' }
+        };
+        const newIntroPosition = Object.keys(newIntroPositionOptions).includes(introPosition) ? introPosition : 'left';
+        // return configuration
+        return {
+            updatedConfigSchema: {
+                theme: configSchema.theme,
+                introPosition: configSchema.introPosition.modify({
+                    semantics: 'segmented',
+                    options: newIntroPositionOptions
+                }),
+                contentAlignment: configSchema.contentAlignment
+            },
+            updatedConfig: Object.assign(Object.assign({}, config), { introPosition: funnel_core_1.Schema.EnumField.Value.toData(newIntroPosition), contentAlignment: funnel_core_1.Schema.EnumField.Value.toData(contentAlignment) }),
+            defaultConfig
+        };
+    }
+    // has only intro
+    else {
+        // define new intro position options
+        const newIntroPositionOptions = {
+            left: { name: 'Left', hint: 'Align all the text inside the intro to left.' },
+            center: { name: 'Center', hint: 'Align all the text inside the intro to center.' },
+            right: { name: 'Right', hint: 'Align all the text inside the intro to right.' }
+        };
+        // use the current intro position as the new one if it's valid. otherwise, fallback to left
+        const newIntroPosition = Object.keys(newIntroPositionOptions).includes(introPosition) ? introPosition : 'left';
+        return {
+            updatedConfigSchema: {
+                theme: configSchema.theme,
+                introPosition: configSchema.introPosition.modify({
+                    semantics: 'segmented',
+                    options: newIntroPositionOptions
+                }),
+                introTextAlignment: configSchema.introTextAlignment,
+                introWidth: configSchema.introWidth
+            },
+            updatedConfig: Object.assign(Object.assign({}, config), { introPosition: funnel_core_1.Schema.EnumField.Value.toData(newIntroPosition), introTextAlignment: funnel_core_1.Schema.EnumField.Value.toData(introTextAlignment), introWidth: funnel_core_1.Schema.EnumField.Value.toData(introWidth) }),
+            defaultConfig
+        };
+    }
+}
+function getOutcomeLayout(args) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    // parse args
+    const { config, fields } = args;
+    const hasVisual = ((_a = fields === null || fields === void 0 ? void 0 : fields.visual) === null || _a === void 0 ? void 0 : _a.value) !== undefined;
+    const hasDetails = !!((_c = (_b = fields === null || fields === void 0 ? void 0 : fields.details) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.length);
+    const introPosition = (_d = funnel_core_1.Schema.EnumField.Value.fromData(config.introPosition)) !== null && _d !== void 0 ? _d : 'left';
+    const introAlign = introPosition === 'center'
+        ? 'center'
+        : introPosition === 'right'
+            ? 'end'
+            : 'start';
+    const introTextAlign = (_e = funnel_core_1.Schema.EnumField.Value.fromData(config.introTextAlignment)) !== null && _e !== void 0 ? _e : 'left';
+    const introWidth = (_f = funnel_core_1.Schema.EnumField.Value.fromData(config.introWidth)) !== null && _f !== void 0 ? _f : 'md';
+    const visualPosition = (_g = funnel_core_1.Schema.EnumField.Value.fromData(config.visualPosition)) !== null && _g !== void 0 ? _g : 'left';
+    const detailsWidth = (_h = funnel_core_1.Schema.EnumField.Value.fromData(config.detailsWidth)) !== null && _h !== void 0 ? _h : 'md';
+    const detailsPosition = (_j = funnel_core_1.Schema.EnumField.Value.fromData(config.detailsPosition)) !== null && _j !== void 0 ? _j : 'start';
+    const visualAspect = (_k = funnel_core_1.Schema.EnumField.Value.fromData(config.visualAspect)) !== null && _k !== void 0 ? _k : 'auto';
+    const contentAlign = (_l = funnel_core_1.Schema.EnumField.Value.fromData(config.contentAlignment)) !== null && _l !== void 0 ? _l : 'start';
+    // create layout with all parts
+    let layout;
+    if (hasDetails && hasVisual) {
+        layout = introPosition === 'inline'
+            // inline message
+            ? visualPosition === 'left'
+                // language=XML (visual left)
+                ? `
+          <block 
+            xmlns="nd:block" 
+            name="Inline, Visual-Left"
+          >
+            <row alignY="${contentAlign}">
+              <visual aspect="${visualAspect}" mobileOrder="last" />
+              <col>
+                <message textAlign="${introTextAlign}" />
+                <list itemType="message" />
+              </col>
+            </row>
+          </block>
+        `
+                // language=XML (visual right)
+                : `
+          <block 
+            xmlns="nd:block" 
+            name="Inline, Visual-Right"
+          >
+            <row alignY="${contentAlign}">
+              <col>
+                <message textAlign="${introTextAlign}" />
+                <list itemType="message" />
+              </col>
+              <visual aspect="${visualAspect}"  />
+            </row>
+          </block>
+        `
+            // top message
+            : visualPosition === 'left'
+                // language=XML (visual left)
+                ? `
+            <block 
+              xmlns="nd:block" 
+              name="Intro-${funnel_core_1.StringUtils.capitalize(introPosition)}, Visual-Left"
+            >
+              <col>
+                <message
+                  size="${introWidth}"
+                  alignX="${introAlign}"
+                  textAlign="${introTextAlign}"
+                />
+                <row alignY="${contentAlign}">
+                  <visual aspect="${visualAspect}" mobileOrder="last" />
+                  <list itemType="message" />
+                </row>
+              </col>
+            </block>
+          `
+                : visualPosition === 'right' ?
+                    // language=XML (visual right)
+                    `
+          <block 
+            xmlns="nd:block" 
+            name="Intro-${funnel_core_1.StringUtils.capitalize(introPosition)}, Visual-Right"
+          >
+            <col>
+              <message
+                size="${introWidth}"
+                alignX="${introAlign}"
+                textAlign="${introTextAlign}"
+              />
+              <row alignY="${contentAlign}">
+                <list itemType="message" />
+                <visual aspect="${visualAspect}" />
+              </row>
+            </col>
+          </block>
+        `
+                    : visualPosition === 'top' ?
+                        // language=XML (visual top)
+                        `
+            <block 
+              xmlns="nd:block" 
+              name="Intro-${funnel_core_1.StringUtils.capitalize(introPosition)}, Visual-Top"
+            >
+              <col>
+                <message
+                  size="${introWidth}"
+                  alignX="${introAlign}"
+                  textAlign="${introTextAlign}"
+                />
+                <visual aspect="${visualAspect}" />
+                <list
+                  itemType="message"
+                  size="${detailsWidth}"
+                  alignX="${detailsPosition}" />
+              </col>
+            </block>
+          `
+                        // language=XML (visual bottom)
+                        : `
+          <block 
+            xmlns="nd:block" 
+            name="Intro-${funnel_core_1.StringUtils.capitalize(introPosition)}, Visual-Bottom"
+          >
+            <col>
+              <message
+                size="${introWidth}"
+                alignX="${introAlign}"
+                textAlign="${introTextAlign}"
+              />
+              <list
+                itemType="message"
+                size="${detailsWidth}"
+                alignX="${detailsPosition}" />
+              <visual aspect="${visualAspect}" />
+            </col>
+          </block>
+        `;
+    }
+    // or layout with only visual
+    else if (hasVisual) {
+        layout = visualPosition === 'left'
+            // language=XML (visual left)
+            ? `
+        <block 
+          xmlns="nd:block" 
+          name="Visual-Left"
+        >
+          <row alignY="${contentAlign}">
+            <visual aspect="${visualAspect}" />
+            <message textAlign="${introTextAlign}" mobileOrder="first" />
+          </row>
+        </block>
+      `
+            // language=XML (visual right)
+            : `
+        <block 
+          xmlns="nd:block" 
+          name="Visual-Left"
+        >
+          <row alignY="${contentAlign}">
+            <message textAlign="${introTextAlign}" />
+            <visual aspect="${visualAspect}" />
+          </row>
+        </block>
+      `;
+    }
+    // or layout with only details
+    else if (hasDetails) {
+        layout = introPosition === 'left'
+            // language=XML (visual message left)
+            ? `
+        <block 
+          xmlns="nd:block" 
+          name="Intro-Left"
+        >
+          <row alignY="${contentAlign}">
+            <message textAlign="${introTextAlign}" />
+            <list itemType="message" />
+          </row>
+        </block>
+      `
+            // language=XML (visual right)
+            : `
+        <block 
+          xmlns="nd:block" 
+          name="Intro-Left"
+        >
+          <row alignY="${contentAlign}">
+            <list itemType="message" />
+            <message textAlign="${introTextAlign}" mobileOrder="first" />
+          </row>
+        </block>
+      `;
+    }
+    // or with only intro
+    else {
+        // language=XML
+        layout = `
+      <block 
+        xmlns="nd:block" 
+        name="Intro-only, ${funnel_core_1.StringUtils.capitalize(introPosition)}"
+      >
+        <col>
+          <message 
+            size="${introWidth}" 
+            alignX="${introAlign}" 
+            textAlign="${introTextAlign}" 
+          />
+        </col>
+      </block>
+    `;
+    }
+    // return skeleton
+    return funnel_core_1.BlockLayout.parse(layout);
+}
+function renderDetails({ className, panel, details, detailsTag, detailTag }) {
+    // skip if there's no details
+    if (details.length === 0) {
+        return undefined;
+    }
+    // render details
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, 'nd-Outcome-detailsWrap'), children: (0, react_1.createElement)(detailsTag, { className: 'nd-Outcome-details' }, details.map(detail => ((0, jsx_runtime_1.jsx)(OutcomeDetail_1.OutcomeDetail, { as: detailTag, detail: detail }, detail.id)))) }));
+}