From c2aaf8844fe539a32f6c234ffccd126195ecd9ec Mon Sep 17 00:00:00 2001
From: swtmply <delosreyesjohnallen@gmail.com>
Date: Fri, 26 May 2023 02:24:34 +0800
Subject: [PATCH] IO-2280 added config anchors

---
 .../shop-info/shop-info.component.jsx         | 13 ++-
 .../shop-info/shop-info.general.component.jsx | 81 +++++++++++++++----
 .../shop-info/shop-info.intake.component.jsx  | 10 ++-
 ...p-info.responsibilitycenters.component.jsx | 33 +++++---
 .../shop-info.rostatus.component.jsx          |  3 +-
 .../shop-info.scheduling.component.jsx        |  6 +-
 client/src/pages/shop/shop.page.component.jsx | 10 ++-
 7 files changed, 123 insertions(+), 33 deletions(-)

diff --git a/client/src/components/shop-info/shop-info.component.jsx b/client/src/components/shop-info/shop-info.component.jsx
index 9baeb2c58..efabb6d5b 100644
--- a/client/src/components/shop-info/shop-info.component.jsx
+++ b/client/src/components/shop-info/shop-info.component.jsx
@@ -15,6 +15,8 @@ import ShopInfoResponsibilityCenterComponent from "./shop-info.responsibilitycen
 import ShopInfoROStatusComponent from "./shop-info.rostatus.component";
 import ShopInfoSchedulingComponent from "./shop-info.scheduling.component";
 import ShopInfoSpeedPrint from "./shop-info.speedprint.component";
+import { useHistory, useLocation } from "react-router-dom";
+import queryString from "query-string";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -31,6 +33,10 @@ export function ShopInfoComponent({ bodyshop, form, saveLoading }) {
     bodyshop.imexshopid
   );
   const { t } = useTranslation();
+  const history = useHistory();
+  const location = useLocation();
+  const search = queryString.parse(location.search);
+
   return (
     <Card
       extra={
@@ -43,7 +49,12 @@ export function ShopInfoComponent({ bodyshop, form, saveLoading }) {
         </Button>
       }
     >
-      <Tabs>
+      <Tabs
+        defaultActiveKey={search.subtab}
+        onChange={(key) =>
+          history.push({ search: `?tab=${search.tab}&subtab=${key}` })
+        }
+      >
         <Tabs.TabPane key="general" tab={t("bodyshop.labels.shopinfo")}>
           <ShopInfoGeneral form={form} />
         </Tabs.TabPane>
diff --git a/client/src/components/shop-info/shop-info.general.component.jsx b/client/src/components/shop-info/shop-info.general.component.jsx
index 35415edf5..416d2f658 100644
--- a/client/src/components/shop-info/shop-info.general.component.jsx
+++ b/client/src/components/shop-info/shop-info.general.component.jsx
@@ -24,9 +24,13 @@ const timeZonesList = momentTZ.tz.names();
 
 export default function ShopInfoGeneral({ form }) {
   const { t } = useTranslation();
+
   return (
     <div>
-      <LayoutFormRow header={t("bodyshop.labels.businessinformation")}>
+      <LayoutFormRow
+        header={t("bodyshop.labels.businessinformation")}
+        id="businessinformation"
+      >
         <Form.Item
           label={t("bodyshop.fields.shopname")}
           name="shopname"
@@ -155,7 +159,10 @@ export default function ShopInfoGeneral({ form }) {
           <InputNumber min={0} />
         </Form.Item>
       </LayoutFormRow>
-      <LayoutFormRow header={t("bodyshop.labels.accountingsetup")}>
+      <LayoutFormRow
+        header={t("bodyshop.labels.accountingsetup")}
+        id="accountingsetup"
+      >
         <Form.Item
           label={t("bodyshop.labels.qbo")}
           valuePropName="checked"
@@ -386,7 +393,10 @@ export default function ShopInfoGeneral({ form }) {
           <Select mode="tags" />
         </Form.Item>
       </LayoutFormRow>
-      <LayoutFormRow header={t("bodyshop.labels.scoreboardsetup")}>
+      <LayoutFormRow
+        header={t("bodyshop.labels.scoreboardsetup")}
+        id="scoreboardsetup"
+      >
         <Form.Item
           label={t("bodyshop.fields.dailypainttarget")}
           name={["scoreboard_target", "dailyPaintTarget"]}
@@ -445,7 +455,10 @@ export default function ShopInfoGeneral({ form }) {
           <InputNumber min={1} precision={1} />
         </Form.Item>
       </LayoutFormRow>
-      <LayoutFormRow header={t("bodyshop.labels.systemsettings")}>
+      <LayoutFormRow
+        header={t("bodyshop.labels.systemsettings")}
+        id="systemsettings"
+      >
         <Form.Item
           name={["md_referral_sources"]}
           label={t("bodyshop.fields.md_referral_sources")}
@@ -655,7 +668,11 @@ export default function ShopInfoGeneral({ form }) {
           <Input />
         </Form.Item>
       </LayoutFormRow>
-      <LayoutFormRow grow header={t("bodyshop.labels.messagingpresets")}>
+      <LayoutFormRow
+        grow
+        header={t("bodyshop.labels.messagingpresets")}
+        id="messagingpresets"
+      >
         <Form.List name={["md_messaging_presets"]}>
           {(fields, { add, remove, move }) => {
             return (
@@ -720,7 +737,11 @@ export default function ShopInfoGeneral({ form }) {
           }}
         </Form.List>
       </LayoutFormRow>
-      <LayoutFormRow grow header={t("bodyshop.labels.notespresets")}>
+      <LayoutFormRow
+        grow
+        header={t("bodyshop.labels.notespresets")}
+        id="notespresets"
+      >
         <Form.List name={["md_notes_presets"]}>
           {(fields, { add, remove, move }) => {
             return (
@@ -785,7 +806,11 @@ export default function ShopInfoGeneral({ form }) {
           }}
         </Form.List>
       </LayoutFormRow>
-      <LayoutFormRow grow header={t("bodyshop.labels.partslocations")}>
+      <LayoutFormRow
+        grow
+        header={t("bodyshop.labels.partslocations")}
+        id="partslocations"
+      >
         <Form.List name={["md_parts_locations"]}>
           {(fields, { add, remove, move }) => {
             return (
@@ -839,7 +864,11 @@ export default function ShopInfoGeneral({ form }) {
           }}
         </Form.List>
       </LayoutFormRow>
-      <LayoutFormRow grow header={t("bodyshop.labels.insurancecos")}>
+      <LayoutFormRow
+        grow
+        header={t("bodyshop.labels.insurancecos")}
+        id="insurancecos"
+      >
         <Form.List name={["md_ins_cos"]}>
           {(fields, { add, remove, move }) => {
             return (
@@ -935,7 +964,11 @@ export default function ShopInfoGeneral({ form }) {
           }}
         </Form.List>
       </LayoutFormRow>
-      <LayoutFormRow grow header={t("bodyshop.labels.estimators")}>
+      <LayoutFormRow
+        grow
+        header={t("bodyshop.labels.estimators")}
+        id="estimators"
+      >
         <Form.List name={["md_estimators"]}>
           {(fields, { add, remove, move }) => {
             return (
@@ -1024,7 +1057,11 @@ export default function ShopInfoGeneral({ form }) {
           }}
         </Form.List>
       </LayoutFormRow>
-      <LayoutFormRow grow header={t("bodyshop.labels.filehandlers")}>
+      <LayoutFormRow
+        grow
+        header={t("bodyshop.labels.filehandlers")}
+        id="filehandlers"
+      >
         <Form.List name={["md_filehandlers"]}>
           {(fields, { add, remove, move }) => {
             return (
@@ -1106,7 +1143,11 @@ export default function ShopInfoGeneral({ form }) {
           }}
         </Form.List>
       </LayoutFormRow>
-      <LayoutFormRow grow header={t("bodyshop.fields.md_ccc_rates")}>
+      <LayoutFormRow
+        grow
+        header={t("bodyshop.fields.md_ccc_rates")}
+        id="md_ccc_rates"
+      >
         <Form.List name={["md_ccc_rates"]}>
           {(fields, { add, remove, move }) => {
             return (
@@ -1223,7 +1264,11 @@ export default function ShopInfoGeneral({ form }) {
           }}
         </Form.List>
       </LayoutFormRow>
-      <LayoutFormRow grow header={t("bodyshop.fields.md_jobline_presets")}>
+      <LayoutFormRow
+        grow
+        header={t("bodyshop.fields.md_jobline_presets")}
+        id="md_jobline_presets"
+      >
         <Form.List name={["md_jobline_presets"]}>
           {(fields, { add, remove, move }) => {
             return (
@@ -1404,7 +1449,11 @@ export default function ShopInfoGeneral({ form }) {
           }}
         </Form.List>
       </LayoutFormRow>
-      <LayoutFormRow grow header={t("bodyshop.fields.md_parts_order_comment")}>
+      <LayoutFormRow
+        grow
+        header={t("bodyshop.fields.md_parts_order_comment")}
+        id="md_parts_order_comment"
+      >
         <Form.List name={["md_parts_order_comment"]}>
           {(fields, { add, remove, move }) => {
             return (
@@ -1470,7 +1519,11 @@ export default function ShopInfoGeneral({ form }) {
           }}
         </Form.List>
       </LayoutFormRow>
-      <LayoutFormRow grow header={t("bodyshop.labels.md_to_emails")}>
+      <LayoutFormRow
+        grow
+        header={t("bodyshop.labels.md_to_emails")}
+        id="md_to_emails"
+      >
         <Form.List name={["md_to_emails"]}>
           {(fields, { add, remove, move }) => {
             return (
diff --git a/client/src/components/shop-info/shop-info.intake.component.jsx b/client/src/components/shop-info/shop-info.intake.component.jsx
index 4cef5012d..e202dc724 100644
--- a/client/src/components/shop-info/shop-info.intake.component.jsx
+++ b/client/src/components/shop-info/shop-info.intake.component.jsx
@@ -20,7 +20,10 @@ export default function ShopInfoIntakeChecklistComponent({ form }) {
   const TemplateListGenerated = TemplateList();
   return (
     <div>
-      <LayoutFormRow header={t("bodyshop.labels.intakechecklist")}>
+      <LayoutFormRow
+        header={t("bodyshop.labels.intakechecklist")}
+        id="intakechecklist"
+      >
         <Form.List name={["intakechecklist", "form"]}>
           {(fields, { add, remove, move }) => {
             return (
@@ -188,7 +191,10 @@ export default function ShopInfoIntakeChecklistComponent({ form }) {
         </Form.Item>
       </SelectorDiv>
 
-      <LayoutFormRow header={t("bodyshop.labels.deliverchecklist")}>
+      <LayoutFormRow
+        header={t("bodyshop.labels.deliverchecklist")}
+        id="deliverchecklist"
+      >
         <Form.List name={["deliverchecklist", "form"]}>
           {(fields, { add, remove, move }) => {
             return (
diff --git a/client/src/components/shop-info/shop-info.responsibilitycenters.component.jsx b/client/src/components/shop-info/shop-info.responsibilitycenters.component.jsx
index e2e06f98b..9b7f0b0a6 100644
--- a/client/src/components/shop-info/shop-info.responsibilitycenters.component.jsx
+++ b/client/src/components/shop-info/shop-info.responsibilitycenters.component.jsx
@@ -95,7 +95,6 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
               {form.getFieldValue("pbs_serialnumber")}
             </DataLabel>
           )}
-
           <LayoutFormRow>
             <Form.Item
               label={t("bodyshop.fields.dms.default_journal")}
@@ -315,7 +314,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
           </DataLabel>
         </>
       )}
-      <LayoutFormRow header={t("bodyshop.labels.responsibilitycenters.costs")}>
+      <LayoutFormRow
+        header={t("bodyshop.labels.responsibilitycenters.costs")}
+        id="costs"
+      >
         <Form.List name={["md_responsibility_centers", "costs"]}>
           {(fields, { add, remove }) => {
             return (
@@ -462,6 +464,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
 
       <LayoutFormRow
         header={t("bodyshop.labels.responsibilitycenters.profits")}
+        id="profits"
       >
         <Form.List name={["md_responsibility_centers", "profits"]}>
           {(fields, { add, remove }) => {
@@ -601,7 +604,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                     {fields.map((field, index) => (
                       <Form.Item key={field.key}>
                         <div>
-                          <LayoutFormRow>
+                          <LayoutFormRow id="mappingname">
                             <Form.Item
                               label={t("bodyshop.fields.dms.mappingname")}
                               key={`${index}name`}
@@ -631,6 +634,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                           </LayoutFormRow>
                           <LayoutFormRow
                             header={t("bodyshop.labels.defaultcostsmapping")}
+                            id="defaultcostsmapping"
                           >
                             <Form.Item
                               label={t(
@@ -4088,6 +4092,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
 
       <LayoutFormRow
         header={t("bodyshop.labels.responsibilitycenters.tax_accounts")}
+        id="tax_accounts"
       >
         <Form.Item
           label={t("bodyshop.fields.responsibilitycenters.federal_tax")}
@@ -4202,7 +4207,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
         </Form.Item>
       </LayoutFormRow>
       {DmsAp.treatment === "on" && (
-        <LayoutFormRow>
+        <LayoutFormRow id="federal_tax_itc">
           <Form.Item
             label={t("bodyshop.fields.responsibilitycenters.federal_tax_itc")}
             rules={[
@@ -4316,7 +4321,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
           </Form.Item>
         </LayoutFormRow>
       )}
-      <LayoutFormRow>
+      <LayoutFormRow id="state_tax">
         <Form.Item
           label={t("bodyshop.fields.responsibilitycenters.state_tax")}
           rules={[
@@ -4414,7 +4419,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
           <InputNumber precision={2} />
         </Form.Item>
       </LayoutFormRow>
-      <LayoutFormRow>
+      <LayoutFormRow id="local_tax">
         <Form.Item
           label={t("bodyshop.fields.responsibilitycenters.local_tax")}
           rules={[
@@ -4512,7 +4517,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
           <InputNumber precision={2} />
         </Form.Item>
       </LayoutFormRow>
-      <LayoutFormRow header={<div>AR</div>}>
+      <LayoutFormRow header={<div>AR</div>} id="AR">
         {/* <Form.Item
           label={t("bodyshop.fields.responsibilitycenters.ar")}
           rules={[
@@ -4576,7 +4581,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
       </LayoutFormRow>
 
       {DmsAp.treatment === "on" && (
-        <LayoutFormRow header={t("bodyshop.fields.responsibilitycenters.ap")}>
+        <LayoutFormRow
+          header={t("bodyshop.fields.responsibilitycenters.ap")}
+          id="ap"
+        >
           {/* <Form.Item
             label={t("bodyshop.fields.responsibilitycenters.ap")}
             rules={[
@@ -4639,7 +4647,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
           </Form.Item>
         </LayoutFormRow>
       )}
-      <LayoutFormRow header={<div>Refund</div>}>
+      <LayoutFormRow header={<div>Refund</div>} id="refund">
         {/* <Form.Item
           label={t("bodyshop.fields.responsibilitycenters.refund")}
           rules={[
@@ -4702,7 +4710,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
         </Form.Item>
       </LayoutFormRow>
       {Qb_Multi_Ar.treatment === "on" && (
-        <LayoutFormRow header={<div>Multiple Payers Item</div>}>
+        <LayoutFormRow
+          header={<div>Multiple Payers Item</div>}
+          id="accountitem"
+        >
           <Form.Item
             label={t("bodyshop.fields.responsibilitycenter_accountitem")}
             rules={[
@@ -4730,7 +4741,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
             <div>
               {fields.map((field, index) => (
                 <Form.Item key={field.key}>
-                  <LayoutFormRow>
+                  <LayoutFormRow id="sales_tax_codes">
                     <Form.Item
                       label={t(
                         "bodyshop.fields.responsibilitycenters.sales_tax_codes.description"
diff --git a/client/src/components/shop-info/shop-info.rostatus.component.jsx b/client/src/components/shop-info/shop-info.rostatus.component.jsx
index 29ad53ecd..7fab39746 100644
--- a/client/src/components/shop-info/shop-info.rostatus.component.jsx
+++ b/client/src/components/shop-info/shop-info.rostatus.component.jsx
@@ -44,7 +44,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
   };
 
   return (
-    <SelectorDiv>
+    <SelectorDiv id="jobstatus">
       <Form.Item
         name={["md_ro_statuses", "statuses"]}
         label={t("bodyshop.labels.alljobstatuses")}
@@ -322,6 +322,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
         <LayoutFormRow
           grow
           header={t("bodyshop.fields.statuses.production_colors")}
+          id="production_colors"
         >
           <Form.List name={["md_ro_statuses", "production_colors"]}>
             {(fields, { add, remove, move }) => {
diff --git a/client/src/components/shop-info/shop-info.scheduling.component.jsx b/client/src/components/shop-info/shop-info.scheduling.component.jsx
index 56bf72926..c4160a367 100644
--- a/client/src/components/shop-info/shop-info.scheduling.component.jsx
+++ b/client/src/components/shop-info/shop-info.scheduling.component.jsx
@@ -92,7 +92,7 @@ export default function ShopInfoSchedulingComponent({ form }) {
         </Form.Item>
       </LayoutFormRow>
       <Divider orientation="left">{t("bodyshop.labels.workingdays")}</Divider>
-      <Space wrap size="large">
+      <Space wrap size="large" id="workingdays">
         <Form.Item
           label={t("general.labels.sunday")}
           name={["workingdays", "sunday"]}
@@ -143,7 +143,7 @@ export default function ShopInfoSchedulingComponent({ form }) {
           <Switch />
         </Form.Item>
       </Space>
-      <LayoutFormRow header={t("bodyshop.labels.apptcolors")}>
+      <LayoutFormRow header={t("bodyshop.labels.apptcolors")} id="apptcolors">
         <Form.List name={["appt_colors"]}>
           {(fields, { add, remove, move }) => {
             return (
@@ -208,7 +208,7 @@ export default function ShopInfoSchedulingComponent({ form }) {
           }}
         </Form.List>
       </LayoutFormRow>
-      <LayoutFormRow header={t("bodyshop.labels.ssbuckets")}>
+      <LayoutFormRow header={t("bodyshop.labels.ssbuckets")} id="ssbuckets">
         <Form.List name={["ssbuckets"]}>
           {(fields, { add, remove, move }) => {
             return (
diff --git a/client/src/pages/shop/shop.page.component.jsx b/client/src/pages/shop/shop.page.component.jsx
index 7c9e4d5b2..47107be43 100644
--- a/client/src/pages/shop/shop.page.component.jsx
+++ b/client/src/pages/shop/shop.page.component.jsx
@@ -1,5 +1,7 @@
 import { Tabs } from "antd";
 import React, { useEffect } from "react";
+import { useHistory, useLocation } from "react-router-dom";
+import queryString from "query-string";
 import { useTranslation } from "react-i18next";
 import ShopEmployeesContainer from "../../components/shop-employees/shop-employees.container";
 import ShopInfoContainer from "../../components/shop-info/shop-info.container";
@@ -24,6 +26,9 @@ const mapDispatchToProps = (dispatch) => ({
 
 export function ShopPage({ bodyshop, setSelectedHeader, setBreadcrumbs }) {
   const { t } = useTranslation();
+  const history = useHistory();
+  const search = queryString.parse(useLocation().search);
+
   useEffect(() => {
     document.title = t("titles.shop");
     setSelectedHeader("shop");
@@ -37,7 +42,10 @@ export function ShopPage({ bodyshop, setSelectedHeader, setBreadcrumbs }) {
 
   return (
     <RbacWrapper action="shop:config">
-      <Tabs>
+      <Tabs
+        defaultActiveKey={search.tab}
+        onChange={(key) => history.push({ search: `?tab=${key}` })}
+      >
         <Tabs.TabPane tab={t("bodyshop.labels.shopinfo")} key="info">
           <ShopInfoContainer />
         </Tabs.TabPane>