feat: implement location field for non postal congs

rimorin · May 10, 2024 · dec25db · dec25db
1 parent f98b687
commit dec25db
Show file tree

Hide file tree

Showing 8 changed files with 164 additions and 20 deletions.
diff --git a/src/components/modal/changeaddlocation.tsx b/src/components/modal/changeaddlocation.tsx
@@ -0,0 +1,74 @@
+import NiceModal, { useModal, bootstrapDialog } from "@ebay/nice-modal-react";
+import { useRollbar } from "@rollbar/react";
+import { set, ref } from "firebase/database";
+import { useState, FormEvent } from "react";
+import { Modal, Form } from "react-bootstrap";
+import { database } from "../../firebase";
+import { USER_ACCESS_LEVELS, WIKI_CATEGORIES } from "../../utils/constants";
+import pollingVoidFunction from "../../utils/helpers/pollingvoid";
+import errorHandler from "../../utils/helpers/errorhandler";
+import ModalFooter from "../form/footer";
+import GenericInputField from "../form/input";
+import HelpButton from "../navigation/help";
+import { ChangeAddressLocationModalProps } from "../../utils/interface";
+
+const ChangeAddressLocation = NiceModal.create(
+  ({
+    footerSaveAcl = USER_ACCESS_LEVELS.READ_ONLY.CODE,
+    postalCode,
+    congregation,
+    location
+  }: ChangeAddressLocationModalProps) => {
+    const [addressLocation, setAddressLocation] = useState(location);
+    const [isSaving, setIsSaving] = useState(false);
+    const modal = useModal();
+    const rollbar = useRollbar();
+
+    const handleUpdateBlockName = async (event: FormEvent<HTMLElement>) => {
+      event.preventDefault();
+      setIsSaving(true);
+      try {
+        await pollingVoidFunction(() =>
+          set(
+            ref(database, `addresses/${congregation}/${postalCode}/location`),
+            addressLocation
+          )
+        );
+        modal.hide();
+      } catch (error) {
+        errorHandler(error, rollbar);
+      } finally {
+        setIsSaving(false);
+      }
+    };
+    return (
+      <Modal {...bootstrapDialog(modal)}>
+        <Modal.Header>
+          <Modal.Title>Change Location</Modal.Title>
+          <HelpButton link={WIKI_CATEGORIES.CHANGE_ADDRESS_NAME} />
+        </Modal.Header>
+        <Form onSubmit={handleUpdateBlockName}>
+          <Modal.Body>
+            <GenericInputField
+              label="Location"
+              name="location"
+              handleChange={(event) => {
+                const { value } = event.target as HTMLInputElement;
+                setAddressLocation(value);
+              }}
+              changeValue={addressLocation}
+              required={true}
+            />
+          </Modal.Body>
+          <ModalFooter
+            handleClick={modal.hide}
+            userAccessLevel={footerSaveAcl}
+            isSaving={isSaving}
+          />
+        </Form>
+      </Modal>
+    );
+  }
+);
+
+export default ChangeAddressLocation;
diff --git a/src/components/modal/newprivateadd.tsx b/src/components/modal/newprivateadd.tsx
@@ -32,6 +32,7 @@ const NewPrivateAddress = NiceModal.create(
   }: NewPrivateAddressModalProps) => {
     const [postalCode, setPostalCode] = useState("");
     const [name, setName] = useState("");
+    const [location, setLocation] = useState("");
     const [sequence, setSequence] = useState("");
     const [isSaving, setIsSaving] = useState(false);
     const modal = useModal();
@@ -99,6 +100,7 @@ const NewPrivateAddress = NiceModal.create(
           set(addressReference, {
             name: name,
             feedback: "",
+            location: location,
             units: floorDetails,
             type: TERRITORY_TYPES.PRIVATE
           })
@@ -152,8 +154,21 @@ const NewPrivateAddress = NiceModal.create(
               }}
               changeValue={name}
               required={true}
-              placeholder={"For eg, Sembawang Boulevard Crescent"}
+              information="Name of the address"
             />
+            {!requiresPostalCode && (
+              <GenericInputField
+                label="Address Location"
+                name="location"
+                handleChange={(e: ChangeEvent<HTMLElement>) => {
+                  const { value } = e.target as HTMLInputElement;
+                  setLocation(value);
+                }}
+                changeValue={location}
+                required={true}
+                information="Location of the address that will be used for Google Maps directions."
+              />
+            )}
             <GenericTextAreaField
               label="House Sequence"
               name="units"

diff --git a/src/components/modal/newpublicadd.tsx b/src/components/modal/newpublicadd.tsx
@@ -35,7 +35,7 @@ const NewPublicAddress = NiceModal.create(
     const [name, setName] = useState("");
     const [sequence, setSequence] = useState("");
     const [floors, setFloors] = useState(1);
-
+    const [location, setLocation] = useState("");
     const [isSaving, setIsSaving] = useState(false);
     const modal = useModal();
     const rollbar = useRollbar();
@@ -105,7 +105,8 @@ const NewPublicAddress = NiceModal.create(
             name: name,
             feedback: "",
             units: floorDetails,
-            type: TERRITORY_TYPES.PUBLIC
+            type: TERRITORY_TYPES.PUBLIC,
+            location: location
           })
         );
         alert(`Created ${modalDescription}, ${postalCode}.`);
@@ -159,10 +160,21 @@ const NewPublicAddress = NiceModal.create(
               }}
               changeValue={name}
               required={true}
-              placeholder={
-                "Block/Building name. Eg, 367, Sembawang Star Crescent"
-              }
+              information="Name of the address"
             />
+            {!requiresPostalCode && (
+              <GenericInputField
+                label="Address Location"
+                name="location"
+                handleChange={(e: ChangeEvent<HTMLElement>) => {
+                  const { value } = e.target as HTMLInputElement;
+                  setLocation(value);
+                }}
+                changeValue={location}
+                required={true}
+                information="Location of the address that will be used for Google Maps directions."
+              />
+            )}
             <FloorField
               handleChange={(e: ChangeEvent<HTMLElement>) => {
                 const { value } = e.target as HTMLInputElement;

diff --git a/src/components/navigation/branding.tsx b/src/components/navigation/branding.tsx
@@ -4,15 +4,19 @@ import { BrandingProps } from "../../utils/interface";
 
 const NavBarBranding = memo(({ naming }: BrandingProps) => {
   return (
-    <Navbar.Brand className="brand-wrap">
-      <img
-        alt=""
-        src="/favicon-32x32.png"
-        width="32"
-        height="32"
-        className="d-inline-block align-top"
-      />{" "}
-      <Navbar.Text className="fluid-bolding fluid-text">{naming}</Navbar.Text>
+    <Navbar.Brand className="brand-wrap d-flex">
+      <div style={{ flex: "0 0 10%", marginRight: "2px" }}>
+        <img
+          alt=""
+          src="/favicon-32x32.png"
+          width="32"
+          height="32"
+          className="d-inline-block align-top"
+        />
+      </div>
+      <div style={{ flex: "1" }}>
+        <Navbar.Text className="fluid-bolding fluid-text">{naming}</Navbar.Text>
+      </div>
     </Navbar.Brand>
   );
 });

diff --git a/src/pages/dashboard/admin.tsx b/src/pages/dashboard/admin.tsx
@@ -153,6 +153,9 @@ const ChangePassword = lazy(
 const ChangeAddressPostalCode = lazy(
   () => import("../../components/modal/changepostalcd")
 );
+const ChangeAddressLocation = lazy(
+  () => import("../../components/modal/changeaddlocation")
+);
 const ChangeAddressName = lazy(
   () => import("../../components/modal/changeaddname")
 );
@@ -317,7 +320,8 @@ function Admin({ user }: adminProps) {
                 floors: floorData,
                 feedback: postalSnapshot.feedback,
                 type: postalSnapshot.type,
-                instructions: postalSnapshot.instructions
+                instructions: postalSnapshot.instructions,
+                location: postalSnapshot.location
               };
               setAddressData(
                 (existingAddresses) =>
@@ -1373,6 +1377,7 @@ function Admin({ user }: adminProps) {
                 : addressElement.x_zip;
             const assigneeCount = addressElement.assigneeDetailsList.length;
             const personalCount = addressElement.personalDetailsList.length;
+            const currentLocation = addressElement.location || "";
             return (
               <Accordion.Item
                 key={`accordion-${currentPostalcode}`}
@@ -1598,7 +1603,7 @@ function Admin({ user }: adminProps) {
                               GetDirection(
                                 policy.requiresPostcode()
                                   ? zipcode
-                                  : currentPostalname,
+                                  : currentLocation,
                                 policy.origin
                               ),
                               "_blank"
@@ -1690,6 +1695,23 @@ function Admin({ user }: adminProps) {
                                 ? "Postal Code"
                                 : "Map Number"}
                             </Dropdown.Item>
+                            {!policy.requiresPostcode() && (
+                              <Dropdown.Item
+                                onClick={() =>
+                                  ModalManager.show(
+                                    SuspenseComponent(ChangeAddressLocation),
+                                    {
+                                      congregation: code,
+                                      footerSaveAcl: userAccessLevel,
+                                      postalCode: currentPostalcode,
+                                      location: currentLocation
+                                    }
+                                  )
+                                }
+                              >
+                                Change Location
+                              </Dropdown.Item>
+                            )}
                             <Dropdown.Item
                               onClick={() => {
                                 setValues({

diff --git a/src/pages/territory/slip.tsx b/src/pages/territory/slip.tsx
@@ -50,6 +50,7 @@ const Slip = ({
   const [floors, setFloors] = useState<Array<floorDetails>>([]);
   const [postalName, setPostalName] = useState<string>();
   const [postalZip, setPostalZip] = useState<string>();
+  const [addressLocation, setAddressLocation] = useState<string>();
   const [values, setValues] = useState<object>({});
   const [policy, setPolicy] = useState<Policy>(new Policy());
   const [options, setOptions] = useState<Array<OptionProps>>([]);
@@ -137,6 +138,7 @@ const Slip = ({
             setPostalZip(postalSnapshot.x_zip);
             setPostalName(postalSnapshot.name);
             setTerritoryType(postalSnapshot.type);
+            setAddressLocation(postalSnapshot.location);
             processAddressData(
               congregationcode,
               postalcode,
@@ -183,7 +185,7 @@ const Slip = ({
               title={
                 <InfoImg className={`${instructions ? "blinking" : ""}`} />
               }
-              align="end"
+              align={{ sm: "end" }}
             >
               {instructions && (
                 <NavDropdown.Item
@@ -208,7 +210,7 @@ const Slip = ({
                     GetDirection(
                       policy.requiresPostcode()
                         ? zipcode
-                        : (postalName as string),
+                        : (addressLocation as string),
                       policy.origin
                     ),
                     "_blank"

diff --git a/src/utils/helpers/directiongenerator.ts b/src/utils/helpers/directiongenerator.ts
@@ -4,7 +4,14 @@ const getDirection = (
   postalCode: string,
   country = DEFAULT_MAP_DIRECTION_CONGREGATION_LOCATION
 ) => {
-  return `https://www.google.com/maps/dir/?api=1&destination=${postalCode},${country}&travelmode=walking`;
+  const travelMode =
+    country !== DEFAULT_MAP_DIRECTION_CONGREGATION_LOCATION
+      ? ""
+      : "&travelmode=walking";
+
+  const destination = encodeURIComponent(`${postalCode},${country}`);
+
+  return `https://www.google.com/maps/dir/?api=1&destination=${destination}${travelMode}`;
 };
 
 export default getDirection;
diff --git a/src/utils/interface.tsx b/src/utils/interface.tsx
@@ -96,6 +96,7 @@ export interface addressDetails extends nameInterface, postalInterface {
   feedback: string;
   type: number;
   instructions: string;
+  location?: string;
 }
 
 export interface FormProps {
@@ -359,6 +360,13 @@ export interface ChangeAddressPostalCodeModalProps
   requiresPostalCode: boolean;
 }
 
+export interface ChangeAddressLocationModalProps
+  extends postalInterface,
+    congregationInterface,
+    footerInterface {
+  location: string | undefined;
+}
+
 export interface ChangeTerritoryCodeModalProps
   extends congregationInterface,
     footerInterface {