@mindful-web/marko-web-theme-monorail 1.0.0

package/components/identity-x/newsletter-footer.marko.js

@@ -0,0 +1,100 @@
+// Compiled using marko@4.20.2 - DO NOT EDIT
+"use strict";
+
+var marko_template = module.exports = require("marko/dist/html").t(__filename),
+    marko_componentType = "/@mindful-web/marko-web-theme-monorail$1.0.0/components/identity-x/newsletter-footer.marko",
+    marko_component = require("./newsletter-footer.marko"),
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_image_module = require("@mindful-web/image"),
+    image_module = module_image_module.default || module_image_module,
+    buildImgixUrl = module_image_module.buildImgixUrl,
+    module_objectPath_module = require("@mindful-web/object-path"),
+    objectPath_module = module_objectPath_module.default || module_objectPath_module,
+    get = module_objectPath_module.get,
+    module_defaultValue = require("@mindful-web/marko-core/utils/default-value"),
+    defaultValue = module_defaultValue.default || module_defaultValue,
+    marko_web_browser_component_template = require("@mindful-web/marko-web/components/browser-component.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_browser_component_tag = marko_loadTag(marko_web_browser_component_template),
+    marko_web_identity_x_context_template = require("@mindful-web/marko-web-identity-x/components/context.marko"),
+    marko_web_identity_x_context_tag = marko_loadTag(marko_web_identity_x_context_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const blockName = "newsletter-signup-banner";
+
+  const { config, site, req } = out.global;
+
+  const { identityX } = req;
+
+  const additionalEventData = defaultValue(input.additionalEventData, {});
+
+  const buttonLabels = defaultValue(input.buttonLabels, { continue: "Sign Up" })
+
+  const loginEmailPlaceholder = defaultValue(input.loginEmailPlaceholder, "example@gmail.com");
+
+  const source = defaultValue(input.source, "newsletterSignup");
+
+  const configName = defaultValue(input.configName, "signupFooter");
+
+  const {
+  name,
+  description,
+  imagePath,
+  disabled,
+} = site.getAsObject(`newsletter.${configName}`);
+
+  const lang = site.config.lang || "en";
+
+  if (Boolean(identityX)) {
+    marko_web_identity_x_context_tag({
+        renderBody: function(out, { user, isEnabled, application }) {
+          if (name && description) {
+            marko_web_browser_component_tag({
+                name: "IdentityXNewsletterFormFooter",
+                props: {
+                    modifiers: [
+                        "footer"
+                      ],
+                    siteName: config.website("name"),
+                    name: name,
+                    description: description,
+                    disabled: disabled,
+                    lang: lang,
+                    additionalEventData: additionalEventData,
+                    source: source,
+                    type: "footer",
+                    activeUser: user,
+                    endpoints: identityX.config.getEndpoints(),
+                    buttonLabels: buttonLabels,
+                    redirect: input.redirect,
+                    loginEmailPlaceholder: loginEmailPlaceholder,
+                    loginEmailLabel: input.loginEmailLabel,
+                    actionText: input.actionText,
+                    consentPolicy: input.consentPolicy || get(application, "organization.consentPolicy"),
+                    emailConsentRequest: get(application, "organization.emailConsentRequest"),
+                    regionalConsentPolicies: get(application, "organization.regionalConsentPolicies"),
+                    appContextId: identityX.config.get("appContextId"),
+                    requiredCreateFields: identityX.config.getRequiredCreateFields(),
+                    defaultFieldLabels: identityX.config.get("defaultFieldLabels")
+                  }
+              }, out, __component, "1");
+          }
+        }
+      }, out, __component, "0");
+  }
+}
+
+marko_template._ = marko_renderer(render, {
+    e_: marko_componentType
+  }, marko_component);
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-theme-monorail$1.0.0/components/identity-x/newsletter-footer.marko",
+    component: "./newsletter-footer.marko",
+    tags: [
+      "@mindful-web/marko-web/components/browser-component.marko",
+      "@mindful-web/marko-web-identity-x/components/context.marko"
+    ]
+  };

package/components/identity-x/newsletter-inline.marko

@@ -0,0 +1,22 @@
+import buildProps from "@mindful-web/marko-web-theme-monorail/utils/site-idx-newsletter-menu-props";
+
+$ const { identityX } =  out.global.req;
+
+<if(Boolean(identityX))>
+  <marko-web-identity-x-context|{ user, application }|>
+    $ const props = buildProps({
+        out,
+        input: {
+          ...input,
+          user,
+          application,
+        }
+      });
+    <if(props.name && props.description)>
+      <marko-web-browser-component
+        name="IdentityXNewsletterFormInline"
+        props=props
+      />
+    </if>
+  </marko-web-identity-x-context>
+</if>

package/components/identity-x/newsletter-inline.marko.js

@@ -0,0 +1,55 @@
+// Compiled using marko@4.20.2 - DO NOT EDIT
+"use strict";
+
+var marko_template = module.exports = require("marko/dist/html").t(__filename),
+    marko_componentType = "/@mindful-web/marko-web-theme-monorail$1.0.0/components/identity-x/newsletter-inline.marko",
+    marko_component = require("./newsletter-inline.marko"),
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_buildProps = require("@mindful-web/marko-web-theme-monorail/utils/site-idx-newsletter-menu-props"),
+    buildProps = module_buildProps.default || module_buildProps,
+    marko_web_browser_component_template = require("@mindful-web/marko-web/components/browser-component.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_browser_component_tag = marko_loadTag(marko_web_browser_component_template),
+    marko_web_identity_x_context_template = require("@mindful-web/marko-web-identity-x/components/context.marko"),
+    marko_web_identity_x_context_tag = marko_loadTag(marko_web_identity_x_context_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { identityX } =  out.global.req;
+
+  if (Boolean(identityX)) {
+    marko_web_identity_x_context_tag({
+        renderBody: function(out, { user, application }) {
+          const props = buildProps({
+        out,
+        input: {
+          ...input,
+          user,
+          application,
+        }
+      });
+
+          if (props.name && props.description) {
+            marko_web_browser_component_tag({
+                name: "IdentityXNewsletterFormInline",
+                props: props
+              }, out, __component, "1");
+          }
+        }
+      }, out, __component, "0");
+  }
+}
+
+marko_template._ = marko_renderer(render, {
+    e_: marko_componentType
+  }, marko_component);
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-theme-monorail$1.0.0/components/identity-x/newsletter-inline.marko",
+    component: "./newsletter-inline.marko",
+    tags: [
+      "@mindful-web/marko-web/components/browser-component.marko",
+      "@mindful-web/marko-web-identity-x/components/context.marko"
+    ]
+  };

package/components/identity-x/newsletter-modal.marko

@@ -0,0 +1,42 @@
+import { getAsObject } from "@mindful-web/object-path";
+
+$ const { site, req } = out.global;
+$ const { cookieName, cookieValue, hasCookie } = getAsObject(out.global, "newsletterModalState");
+$ const { enabled: modalEnabled, cookieValueToMatch } =  site.getAsObject("newsletter.modal");
+$ const exclusions = ["user", "page", "subscribe"]
+$ const siteExclusions = site.getAsArray("newsletter.modal.routesToExclude");
+$ const routesToExclude = siteExclusions.length ? [...new Set(exclusions.concat(siteExclusions))] : exclusions;
+$ const excludeRoute = req.path.match(`^\/${routesToExclude.join('|')}`)
+
+<marko-web-identity-x-context|{ hasUser }|>
+  <if(
+    !hasUser
+    && !excludeRoute
+    && modalEnabled
+    && (
+      (!hasCookie && Number(cookieValueToMatch) === 0)
+      ||
+      (hasCookie && (Number(cookieValue) === Number(cookieValueToMatch)))
+    )
+  )>
+    <div class="popup-modal-wrapper popup-modal-wrapper--display-overlay" id="newsletter-signup-modal">
+      <div class="popup-modal-wrapper__overlay">
+        <div class="newsletter-signup-modal-center-column-outer">
+          <identity-x-newsletter-form-inline config-name="modal" type="modal" modifiers=["modal"] />
+          <div id="newsletter-signup-modal-center-column-inner">
+            <div class="d-flex flex-column">
+            <button class="btn newsletter-signup-modal-button" onclick="(function() {document.getElementById('newsletter-signup-modal').remove();})()">
+              <marko-web-icon name="x"/>
+            </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </if>
+</marko-web-identity-x-context>
+
+<marko-web-browser-component
+  name="NewsletterSignupModalListener"
+  props={ cookieName, cookieValue: Number(cookieValue), cookieValueToMatch, hasCookie }
+/>

package/components/identity-x/newsletter-modal.marko.js

@@ -0,0 +1,88 @@
+// Compiled using marko@4.20.2 - DO NOT EDIT
+"use strict";
+
+var marko_template = module.exports = require("marko/dist/html").t(__filename),
+    marko_componentType = "/@mindful-web/marko-web-theme-monorail$1.0.0/components/identity-x/newsletter-modal.marko",
+    marko_component = require("./newsletter-modal.marko"),
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_objectPath_module = require("@mindful-web/object-path"),
+    objectPath_module = module_objectPath_module.default || module_objectPath_module,
+    getAsObject = module_objectPath_module.getAsObject,
+    identity_x_newsletter_form_inline_template = require("./newsletter-inline.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    identity_x_newsletter_form_inline_tag = marko_loadTag(identity_x_newsletter_form_inline_template),
+    marko_web_icon_template = require("@mindful-web/marko-web-icons/components/icon.marko"),
+    marko_web_icon_tag = marko_loadTag(marko_web_icon_template),
+    marko_web_identity_x_context_template = require("@mindful-web/marko-web-identity-x/components/context.marko"),
+    marko_web_identity_x_context_tag = marko_loadTag(marko_web_identity_x_context_template),
+    marko_web_browser_component_template = require("@mindful-web/marko-web/components/browser-component.marko"),
+    marko_web_browser_component_tag = marko_loadTag(marko_web_browser_component_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { site, req } = out.global;
+
+  const { cookieName, cookieValue, hasCookie } = getAsObject(out.global, "newsletterModalState");
+
+  const { enabled: modalEnabled, cookieValueToMatch } =  site.getAsObject("newsletter.modal");
+
+  const exclusions = ["user", "page", "subscribe"]
+
+  const siteExclusions = site.getAsArray("newsletter.modal.routesToExclude");
+
+  const routesToExclude = siteExclusions.length ? [...new Set(exclusions.concat(siteExclusions))] : exclusions;
+
+  const excludeRoute = req.path.match(`^\/${routesToExclude.join('|')}`)
+
+  marko_web_identity_x_context_tag({
+      renderBody: function(out, { hasUser }) {
+        if ((((!hasUser) && (!excludeRoute)) && modalEnabled) && (((!hasCookie) && (Number(cookieValueToMatch) === 0)) || (hasCookie && (Number(cookieValue) === Number(cookieValueToMatch))))) {
+          out.w("<div class=\"popup-modal-wrapper popup-modal-wrapper--display-overlay\" id=\"newsletter-signup-modal\"><div class=\"popup-modal-wrapper__overlay\"><div class=\"newsletter-signup-modal-center-column-outer\">");
+
+          identity_x_newsletter_form_inline_tag({
+              configName: "modal",
+              type: "modal",
+              modifiers: [
+                  "modal"
+                ]
+            }, out, __component, "4");
+
+          out.w("<div id=\"newsletter-signup-modal-center-column-inner\"><div class=\"d-flex flex-column\"><button class=\"btn newsletter-signup-modal-button\" onclick=\"(function() {document.getElementById('newsletter-signup-modal').remove();})()\">");
+
+          marko_web_icon_tag({
+              blockName: "marko-web-icon",
+              tag: "span",
+              name: "x"
+            }, out, __component, "8");
+
+          out.w("</button></div></div></div></div></div>");
+        }
+      }
+    }, out, __component, "0");
+
+  marko_web_browser_component_tag({
+      name: "NewsletterSignupModalListener",
+      props: {
+          cookieName: cookieName,
+          cookieValue: Number(cookieValue),
+          cookieValueToMatch: cookieValueToMatch,
+          hasCookie: hasCookie
+        }
+    }, out, __component, "9");
+}
+
+marko_template._ = marko_renderer(render, {
+    e_: marko_componentType
+  }, marko_component);
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-theme-monorail$1.0.0/components/identity-x/newsletter-modal.marko",
+    component: "./newsletter-modal.marko",
+    tags: [
+      "./newsletter-inline.marko",
+      "@mindful-web/marko-web-icons/components/icon.marko",
+      "@mindful-web/marko-web-identity-x/components/context.marko",
+      "@mindful-web/marko-web/components/browser-component.marko"
+    ]
+  };

package/components/identity-x/newsletter-pushdown.marko

@@ -0,0 +1,66 @@
+import { buildImgixUrl } from "@mindful-web/image";
+import { get, getAsObject } from "@mindful-web/object-path";
+import defaultValue from "@mindful-web/marko-core/utils/default-value";
+
+$ const { site, config, req } = out.global;
+$ const { identityX } = req;
+$ const additionalEventData = {
+  ...defaultValue(input.additionalEventData, {}),
+  newsletterSignupType: "pushdown",
+};
+$ const buttonLabels = defaultValue(input.buttonLabels, { continue: "Sign Up" })
+$ const loginEmailPlaceholder = defaultValue(input.loginEmailPlaceholder, "example@gmail.com");
+$ const source = defaultValue(input.source, "newsletterSignup");
+$ const configName = defaultValue(input.configName, "pushdown");
+
+$ const {
+  name,
+  description,
+  withUserName,
+  withUserDescription,
+  imagePath,
+  disabled,
+} = site.getAsObject(`newsletter.${configName}`);
+$ const lang = site.config.lang || "en";
+$ const { initiallyExpanded } = getAsObject(out.global, "newsletterState");
+$ const imageSrc = imagePath ? buildImgixUrl(`https://${config.website("imageHost")}/${imagePath}`, { w: 280, auto: "format,compress" }) : null;
+$ const imageSrcset = imageSrc ? `${imageSrc}&dpr=2 2x` : null;
+
+<if(Boolean(identityX))>
+  <marko-web-identity-x-context|{ user, isEnabled, application }|>
+    <if(name && description)>
+      <marko-web-browser-component
+        name="IdentityXNewsletterFormPushdown"
+        props={
+          siteName: config.website("name"),
+          name: (user && withUserName) ? withUserName : name,
+          description: (user && withUserDescription) ? withUserDescription : description,
+          disabled,
+          imageSrc,
+          imageSrcset,
+          imageWidth: input.imageWidth,
+          imageHeight: input.imageHeight,
+          initiallyExpanded,
+          lang,
+          additionalEventData,
+          source,
+          type: "pushdown",
+          activeUser: user,
+          endpoints: identityX.config.getEndpoints(),
+          buttonLabels,
+          redirect: input.redirect,
+          loginEmailPlaceholder,
+          loginEmailLabel: input.loginEmailLabel,
+          actionText: input.actionText,
+          consentPolicy: input.consentPolicy || get(application, "organization.consentPolicy"),
+          emailConsentRequest: get(application, "organization.emailConsentRequest"),
+          regionalConsentPolicies: get(application, "organization.regionalConsentPolicies"),
+          appContextId: identityX.config.get("appContextId"),
+          requiredCreateFields: identityX.config.getRequiredCreateFields(),
+          defaultFieldLabels: identityX.config.get("defaultFieldLabels"),
+        }
+        ssr=true
+      />
+    </if>
+  </marko-web-identity-x-context>
+</if>

package/components/identity-x/newsletter-pushdown.marko.js

@@ -0,0 +1,113 @@
+// Compiled using marko@4.20.2 - DO NOT EDIT
+"use strict";
+
+var marko_template = module.exports = require("marko/dist/html").t(__filename),
+    marko_componentType = "/@mindful-web/marko-web-theme-monorail$1.0.0/components/identity-x/newsletter-pushdown.marko",
+    marko_component = require("./newsletter-pushdown.marko"),
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_image_module = require("@mindful-web/image"),
+    image_module = module_image_module.default || module_image_module,
+    buildImgixUrl = module_image_module.buildImgixUrl,
+    module_objectPath_module = require("@mindful-web/object-path"),
+    objectPath_module = module_objectPath_module.default || module_objectPath_module,
+    get = module_objectPath_module.get,
+    getAsObject = module_objectPath_module.getAsObject,
+    module_defaultValue = require("@mindful-web/marko-core/utils/default-value"),
+    defaultValue = module_defaultValue.default || module_defaultValue,
+    marko_web_browser_component_template = require("@mindful-web/marko-web/components/browser-component.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_browser_component_tag = marko_loadTag(marko_web_browser_component_template),
+    marko_web_identity_x_context_template = require("@mindful-web/marko-web-identity-x/components/context.marko"),
+    marko_web_identity_x_context_tag = marko_loadTag(marko_web_identity_x_context_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { site, config, req } = out.global;
+
+  const { identityX } = req;
+
+  const additionalEventData = {
+  ...defaultValue(input.additionalEventData, {}),
+  newsletterSignupType: "pushdown",
+};
+
+  const buttonLabels = defaultValue(input.buttonLabels, { continue: "Sign Up" })
+
+  const loginEmailPlaceholder = defaultValue(input.loginEmailPlaceholder, "example@gmail.com");
+
+  const source = defaultValue(input.source, "newsletterSignup");
+
+  const configName = defaultValue(input.configName, "pushdown");
+
+  const {
+  name,
+  description,
+  withUserName,
+  withUserDescription,
+  imagePath,
+  disabled,
+} = site.getAsObject(`newsletter.${configName}`);
+
+  const lang = site.config.lang || "en";
+
+  const { initiallyExpanded } = getAsObject(out.global, "newsletterState");
+
+  const imageSrc = imagePath ? buildImgixUrl(`https://${config.website("imageHost")}/${imagePath}`, { w: 280, auto: "format,compress" }) : null;
+
+  const imageSrcset = imageSrc ? `${imageSrc}&dpr=2 2x` : null;
+
+  if (Boolean(identityX)) {
+    marko_web_identity_x_context_tag({
+        renderBody: function(out, { user, isEnabled, application }) {
+          if (name && description) {
+            marko_web_browser_component_tag({
+                name: "IdentityXNewsletterFormPushdown",
+                props: {
+                    siteName: config.website("name"),
+                    name: user && withUserName ? withUserName : name,
+                    description: user && withUserDescription ? withUserDescription : description,
+                    disabled: disabled,
+                    imageSrc: imageSrc,
+                    imageSrcset: imageSrcset,
+                    imageWidth: input.imageWidth,
+                    imageHeight: input.imageHeight,
+                    initiallyExpanded: initiallyExpanded,
+                    lang: lang,
+                    additionalEventData: additionalEventData,
+                    source: source,
+                    type: "pushdown",
+                    activeUser: user,
+                    endpoints: identityX.config.getEndpoints(),
+                    buttonLabels: buttonLabels,
+                    redirect: input.redirect,
+                    loginEmailPlaceholder: loginEmailPlaceholder,
+                    loginEmailLabel: input.loginEmailLabel,
+                    actionText: input.actionText,
+                    consentPolicy: input.consentPolicy || get(application, "organization.consentPolicy"),
+                    emailConsentRequest: get(application, "organization.emailConsentRequest"),
+                    regionalConsentPolicies: get(application, "organization.regionalConsentPolicies"),
+                    appContextId: identityX.config.get("appContextId"),
+                    requiredCreateFields: identityX.config.getRequiredCreateFields(),
+                    defaultFieldLabels: identityX.config.get("defaultFieldLabels")
+                  },
+                ssr: true
+              }, out, __component, "1");
+          }
+        }
+      }, out, __component, "0");
+  }
+}
+
+marko_template._ = marko_renderer(render, {
+    e_: marko_componentType
+  }, marko_component);
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-theme-monorail$1.0.0/components/identity-x/newsletter-pushdown.marko",
+    component: "./newsletter-pushdown.marko",
+    tags: [
+      "@mindful-web/marko-web/components/browser-component.marko",
+      "@mindful-web/marko-web-identity-x/components/context.marko"
+    ]
+  };

package/components/layouts/ad-preview.marko

@@ -0,0 +1,84 @@
+import fetch from "node-fetch";
+import { get, getAsObject, getAsArray } from "@mindful-web/object-path";
+import defaultValue from "@mindful-web/marko-core/utils/default-value";
+
+$ const { site, i18n } = out.global;
+$ const graphURl = defaultValue("site.mindful.graphURL", "https://graphql.mindfulcms.com/query");
+
+$ const sections = getAsArray(input, "sections");
+$ const { creativeId, namespace = "parameter1/default" } = input;
+
+$ async function batchQuery({
+  graphURL,
+  creativeId,
+  namespace
+}) {
+  const query = `
+  query {
+    advertisingCreativeInterfaceById(_id: "${creativeId}") {
+      _id
+      _form {
+        label
+      }
+      url
+      name {
+        default
+      }
+      companyEdge {
+        _id
+        node {
+          name {
+            default
+          }
+        }
+      }
+      ... on NativeWebsiteAdvertisingCreative {
+        teaser
+      }
+      clickUrl
+      imageEdge {
+        node {
+          _id
+          src {
+            url
+          }
+        }
+      }
+    }
+  }
+`;
+  const results = await fetch(graphURL, {
+    body: JSON.stringify({ query }),
+    headers: { 'content-type': 'application/json', 'X-Namespace': namespace },
+    method: 'POST',
+  });
+  const res = await results.json();
+  const { data } = res;
+  return data;
+};
+
+
+<marko-web-resolve|{ resolved }| promise=batchQuery({graphURL: 'https://graphql.mindfulcms.com/query', creativeId, namespace})>
+  $ const creative = getAsObject(resolved, 'advertisingCreativeInterfaceById');
+  $ const title = `${get(creative, 'companyEdge.node.name.default')}'s ad preview` ;
+  <marko-web-default-page-layout type="Mindful Ad Preview" title=title>
+    <@head>
+      <${input.head} />
+    </@head>
+    <@page>
+      <marko-web-page-wrapper>
+        <@section>
+          <h1>${title}</h1>
+        </@section>
+        <for|s| of=sections>
+          <@section|{ blockName }| modifiers=s.modifiers>
+            <${s.renderBody}
+              block-name=blockName
+              creative=creative
+            />
+          </@section>
+        </for>
+      </marko-web-page-wrapper>
+    </@page>
+  </marko-web-default-page-layout>
+</marko-web-resolve>