@mjhls/mjh-framework 1.0.1050-pdfGating-v2 → 1.0.1050-pdfGating-v4

package/dist/cjs/PublicationLanding.js

@@ -495,22 +495,27 @@ var PublicationLanding = function PublicationLanding(props) {
 
   var _useState15 = React.useState(false),
       _useState16 = slicedToArray._slicedToArray(_useState15, 2),
-      isValidated = _useState16[0],
-      SetIsValidated = _useState16[1];
+      checkBox = _useState16[0],
+      setCheckBox = _useState16[1];
+
+  var _useState17 = React.useState(false),
+      _useState18 = slicedToArray._slicedToArray(_useState17, 2),
+      isValidated = _useState18[0],
+      SetIsValidated = _useState18[1];
 
   var DL_PDF = React.useRef();
   var overLayRef = React.useRef([]);
   var pdfFormRef = React.useRef();
 
-  var _useState17 = React.useState(false),
-      _useState18 = slicedToArray._slicedToArray(_useState17, 2),
-      sendingData = _useState18[0],
-      setSendingData = _useState18[1];
-
-  var _useState19 = React.useState(''),
+  var _useState19 = React.useState(true),
       _useState20 = slicedToArray._slicedToArray(_useState19, 2),
-      errorMsg = _useState20[0],
-      setErrorMsg = _useState20[1];
+      sendingData = _useState20[0],
+      setSendingData = _useState20[1];
+
+  var _useState21 = React.useState(''),
+      _useState22 = slicedToArray._slicedToArray(_useState21, 2),
+      errorMsg = _useState22[0],
+      setErrorMsg = _useState22[1];
 
   var triggerAction = 'click';
   var placementLocation = main.main_42 ? 'top' : 'top';
@@ -657,18 +662,17 @@ var PublicationLanding = function PublicationLanding(props) {
       case 'email':
         setEmail(e.currentTarget.value);
         break;
-      default:
-        console.log(e.currentTarget.dataset['key']);
-        closeOverlay(e.currentTarget.dataset['key']);
+      case 'checkbox':
+        setCheckBox(e.currentTarget.checked);
         break;
     }
   };
 
-  var closeOverlay = function closeOverlay(key) {
-    console.dir(overLayRef);
-    console.log(key);
-    overLayRef.current[key].handleHide();
-  };
+  React.useEffect(function () {
+    if (firstName.length > 3 && lastName.length > 3 && email.includes('@') && checkBox) {
+      setSendingData(false);
+    }
+  }, [firstName, lastName, email, checkBox]);
 
   var isGatedFormHandler = function () {
     var _ref = asyncToGenerator._asyncToGenerator( /*#__PURE__*/asyncToGenerator.regenerator.mark(function _callee(e) {
@@ -690,6 +694,7 @@ var PublicationLanding = function PublicationLanding(props) {
               return _context.abrupt('return');
 
             case 6:
+              console.dir(overLayRef);
               body = {};
 
               body['firstName'] = firstName;
@@ -700,56 +705,56 @@ var PublicationLanding = function PublicationLanding(props) {
               body['site'] = window.location.hostname;
               SetIsValidated(true);
 
-              _context.prev = 14;
-              _context.next = 17;
+              _context.prev = 15;
+              _context.next = 18;
               return fetch('/api/pdfGating/check', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: stringify._JSON$stringify(body)
               });
 
-            case 17:
+            case 18:
               res = _context.sent;
 
               if (!(res.status === 202)) {
-                _context.next = 23;
+                _context.next = 24;
                 break;
               }
 
               window.open(DL_PDF.current.dataset.pdf, '_blank');
-              closeOverlay(DL_PDF.current.dataset.key);
-              _context.next = 28;
+              closeAllOverlays();
+              _context.next = 29;
               break;
 
-            case 23:
+            case 24:
               _context.t0 = Error;
-              _context.next = 26;
+              _context.next = 27;
               return res.text();
 
-            case 26:
+            case 27:
               _context.t1 = _context.sent;
               throw new _context.t0(_context.t1);
 
-            case 28:
-              _context.next = 33;
+            case 29:
+              _context.next = 34;
               break;
 
-            case 30:
-              _context.prev = 30;
-              _context.t2 = _context['catch'](14);
+            case 31:
+              _context.prev = 31;
+              _context.t2 = _context['catch'](15);
 
               setErrorMsg(_context.t2.message);
 
-            case 33:
+            case 34:
               setSendingData(false);
               SetIsValidated(false);
 
-            case 35:
+            case 36:
             case 'end':
               return _context.stop();
           }
         }
-      }, _callee, _this, [[14, 30]]);
+      }, _callee, _this, [[15, 31]]);
     }));
 
     return function isGatedFormHandler(_x) {
@@ -757,24 +762,24 @@ var PublicationLanding = function PublicationLanding(props) {
     };
   }();
 
+  var closeAllOverlays = function closeAllOverlays() {
+    overLayRef.current.forEach(function (element) {
+      try {
+        console.dir(element);
+        element.handleHide();
+      } catch (e) {
+        console.error(e.message);
+      }
+    });
+  };
+
   var isGatedPDFPopOver = function isGatedPDFPopOver(key) {
     return React__default["default"].createElement(
       Popover__default["default"],
-      { id: 'popover-basic-' },
+      { id: 'popover-basic-' + key },
       React__default["default"].createElement(
         Popover__default["default"].Content,
         null,
-        React__default["default"].createElement(
-          'div',
-          { className: 'popoverClose' },
-          React__default["default"].createElement(
-            'button',
-            { 'data-key': key, onClick: function onClick(e) {
-                return handleFormInput(e);
-              } },
-            'X'
-          )
-        ),
         React__default["default"].createElement(
           Form__default["default"],
           { ref: pdfFormRef, validated: isValidated, onSubmit: isGatedFormHandler },
@@ -847,17 +852,38 @@ var PublicationLanding = function PublicationLanding(props) {
                 'Please provide your email.'
               )
             ),
+            React__default["default"].createElement(
+              Form__default["default"].Group,
+              { className: 'mb-3', controlId: 'pdfPrivacyCheck' },
+              React__default["default"].createElement(
+                Form__default["default"].Check,
+                null,
+                React__default["default"].createElement(Form__default["default"].Check.Input, { required: true, onChange: function onChange(e) {
+                    return handleFormInput(e);
+                  }, type: 'checkbox', name: 'checkbox' }),
+                React__default["default"].createElement(
+                  Form__default["default"].Check.Label,
+                  null,
+                  'By clicking on \'Submit\', you accept our ',
+                  React__default["default"].createElement(
+                    'a',
+                    { href: 'https://www.dentalproductsreport.com/privacy', target: '_blank' },
+                    'Privacy Policy'
+                  )
+                )
+              )
+            ),
             React__default["default"].createElement(
               Button__default["default"],
               { disabled: sendingData, className: 'btn btn-primary mb-3', type: 'submit' },
               'Submit'
-            )
-          ),
-          errorMsg ? React__default["default"].createElement(
-            'div',
-            { style: { color: 'red' } },
-            errorMsg
-          ) : null
+            ),
+            errorMsg ? React__default["default"].createElement(
+              'div',
+              { style: { color: 'red' } },
+              errorMsg
+            ) : null
+          )
         )
       )
     );
@@ -993,9 +1019,12 @@ var PublicationLanding = function PublicationLanding(props) {
               issue.isGatedPDF ? issue.pdf && issue.pdf.asset && issue.pdf.asset.url ? React__default["default"].createElement(
                 OverlayTrigger__default["default"],
                 {
+                  rootClose: true,
+                  rootCloseEvent: 'click',
                   key: key,
                   ref: function ref(el) {
-                    return overLayRef.current[key] = el;
+                    console.dir(el);
+                    overLayRef.current[key] = el;
                   },
                   trigger: triggerAction,
                   placement: placementLocation,
@@ -1072,6 +1101,8 @@ var PublicationLanding = function PublicationLanding(props) {
               issue.isGatedPDF ? issue.pdf && issue.pdf.asset && issue.pdf.asset.url ? React__default["default"].createElement(
                 OverlayTrigger__default["default"],
                 {
+                  rootClose: true,
+                  rootCloseEvent: 'click',
                   key: key,
                   ref: function ref(el) {
                     return overLayRef.current[key] = el;
@@ -1102,7 +1133,7 @@ var PublicationLanding = function PublicationLanding(props) {
     React__default["default"].createElement(
       'style',
       { jsx: 'true' },
-      '\n        .gatedPdfForm {\n          display: flex;\n          flex-direction: column;\n          justify-content: center;\n          padding: 0 2rem;\n        }\n        .popoverClose {\n          display: flex;\n          flex-direction: row;\n          justify-content: flex-end;\n        }\n        .popoverClose button {\n          border: none;\n          background: transparent;\n          color: #2780e3;\n        }\n        .card-footer button:not(:first-child) {\n          color: #fff;\n          margin-left: 1rem;\n        }\n        .issueCard.card:hover {\n          cursor: default;\n        }\n        .content-category-label {\n          margin: 0.5rem 0;\n          display: block;\n        }\n        .sanityDisplayLabel {\n          margin: 0.5rem 0;\n          border: 1px solid black;\n          display: inline;\n          width: 100%;\n          padding: 5px;\n          color: #484848;\n          border-radius: 2px;\n        }\n        .dropdown-toggle {\n          min-width: 5rem;\n        }\n        .dropdown-toggle:empty:after {\n          margin-left: 4rem;\n        }\n        .card-footer {\n          background-color: transparent;\n          border-top: 0;\n        }\n        .card-footer a:not(:first-child) {\n          margin-left: 1rem;\n        }\n      '
+      '\n        .gatedPdfForm {\n          justify-content: center;\n          flex-direction: column;\n          padding: 0 1.5rem;\n        }\n        .popoverClose {\n          display: flex;\n          flex-direction: row;\n          justify-content: flex-end;\n        }\n        .popoverClose button {\n          border: none;\n          background: transparent;\n          color: #2780e3;\n        }\n        .card-footer button:not(:first-child) {\n          color: #fff;\n          margin-left: 1rem;\n        }\n        .issueCard.card:hover {\n          cursor: default;\n        }\n        .content-category-label {\n          margin: 0.5rem 0;\n          display: block;\n        }\n        .sanityDisplayLabel {\n          margin: 0.5rem 0;\n          border: 1px solid black;\n          display: inline;\n          width: 100%;\n          padding: 5px;\n          color: #484848;\n          border-radius: 2px;\n        }\n        .dropdown-toggle {\n          min-width: 5rem;\n        }\n        .dropdown-toggle:empty:after {\n          margin-left: 4rem;\n        }\n        .card-footer {\n          background-color: transparent;\n          border-top: 0;\n        }\n        .card-footer a:not(:first-child) {\n          margin-left: 1rem;\n        }\n      '
     )
   );
 };

package/dist/esm/PublicationLanding.js

@@ -481,22 +481,27 @@ var PublicationLanding = function PublicationLanding(props) {
 
   var _useState15 = useState(false),
       _useState16 = _slicedToArray(_useState15, 2),
-      isValidated = _useState16[0],
-      SetIsValidated = _useState16[1];
+      checkBox = _useState16[0],
+      setCheckBox = _useState16[1];
+
+  var _useState17 = useState(false),
+      _useState18 = _slicedToArray(_useState17, 2),
+      isValidated = _useState18[0],
+      SetIsValidated = _useState18[1];
 
   var DL_PDF = useRef();
   var overLayRef = useRef([]);
   var pdfFormRef = useRef();
 
-  var _useState17 = useState(false),
-      _useState18 = _slicedToArray(_useState17, 2),
-      sendingData = _useState18[0],
-      setSendingData = _useState18[1];
-
-  var _useState19 = useState(''),
+  var _useState19 = useState(true),
       _useState20 = _slicedToArray(_useState19, 2),
-      errorMsg = _useState20[0],
-      setErrorMsg = _useState20[1];
+      sendingData = _useState20[0],
+      setSendingData = _useState20[1];
+
+  var _useState21 = useState(''),
+      _useState22 = _slicedToArray(_useState21, 2),
+      errorMsg = _useState22[0],
+      setErrorMsg = _useState22[1];
 
   var triggerAction = 'click';
   var placementLocation = main_42 ? 'top' : 'top';
@@ -643,18 +648,17 @@ var PublicationLanding = function PublicationLanding(props) {
       case 'email':
         setEmail(e.currentTarget.value);
         break;
-      default:
-        console.log(e.currentTarget.dataset['key']);
-        closeOverlay(e.currentTarget.dataset['key']);
+      case 'checkbox':
+        setCheckBox(e.currentTarget.checked);
         break;
     }
   };
 
-  var closeOverlay = function closeOverlay(key) {
-    console.dir(overLayRef);
-    console.log(key);
-    overLayRef.current[key].handleHide();
-  };
+  useEffect(function () {
+    if (firstName.length > 3 && lastName.length > 3 && email.includes('@') && checkBox) {
+      setSendingData(false);
+    }
+  }, [firstName, lastName, email, checkBox]);
 
   var isGatedFormHandler = function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee(e) {
@@ -676,6 +680,7 @@ var PublicationLanding = function PublicationLanding(props) {
               return _context.abrupt('return');
 
             case 6:
+              console.dir(overLayRef);
               body = {};
 
               body['firstName'] = firstName;
@@ -686,56 +691,56 @@ var PublicationLanding = function PublicationLanding(props) {
               body['site'] = window.location.hostname;
               SetIsValidated(true);
 
-              _context.prev = 14;
-              _context.next = 17;
+              _context.prev = 15;
+              _context.next = 18;
               return fetch('/api/pdfGating/check', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: _JSON$stringify(body)
               });
 
-            case 17:
+            case 18:
               res = _context.sent;
 
               if (!(res.status === 202)) {
-                _context.next = 23;
+                _context.next = 24;
                 break;
               }
 
               window.open(DL_PDF.current.dataset.pdf, '_blank');
-              closeOverlay(DL_PDF.current.dataset.key);
-              _context.next = 28;
+              closeAllOverlays();
+              _context.next = 29;
               break;
 
-            case 23:
+            case 24:
               _context.t0 = Error;
-              _context.next = 26;
+              _context.next = 27;
               return res.text();
 
-            case 26:
+            case 27:
               _context.t1 = _context.sent;
               throw new _context.t0(_context.t1);
 
-            case 28:
-              _context.next = 33;
+            case 29:
+              _context.next = 34;
               break;
 
-            case 30:
-              _context.prev = 30;
-              _context.t2 = _context['catch'](14);
+            case 31:
+              _context.prev = 31;
+              _context.t2 = _context['catch'](15);
 
               setErrorMsg(_context.t2.message);
 
-            case 33:
+            case 34:
               setSendingData(false);
               SetIsValidated(false);
 
-            case 35:
+            case 36:
             case 'end':
               return _context.stop();
           }
         }
-      }, _callee, _this, [[14, 30]]);
+      }, _callee, _this, [[15, 31]]);
     }));
 
     return function isGatedFormHandler(_x) {
@@ -743,24 +748,24 @@ var PublicationLanding = function PublicationLanding(props) {
     };
   }();
 
+  var closeAllOverlays = function closeAllOverlays() {
+    overLayRef.current.forEach(function (element) {
+      try {
+        console.dir(element);
+        element.handleHide();
+      } catch (e) {
+        console.error(e.message);
+      }
+    });
+  };
+
   var isGatedPDFPopOver = function isGatedPDFPopOver(key) {
     return React__default.createElement(
       Popover,
-      { id: 'popover-basic-' },
+      { id: 'popover-basic-' + key },
       React__default.createElement(
         Popover.Content,
         null,
-        React__default.createElement(
-          'div',
-          { className: 'popoverClose' },
-          React__default.createElement(
-            'button',
-            { 'data-key': key, onClick: function onClick(e) {
-                return handleFormInput(e);
-              } },
-            'X'
-          )
-        ),
         React__default.createElement(
           Form,
           { ref: pdfFormRef, validated: isValidated, onSubmit: isGatedFormHandler },
@@ -833,17 +838,38 @@ var PublicationLanding = function PublicationLanding(props) {
                 'Please provide your email.'
               )
             ),
+            React__default.createElement(
+              Form.Group,
+              { className: 'mb-3', controlId: 'pdfPrivacyCheck' },
+              React__default.createElement(
+                Form.Check,
+                null,
+                React__default.createElement(Form.Check.Input, { required: true, onChange: function onChange(e) {
+                    return handleFormInput(e);
+                  }, type: 'checkbox', name: 'checkbox' }),
+                React__default.createElement(
+                  Form.Check.Label,
+                  null,
+                  'By clicking on \'Submit\', you accept our ',
+                  React__default.createElement(
+                    'a',
+                    { href: 'https://www.dentalproductsreport.com/privacy', target: '_blank' },
+                    'Privacy Policy'
+                  )
+                )
+              )
+            ),
             React__default.createElement(
               Button,
               { disabled: sendingData, className: 'btn btn-primary mb-3', type: 'submit' },
               'Submit'
-            )
-          ),
-          errorMsg ? React__default.createElement(
-            'div',
-            { style: { color: 'red' } },
-            errorMsg
-          ) : null
+            ),
+            errorMsg ? React__default.createElement(
+              'div',
+              { style: { color: 'red' } },
+              errorMsg
+            ) : null
+          )
         )
       )
     );
@@ -979,9 +1005,12 @@ var PublicationLanding = function PublicationLanding(props) {
               issue.isGatedPDF ? issue.pdf && issue.pdf.asset && issue.pdf.asset.url ? React__default.createElement(
                 OverlayTrigger,
                 {
+                  rootClose: true,
+                  rootCloseEvent: 'click',
                   key: key,
                   ref: function ref(el) {
-                    return overLayRef.current[key] = el;
+                    console.dir(el);
+                    overLayRef.current[key] = el;
                   },
                   trigger: triggerAction,
                   placement: placementLocation,
@@ -1058,6 +1087,8 @@ var PublicationLanding = function PublicationLanding(props) {
               issue.isGatedPDF ? issue.pdf && issue.pdf.asset && issue.pdf.asset.url ? React__default.createElement(
                 OverlayTrigger,
                 {
+                  rootClose: true,
+                  rootCloseEvent: 'click',
                   key: key,
                   ref: function ref(el) {
                     return overLayRef.current[key] = el;
@@ -1088,7 +1119,7 @@ var PublicationLanding = function PublicationLanding(props) {
     React__default.createElement(
       'style',
       { jsx: 'true' },
-      '\n        .gatedPdfForm {\n          display: flex;\n          flex-direction: column;\n          justify-content: center;\n          padding: 0 2rem;\n        }\n        .popoverClose {\n          display: flex;\n          flex-direction: row;\n          justify-content: flex-end;\n        }\n        .popoverClose button {\n          border: none;\n          background: transparent;\n          color: #2780e3;\n        }\n        .card-footer button:not(:first-child) {\n          color: #fff;\n          margin-left: 1rem;\n        }\n        .issueCard.card:hover {\n          cursor: default;\n        }\n        .content-category-label {\n          margin: 0.5rem 0;\n          display: block;\n        }\n        .sanityDisplayLabel {\n          margin: 0.5rem 0;\n          border: 1px solid black;\n          display: inline;\n          width: 100%;\n          padding: 5px;\n          color: #484848;\n          border-radius: 2px;\n        }\n        .dropdown-toggle {\n          min-width: 5rem;\n        }\n        .dropdown-toggle:empty:after {\n          margin-left: 4rem;\n        }\n        .card-footer {\n          background-color: transparent;\n          border-top: 0;\n        }\n        .card-footer a:not(:first-child) {\n          margin-left: 1rem;\n        }\n      '
+      '\n        .gatedPdfForm {\n          justify-content: center;\n          flex-direction: column;\n          padding: 0 1.5rem;\n        }\n        .popoverClose {\n          display: flex;\n          flex-direction: row;\n          justify-content: flex-end;\n        }\n        .popoverClose button {\n          border: none;\n          background: transparent;\n          color: #2780e3;\n        }\n        .card-footer button:not(:first-child) {\n          color: #fff;\n          margin-left: 1rem;\n        }\n        .issueCard.card:hover {\n          cursor: default;\n        }\n        .content-category-label {\n          margin: 0.5rem 0;\n          display: block;\n        }\n        .sanityDisplayLabel {\n          margin: 0.5rem 0;\n          border: 1px solid black;\n          display: inline;\n          width: 100%;\n          padding: 5px;\n          color: #484848;\n          border-radius: 2px;\n        }\n        .dropdown-toggle {\n          min-width: 5rem;\n        }\n        .dropdown-toggle:empty:after {\n          margin-left: 4rem;\n        }\n        .card-footer {\n          background-color: transparent;\n          border-top: 0;\n        }\n        .card-footer a:not(:first-child) {\n          margin-left: 1rem;\n        }\n      '
     )
   );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mjhls/mjh-framework",
-  "version": "1.0.1050-pdfGating-v2",
+  "version": "1.0.1050-pdfGating-v4",
   "description": "Foundation Framework",
   "author": "mjh-framework",
   "license": "MIT",