Doc popup in all pages

content/faq/index.md

@@ -83,6 +83,22 @@ The Manage App screen will appear.
   ![alt_text](images/FAQ3.png "image_tooltip")
 
 
+### How to update credit card?
+* Click **Account Icon** from the top-right of the screen and select the **Manage Apps** option:
+
+  ![alt_text](images/ManageApp.PNG "image_tooltip")
+
+* Click the **Update Card** button from the Manage Apps screen.
+
+  ![alt_text](images/updateCard.PNG "image_tooltip")
+
+* Add **New Card** details in the pop-up and click **Update Card**.
+
+  ![alt_text](images/Update_Card_Details.PNG "image_tooltip")
+
+**Note:** Top-right of the pop-up displays the existing credit card (if added already).
+
+
 ### How do I contact LoginRadius Support?
 
 * For quick, general, or verification-type questions, you can chat with a LoginRadius Support Team member by clicking the blue chat icon on the dashboard’s bottom right.

src/components/container.js

@@ -7,14 +7,9 @@ const Middle = () => {
   const apiRef = React.createRef()
   const sdkRef = React.createRef()
   const gotQRef = React.createRef()
+  const redRef = React.createRef()
   const [display, setDisplay] = useState(false)
-  const [openModel, setOpenModel] = useState(true)
-  const closePopup = () => {
-    var expires = new Date()
-    expires = expires.setHours(expires.getHours() + 24)
-    localStorage.setItem("docsModelShown", expires)
-    setOpenModel(false)
-  }
+
   useEffect(() => {
     if (
       window &&
@@ -31,86 +26,18 @@ const Middle = () => {
       } else if (window.location.hash === "#loginmethods") {
         window.history.scrollRestoration = "manual"
         gotQRef.current.scrollIntoView({ block: "start" })
+      } else if (window.location.hash === "#readytogetbuilding") {
+        window.history.scrollRestoration = "manual"
+        redRef.current.scrollIntoView({ block: "start" })
       }
     }
-    let modelShown = localStorage.getItem("docsModelShown")
-    if (modelShown && modelShown > new Date()) {
-      setOpenModel(false)
-    }
+
   })
 
   return (
     <main>
       {/*Hero section*/}
       <section className="hero py-72">
-        <Modal id="doc-popup" isOpen={openModel} ariaHideApp={false}>
-          <div className="card no-shadow p-0 doc-popup">
-            <a
-              className="close"
-              onClick={() => {
-                closePopup()
-              }}
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="feather feather-x"
-              >
-                <line x1="18" y1="6" x2="6" y2="18"></line>
-                <line x1="6" y1="6" x2="18" y2="18"></line>
-              </svg>
-            </a>
-            <div className="popup-content">
-              <h2>You are viewing Developer CIAM documents.</h2>
-              <a href="https://www.loginradius.com/docs/" target="_blank">
-                Move to Enterprise CIAM
-                <svg
-                  width="20"
-                  height="20"
-                  viewBox="0 0 20 20"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M15 10.8333V15.8333C15 16.2754 14.8244 16.6993 14.5118 17.0118C14.1993 17.3244 13.7754 17.5 13.3333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V6.66667C2.5 6.22464 2.67559 5.80072 2.98816 5.48816C3.30072 5.17559 3.72464 5 4.16667 5H9.16667"
-                    stroke="#008ECF"
-                    stroke-width="1.5"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                  />
-                  <path
-                    d="M12.1665 3H17.1665V8"
-                    stroke="#008ECF"
-                    stroke-width="1.5"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                  />
-                  <path
-                    d="M8 12.1667L17.1667 3"
-                    stroke="#008ECF"
-                    stroke-width="1.5"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                  />
-                </svg>
-              </a>
-              <a
-                onClick={() => {
-                  closePopup()
-                }}
-              >
-                Continue to Developer CIAM
-              </a>
-            </div>
-          </div>
-        </Modal>
         <div className="grid-50 d-flex align-items-end justify-content-between">
           <div>
             <h1>LoginRadius Documentation</h1>
@@ -515,7 +442,7 @@ const Middle = () => {
       </section>
       {/*Tutorials section*/}
 
-      <section className="tutorials py-72">
+      <section className="tutorials py-72" ref={redRef}>
         <div className="section-header">
           <h2>Ready To Start Building?</h2>
           <p>

src/components/header.js

@@ -2,6 +2,7 @@ import { Link } from "gatsby"
 import React, { useCallback, useEffect, useState } from "react"
 import Logo from "../../public/images/logo.svg"
 import Search from "./search"
+import Modal from "react-modal"
 const searchIndices = [{ name: process.env.GATSBY_ALGOLIA_INDEX, title: process.env.GATSBY_ALGOLIA_INDEX }]
 // Header component
 
@@ -13,6 +14,13 @@ const Header = () => {
   }
   const [y, setY] = useState(sY)
   const [scrollClass, setClass] = useState("")
+  const [openModel, setOpenModel] = useState(true)
+   const closePopup = () => {
+    var expires = new Date()
+    expires = expires.setHours(expires.getHours() + 24)
+    localStorage.setItem("docsModelShown", expires)
+    setOpenModel(false)
+  }
 
   const handleNavigation = useCallback(
     e => {
@@ -28,6 +36,10 @@ const Header = () => {
   )
 
   useEffect(() => {
+    let modelShown = localStorage.getItem("docsModelShown")
+    if (modelShown && modelShown > new Date()) {
+      setOpenModel(false)
+    }
     if (typeof window !== "undefined") {
       setY(window.scrollY)
     }
@@ -38,8 +50,77 @@ const Header = () => {
     }
   }, [handleNavigation])
 
+
   return (
     <React.Fragment>
+              <Modal id="doc-popup" isOpen={openModel} ariaHideApp={false}>
+          <div className="card no-shadow p-0 doc-popup">
+            <a
+              className="close"
+              onClick={() => {
+                closePopup()
+              }}
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="feather feather-x"
+              >
+                <line x1="18" y1="6" x2="6" y2="18"></line>
+                <line x1="6" y1="6" x2="18" y2="18"></line>
+              </svg>
+            </a>
+            <div className="popup-content">
+              <h2>You are viewing Developer CIAM documents.</h2>
+              <a href="https://www.loginradius.com/docs/" target="_blank">
+                Move to Enterprise CIAM
+                <svg
+                  width="20"
+                  height="20"
+                  viewBox="0 0 20 20"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M15 10.8333V15.8333C15 16.2754 14.8244 16.6993 14.5118 17.0118C14.1993 17.3244 13.7754 17.5 13.3333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V6.66667C2.5 6.22464 2.67559 5.80072 2.98816 5.48816C3.30072 5.17559 3.72464 5 4.16667 5H9.16667"
+                    stroke="#008ECF"
+                    stroke-width="1.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M12.1665 3H17.1665V8"
+                    stroke="#008ECF"
+                    stroke-width="1.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M8 12.1667L17.1667 3"
+                    stroke="#008ECF"
+                    stroke-width="1.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              </a>
+              <a
+                onClick={() => {
+                  closePopup()
+                }}
+              >
+                Continue to Developer CIAM
+              </a>
+            </div>
+          </div>
+        </Modal>
       {showBanner && (
         <div className="top-strip">
           The following documentation is applicable to <b>Free</b>,{" "}