Configure progressive reg on content page

Author: B77Mills

services/example-website/config/identity-x.js

@@ -38,29 +38,33 @@ module.exports = new IdentityXConfiguration({
     phoneNumber: 'Mobile Phone',
     organization: 'Company Name',
   },
-  progressiveDelay: 0.25, // hours
+  progressiveDelay: 0.1, // hours
   progressiveQuestions: [
-    {
-      id: 'postalCode',
-    },
-    {
-      id: 'street',
-    },
-    {
-      id: 'countryCode',
-    },
     {
       id: 'givenName',
     },
-    {
-      id: 'familyName',
-    },
+    // {
+    //   id: 'familyName',
+    // },
+    // {
+    //   id: 'postalCode',
+    // },
+    // {
+    //   id: 'street',
+    // },
+    // {
+    //   id: 'countryCode',
+    // },
+
     {
       id: '618a8a62934f8400ad4beb8f',
     },
     {
       id: '626fe91c79d99b27544a4c9f',
     },
+    {
+      id: '628e9333f8dbf1d5cdda43d2',
+    },
 
   ],
   hiddenFields: [],

services/example-website/server/templates/content.marko

@@ -1,5 +1,9 @@
+import { getAsArray, get } from "@parameter1/base-cms-object-path";
+import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value";
+import getContentPreview from "@parameter1/base-cms-marko-web-theme-monorail/utils/get-content-preview";
+
 $ const { id, type, pageNode } = data;
-$ const { recaptcha } = out.global;
+$ const { recaptcha, identityX } = out.global;
 
 <marko-web-content-page-layout id=id type=type>
   <@page>
@@ -22,17 +26,57 @@ $ const { recaptcha } = out.global;
       <div class="row mt-3">
         <div class="col-md-8">
           <div class="content-page-body">
-            <theme-page-contents|{ blockName }| attrs={ "data-gallery-id": id }>
             <marko-web-p1-events-track-content-scroll-depth
               content=content
               selector=".document-container .page .row .content-page-body"
             />
-              <content-body
-                content=content
-                block-name=blockName
-                display-read-next=false
-                display-comments=false
-              />
+            <theme-page-contents|{ blockName }| attrs={ "data-gallery-id": id }>
+              $ const requiresRegistration = get(content, "userRegistration.isCurrentlyRequired");
+              $ const progressiveRegEnabled = identityX ?  identityX.config.getProgresiveQuestions().length !== 0 : false;
+              $ const checkReg = requiresRegistration || progressiveRegEnabled;
+              <marko-web-identity-x-access|context| enabled=checkReg>
+                <!-- If ProgressiveReg is enabled & required: Fire it first & ignore required user fields!  -->
+                <if(progressiveRegEnabled)>
+                  $ const body = getContentPreview({ body: content.body, selector: "p:nth-of-type(1)" });
+                  <marko-web-content-body block-name=blockName obj={ body } />
+                  <div class="content-page-preview-overlay" />
+                  <theme-content-page-gate
+                    profile-confirmation=false
+                    can-access=context.canAccess
+                    is-logged-in=context.isLoggedIn
+                    has-required-access-level=context.hasRequiredAccessLevel
+                    requires-access-level=context.requiresAccessLevel
+                    requires-user-input=false
+                    requiresPUI=context.requiresPUI
+                    messages=context.messages
+                    content-gate-type="default"
+                  />
+                </if>
+                <else-if(!context.canAccess || (context.requiresUserInput && requiresRegistration))>
+                  $ const body = getContentPreview({ body: content.body, selector: "p:nth-of-type(1)" });
+                  <marko-web-content-body block-name=blockName obj={ body } />
+                  <div class="content-page-preview-overlay" />
+                  <theme-content-page-gate
+                    profile-confirmation=false
+                    can-access=context.canAccess
+                    is-logged-in=context.isLoggedIn
+                    has-required-access-level=context.hasRequiredAccessLevel
+                    requires-access-level=context.requiresAccessLevel
+                    requires-user-input=context.requiresUserInput
+                    requiresPUI=context.requiresPUI
+                    messages=context.messages
+                    content-gate-type="default"
+                  />
+                </else-if>
+                <else>
+                  <content-body
+                    content=content
+                    block-name=blockName
+                    display-read-next=false
+                    display-comments=false
+                  />
+                </else>
+              </marko-web-identity-x-access>
             </theme-page-contents>
           </div>
         </div>