Production Release; July Week 4

package.json

@@ -70,6 +70,7 @@
     "echarts": "^5.4.2",
     "echarts-for-react": "^3.0.1",
     "events": "^3.3.0",
+    "html2canvas": "^1.4.1",
     "i18next": "^22.5.0",
     "i18next-browser-languagedetector": "^7.0.0",
     "libphonenumber-js": "^1.10.30",
@@ -161,7 +162,7 @@
     "tailwindcss": "^3.2.4",
     "typescript": "^4.8.4",
     "vite": "^4.2.1",
-    "vite-plugin-pwa": "^0.14.6"
+    "vite-plugin-pwa": "^0.14.7"
   },
   "browserslist": {
     "production": [

public/config.json

@@ -4,15 +4,14 @@
     "coronasafe_url": "https://coronasafe.network?ref=care",
     "site_url": "care.coronasafe.in",
     "analytics_server_url": "https://plausible.10bedicu.in",
-    "static_header_logo": "https://cdn.coronasafe.network/header_logo.png",
-    "static_light_logo": "https://cdn.coronasafe.network/light-logo.svg",
-    "static_ohc_light_logo": "https://cdn.coronasafe.network/ohc_logo_light.png",
-    "static_ohc_green_logo": "https://cdn.coronasafe.network/ohc_logo_green.png",
-    "static_black_logo": "https://cdn.coronasafe.network/black-logo.svg",
-    "static_dpg_white_logo": "https://digitalpublicgoods.net/wp-content/themes/dpga/images/logo-w.svg",
-    "static_coronasafe_logo": "https://3451063158-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M233b0_JITp4nk0uAFp%2F-M2Dx6gKxOSU45cjfgNX%2F-M2DxFOkMmkPNn0I6U9P%2FCoronasafe-logo.png?alt=media&token=178cc96d-76d9-4e27-9efb-88f3186368e8",
-    "static_custom_logo": "https://cdn.coronasafe.network/10bedicu_logo.png",
-    "custom_site_link": "https://10bedicu.org",
+    "header_logo": {
+        "light":"https://cdn.coronasafe.network/header_logo.png",
+        "dark":"https://cdn.coronasafe.network/header_logo.png"
+    },
+    "main_logo": {
+        "light":"https://cdn.coronasafe.network/light-logo.svg",
+        "dark":"https://cdn.coronasafe.network/black-logo.svg"
+    },
     "gmaps_api_key": "AIzaSyDsBAc3y7deI5ZO3NtK5GuzKwtUzQNJNUk",
     "gov_data_api_key": "579b464db66ec23bdd000001cdd3946e44ce4aad7209ff7b23ac571b",
     "recaptcha_site_key": "6LdvxuQUAAAAADDWVflgBqyHGfq-xmvNJaToM0pN",
@@ -22,5 +21,6 @@
     "kasp_string": "KASP",
     "kasp_full_string": "Karunya Arogya Suraksha Padhathi",
     "sample_format_asset_import": "https://spreadsheets.google.com/feeds/download/spreadsheets/Export?key=11JaEhNHdyCHth4YQs_44YaRlP77Rrqe81VSEfg1glko&exportFormat=xlsx",
-    "sample_format_external_result_import": "https://docs.google.com/spreadsheets/d/17VfgryA6OYSYgtQZeXU9mp7kNvLySeEawvnLBO_1nuE/export?format=csv&id=17VfgryA6OYSYgtQZeXU9mp7kNvLySeEawvnLBO_1nuE"
+    "sample_format_external_result_import": "https://docs.google.com/spreadsheets/d/17VfgryA6OYSYgtQZeXU9mp7kNvLySeEawvnLBO_1nuE/export?format=csv&id=17VfgryA6OYSYgtQZeXU9mp7kNvLySeEawvnLBO_1nuE",
+    "enable_abdm": true
 }

src/CAREUI/icons/CareIcon.tsx

@@ -1,8 +1,9 @@
-import { useEffect } from "react";
 import { transformIcons } from "./icon";
+import { useEffect } from "react";
 
 export interface CareIconProps {
   className?: string | undefined;
+  onClick?: React.MouseEventHandler<HTMLSpanElement> | undefined;
 }
 
 /**
@@ -13,10 +14,10 @@ export interface CareIconProps {
  *
  * @see [icon library](https://iconscout.com/unicons/)
  */
-export default function CareIcon({ className }: CareIconProps) {
+export default function CareIcon({ className, onClick }: CareIconProps) {
   useEffect(() => transformIcons(), [className]);
   return (
-    <span key={className}>
+    <span onClick={onClick} key={className}>
       <i className={`care ${className}`} />
     </span>
   );

src/Common/hooks/useConfig.ts

@@ -1,30 +1,26 @@
 import { useSelector } from "react-redux";
 
+interface ILogo {
+  light: string;
+  dark: string;
+}
 export interface IConfig {
   dashboard_url: string;
   github_url: string;
   coronasafe_url: string;
-  dpg_url: string;
   site_url: string;
   analytics_server_url: string;
-  static_header_logo: string;
-  static_ohc_light_logo: string;
-  static_ohc_green_logo: string;
-  static_light_logo: string;
-  static_black_logo: string;
-  /**
-   * White logo of Digital Public Goods.
-   */
-  static_dpg_white_logo: string;
-  static_coronasafe_logo: string;
+
+  header_logo: ILogo;
+  main_logo: ILogo;
+
   /**
-   * Logo, description and site link for custom deployment.
+   * Logo and description for custom deployment. (This overrides the state logo)
    */
-  static_custom_logo: string;
-  static_custom_logo_alt: string;
-  static_custom_logo_white: boolean;
-  custom_description: string;
-  custom_site_link: string;
+  custom_logo?: ILogo;
+  custom_logo_alt?: ILogo;
+  custom_description?: string;
+
   /**
    * The API key for the Google Maps API used for location picker.
    */
@@ -48,11 +44,7 @@ export interface IConfig {
   /**
    * If present, the image will be displayed in the login page.
    */
-  state_logo?: string;
-  /**
-   * If true, the state logo will be white by applying "invert brightness-0" classes.
-   */
-  state_logo_white?: boolean;
+  state_logo?: ILogo;
   /**
    * URL of the sample format for asset import.
    */
@@ -65,6 +57,10 @@ export interface IConfig {
    * Env to enable HCX features
    */
   enable_hcx: boolean;
+  /**
+   * Env to enable ABDM features
+   */
+  enable_abdm: boolean;
   /**
    * Env to toggle peacetime and wartime shifting
    */

src/Components/ABDM/ABHAProfileModal.tsx

@@ -0,0 +1,155 @@
+import * as Notify from "../../Utils/Notifications";
+
+import { AbhaObject } from "../Patient/models";
+import CareIcon from "../../CAREUI/icons/CareIcon";
+import DialogModal from "../Common/Dialog";
+import QRCode from "qrcode.react";
+import { formatDate } from "../../Utils/utils";
+import { getAbhaCard } from "../../Redux/actions";
+import { useDispatch } from "react-redux";
+import { useRef } from "react";
+
+interface IProps {
+  patientId?: string;
+  abha?: AbhaObject;
+  show: boolean;
+  onClose: () => void;
+}
+
+const ABHAProfileModal = ({ patientId, show, onClose, abha }: IProps) => {
+  const printRef = useRef(null);
+  const dispatch = useDispatch<any>();
+
+  const downloadAbhaCard = async (type: "pdf" | "png") => {
+    if (!patientId) return;
+    const response = await dispatch(getAbhaCard(patientId, type));
+
+    if (response.status === 200 && response.data) {
+      if (type === "png") {
+        const downloadLink = document.createElement("a");
+        downloadLink.href =
+          "data:application/octet-stream;base64," + response.data;
+        downloadLink.download = "abha.png";
+        downloadLink.click();
+      } else {
+        const htmlPopup = `<embed width=100% height=100%" type='application/pdf' src='data:application/pdf;base64,${response.data}'></embed>`;
+
+        const printWindow = window.open("", "PDF");
+        printWindow?.document.write(htmlPopup);
+        printWindow?.print();
+      }
+    } else {
+      Notify.Error({ msg: "Download Failed..." });
+    }
+  };
+
+  return (
+    <DialogModal
+      title={
+        <div className="flex items-center justify-between">
+          <h4>ABHA Profile</h4>
+          <div className="flex items-center gap-2">
+            <CareIcon
+              onClick={() => downloadAbhaCard("pdf")}
+              className="care-l-print cursor-pointer"
+            />
+            <CareIcon
+              onClick={() => downloadAbhaCard("png")}
+              className="care-l-import cursor-pointer"
+            />
+          </div>
+        </div>
+      }
+      show={show}
+      onClose={onClose}
+    >
+      <div
+        ref={printRef}
+        id="section-to-print"
+        className="print flex items-center justify-around print:border border-black p-4 print:w-full"
+      >
+        <>
+          <div className="flex flex-col items-center justify-evenly">
+            <div className="flex items-center justify-evenly gap-2 text-lg font-semibold">
+              {abha?.name ? (
+                <span> {abha?.name}</span>
+              ) : (
+                <>
+                  <span> {abha?.first_name}</span>
+                  <span> {abha?.middle_name} </span>
+                  <span> {abha?.last_name} </span>
+                </>
+              )}
+            </div>
+            <span className="font-bold">{abha?.abha_number}</span>
+            {abha?.health_id && (
+              <div className="flex items-center gap-1 font-bold">
+                <span>{abha.health_id.split("@")[0]}</span>
+                {/* <span className="text-gray-700 text-sm">@</span>
+                <span>{abha.health_id.split("@")[1] || "care"}</span> */}
+              </div>
+            )}
+            <div className="flex flex-col mt-2">
+              {abha?.gender && (
+                <p className="text-sm text-gray-600">
+                  Gender:
+                  <span className="ml-2 text-base font-semibold text-gray-900">
+                    {abha?.gender}
+                  </span>
+                </p>
+              )}
+              {abha?.date_of_birth && (
+                <p className="text-sm text-gray-600">
+                  DOB:
+                  <span className="ml-2 text-base font-semibold text-gray-900">
+                    {abha?.date_of_birth}
+                  </span>
+                </p>
+              )}
+              {abha?.email && (
+                <p className="text-sm text-gray-600">
+                  Email:
+                  <span className="ml-2 text-base font-semibold text-gray-900">
+                    {abha?.email}
+                  </span>
+                </p>
+              )}
+            </div>
+          </div>
+        </>
+        <>
+          <QRCode
+            className="border border-black p-1"
+            value={JSON.stringify({
+              hidn: abha?.abha_number,
+              phr: abha?.health_id,
+              name: abha?.name,
+              gender: abha?.gender,
+              dob: abha?.date_of_birth,
+              address: abha?.address,
+              "state name": abha?.state,
+              "dist name": abha?.district,
+            })}
+          />
+        </>
+      </div>
+
+      <div className="flex flex-col mt-4 text-sm text-gray-700">
+        {abha?.created_date && (
+          <div className="flex gap-1 items-center">
+            <span className="">Created On: </span>
+            <span>{formatDate(abha.created_date)}</span>
+          </div>
+        )}
+        {abha?.modified_date && (
+          <div className="flex gap-1 items-center">
+            <span className="">Last Modified On: </span>
+            <span>{formatDate(abha.modified_date)}</span>
+          </div>
+        )}
+      </div>
+    </DialogModal>
+  );
+};
+
+export default ABHAProfileModal;