Maintenance Page Module

Module to display a universal maintenance page with custom text.

Installation

npm install hfn-maintenance-web

React Implementation

npm install hfn-maintenance-web

In React file:

<!-- 

import { useEffect, useState } from "react";

function YourComponent() {
  const [underMaintenance, setUnderMaintenance] = useState(false);
  // Create a utils method in the application which will get the maintenance mode like below
  // Update setUnderMaintenance based upon the utils method
  isWebsiteUnderMaintenance().then((res) => setUnderMaintenance(res));

  useEffect(() => {
    import("hfn-maintenance-web/main");
  }, []);

  return (
    <>
      {underMaintenance ? (
        <hfn-maintenance-web additionalText={'YOUR ADDITIONAL TEXT'} /> // additionalText is optional
      ) : (
        <h1>REST OF THE LAYOUT</h1>
      )}
    </>
  );
}

export default YourComponent;

// Common method to get the application's maintenance mode
export const isWebsiteUnderMaintenance = async () => {
  const projectCode = MAINTENANCE_PROJECT_CODE;
  const projectsURL = `${base_URL}/conf/hfn-maintenance-web/projects.json`; // Replace the URL withenvironment variable
  let project = {};

  try {
    const response = await fetch(projectsURL);
    const projectsData = await response.json();
    project = projectsData.PROJECTS.find((p) => p.project_code === projectCode);
  } catch (e) {
    return false;
  }

  return project && project.in_maintenance ? true : false;
};

-->