IO-1454 Disable production colors & add feature flags.

client/package.json

@@ -14,6 +14,7 @@
     "@openreplay/tracker-redux": "^3.0.0",
     "@sentry/react": "^6.13.3",
     "@sentry/tracing": "^6.13.3",
+    "@splitsoftware/splitio-react": "^1.3.0",
     "@stripe/react-stripe-js": "^1.6.0",
     "@stripe/stripe-js": "^1.20.2",
     "@tanem/react-nprogress": "^3.0.81",

client/src/App/App.container.jsx

@@ -1,4 +1,8 @@
 import { ApolloProvider } from "@apollo/client";
+//import trackerRedux from "@openreplay/tracker-redux";
+import Tracker from "@openreplay/tracker";
+import trackerGraphQL from "@openreplay/tracker-graphql";
+import { SplitFactory, SplitSdk } from "@splitsoftware/splitio-react";
 import { ConfigProvider } from "antd";
 import enLocale from "antd/es/locale/en_US";
 import LogRocket from "logrocket";
@@ -6,13 +10,11 @@ import moment from "moment";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import GlobalLoadingBar from "../components/global-loading-bar/global-loading-bar.component";
-import client from "../utils/GraphQLClient";
-import App from "./App";
-import trackerGraphQL from "@openreplay/tracker-graphql";
-//import trackerRedux from "@openreplay/tracker-redux";
-import Tracker from "@openreplay/tracker";
 //import trackerAssist from "@openreplay/tracker-assist";
 import { getCurrentUser } from "../firebase/firebase.utils";
+import client from "../utils/GraphQLClient";
+import App from "./App";
+
 moment.locale("en-US");
 
 export const tracker = new Tracker({
@@ -36,6 +38,13 @@ export const recordGraphQL = tracker.use(trackerGraphQL());
 tracker.start();
 if (process.env.NODE_ENV === "production") LogRocket.init("gvfvfw/bodyshopapp");
 
+export const factory = SplitSdk({
+  core: {
+    authorizationKey: process.env.REACT_APP_SPLIT_API,
+    key: "anon",
+  },
+});
+
 export default function AppContainer() {
   const { t } = useTranslation();
 
@@ -53,7 +62,9 @@ export default function AppContainer() {
         }}
       >
         <GlobalLoadingBar />
-        <App />
+        <SplitFactory factory={factory}>
+          <App />
+        </SplitFactory>
       </ConfigProvider>
     </ApolloProvider>
   );

client/src/components/production-list-table/production-list-table.component.jsx

@@ -24,6 +24,7 @@ import ProductionListSaveConfigButton from "../production-list-save-config-butto
 import ProductionListPrint from "./production-list-print.component";
 import ProductionListTableViewSelect from "./production-list-table-view-select.component";
 import ResizeableTitle from "./production-list-table.resizeable.component";
+import { useTreatments } from "@splitsoftware/splitio-react";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -39,7 +40,9 @@ export function ProductionListTable({
   currentUser,
 }) {
   const [searchText, setSearchText] = useState("");
-
+  const { Production_List_Status_Colors } = useTreatments([
+    "Production_List_Status_Colors",
+  ]);
   const assoc = bodyshop.associations.find(
     (a) => a.useremail === currentUser.email
   );
@@ -221,21 +224,24 @@ export function ProductionListTable({
           pagination={false}
           size="small"
           className="production-list-table"
-          onRow={(record, index) => {
+          onRow={
-            if (!bodyshop.md_ro_statuses.production_colors) return null;
+            Production_List_Status_Colors.treatment === "on" &&
+            ((record, index) => {
+              if (!bodyshop.md_ro_statuses.production_colors) return null;
 
-            const color = bodyshop.md_ro_statuses.production_colors.find(
+              const color = bodyshop.md_ro_statuses.production_colors.find(
-              (x) => x.status === record.status
+                (x) => x.status === record.status
-            );
+              );
 
-            if (!color) return null;
+              if (!color) return null;
 
-            return {
+              return {
-              style: {
+                style: {
-                backgroundColor: `rgb(${color.color.r},${color.color.g},${color.color.b},${color.color.a})`,
+                  backgroundColor: `rgb(${color.color.r},${color.color.g},${color.color.b},${color.color.a})`,
-              },
+                },
-            };
+              };
-          }}
+            })
+          }
           components={{
             header: {
               cell: ResizeableTitle,

client/src/components/shop-info/shop-info.rostatus.component.jsx

@@ -1,4 +1,5 @@
 import { DeleteFilled } from "@ant-design/icons";
+import { useTreatments } from "@splitsoftware/splitio-react";
 import { Button, Form, Select, Space } from "antd";
 import React, { useState } from "react";
 import { ChromePicker } from "react-color";
@@ -14,6 +15,9 @@ const SelectorDiv = styled.div`
 
 export default function ShopInfoROStatusComponent({ form }) {
   const { t } = useTranslation();
+  const { Production_List_Status_Colors } = useTreatments([
+    "Production_List_Status_Colors",
+  ]);
 
   const [options, setOptions] = useState(
     form.getFieldValue(["md_ro_statuses", "statuses"]) || []
@@ -260,24 +264,50 @@ export default function ShopInfoROStatusComponent({ form }) {
           </Select>
         </Form.Item>
       </LayoutFormRow>
-      <LayoutFormRow
+      {Production_List_Status_Colors.treatment === "on" && (
-        grow
+        <LayoutFormRow
-        header={t("bodyshop.fields.statuses.production_colors")}
+          grow
-      >
+          header={t("bodyshop.fields.statuses.production_colors")}
-        <Form.List name={["md_ro_statuses", "production_colors"]}>
+        >
-          {(fields, { add, remove, move }) => {
+          <Form.List name={["md_ro_statuses", "production_colors"]}>
-            return (
+            {(fields, { add, remove, move }) => {
-              <div>
+              return (
-                <LayoutFormRow>
+                <div>
-                  {fields.map((field, index) => (
+                  <LayoutFormRow>
-                    <Form.Item key={field.key}>
+                    {fields.map((field, index) => (
-                      <Space direction="vertical">
+                      <Form.Item key={field.key}>
-                        <div style={{ display: "flex" }}>
+                        <Space direction="vertical">
+                          <div style={{ display: "flex" }}>
+                            <Form.Item
+                              style={{ flex: 1 }}
+                              label={t("jobs.fields.status")}
+                              key={`${index}status`}
+                              name={[field.name, "status"]}
+                              rules={[
+                                {
+                                  required: true,
+                                  //message: t("general.validation.required"),
+                                },
+                              ]}
+                            >
+                              <Select>
+                                {options.map((item, idx) => (
+                                  <Select.Option key={idx} value={item}>
+                                    {item}
+                                  </Select.Option>
+                                ))}
+                              </Select>
+                            </Form.Item>
+                            <DeleteFilled
+                              onClick={() => {
+                                remove(field.name);
+                              }}
+                            />
+                          </div>
                           <Form.Item
-                            style={{ flex: 1 }}
+                            label={t("bodyshop.fields.statuses.color")}
-                            label={t("jobs.fields.status")}
+                            key={`${index}color`}
-                            key={`${index}status`}
+                            name={[field.name, "color"]}
-                            name={[field.name, "status"]}
                             rules={[
                               {
                                 required: true,
@@ -285,53 +315,29 @@ export default function ShopInfoROStatusComponent({ form }) {
                               },
                             ]}
                           >
-                            <Select>
+                            <ColorPicker />
-                              {options.map((item, idx) => (
-                                <Select.Option key={idx} value={item}>
-                                  {item}
-                                </Select.Option>
-                              ))}
-                            </Select>
                           </Form.Item>
-                          <DeleteFilled
+                        </Space>
-                            onClick={() => {
+                      </Form.Item>
-                              remove(field.name);
+                    ))}
-                            }}
+                  </LayoutFormRow>
-                          />
+                  <Form.Item>
-                        </div>
+                    <Button
-                        <Form.Item
+                      type="dashed"
-                          label={t("bodyshop.fields.statuses.color")}
+                      onClick={() => {
-                          key={`${index}color`}
+                        add();
-                          name={[field.name, "color"]}
+                      }}
-                          rules={[
+                      style={{ width: "100%" }}
-                            {
+                    >
-                              required: true,
+                      {t("general.actions.add")}
-                              //message: t("general.validation.required"),
+                    </Button>
-                            },
+                  </Form.Item>
-                          ]}
+                </div>
-                        >
+              );
-                          <ColorPicker />
+            }}
-                        </Form.Item>
+          </Form.List>
-                      </Space>
+        </LayoutFormRow>
-                    </Form.Item>
+      )}
-                  ))}
-                </LayoutFormRow>
-                <Form.Item>
-                  <Button
-                    type="dashed"
-                    onClick={() => {
-                      add();
-                    }}
-                    style={{ width: "100%" }}
-                  >
-                    {t("general.actions.add")}
-                  </Button>
-                </Form.Item>
-              </div>
-            );
-          }}
-        </Form.List>
-      </LayoutFormRow>
     </SelectorDiv>
   );
 }

client/src/pages/manage/manage.page.container.jsx

@@ -6,8 +6,8 @@ import AlertComponent from "../../components/alert/alert.component";
 import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
 import { QUERY_BODYSHOP } from "../../graphql/bodyshop.queries";
 import { setBodyshop } from "../../redux/user/user.actions";
-import ManagePage from "./manage.page.component";
 import "../../utils/RegisterSw";
+import ManagePage from "./manage.page.component";
 
 const mapDispatchToProps = (dispatch) => ({
   setBodyshop: (bs) => dispatch(setBodyshop(bs)),
@@ -21,7 +21,9 @@ function ManagePageContainer({ match, setBodyshop }) {
   const { t } = useTranslation();
 
   useEffect(() => {
-    if (data) setBodyshop(data.bodyshops[0] || { notfound: true });
+    if (data) {
+      setBodyshop(data.bodyshops[0] || { notfound: true });
+    }
   }, [data, setBodyshop]);
 
   if (loading)

client/src/redux/user/user.sagas.js

@@ -13,7 +13,7 @@ import { doc } from "firebase/firestore";
 import i18next from "i18next";
 import LogRocket from "logrocket";
 import { all, call, delay, put, select, takeLatest } from "redux-saga/effects";
-import { tracker } from "../../App/App.container";
+import { factory, tracker } from "../../App/App.container";
 import {
   getCurrentUser,
   logImEXEvent,
@@ -250,6 +250,8 @@ export function* SetAuthLevelFromShopDetails({ payload }) {
   try {
     const userEmail = yield select((state) => state.user.currentUser.email);
 
+    factory.client(payload.imexshopid);
+
     const authRecord = payload.associations.filter(
       (a) => a.useremail === userEmail
     );

client/yarn.lock

@@ -2299,6 +2299,19 @@
   resolved "https://registry.yarnpkg.com/@sphinxxxx/color-conversion/-/color-conversion-2.2.2.tgz#03ecc29279e3c0c832f6185a5bfa3497858ac8ca"
   integrity sha512-XExJS3cLqgrmNBIP3bBw6+1oQ1ksGjFh0+oClDKFYpCCqx/hlqwWO5KO/S63fzUo67SxI9dMrF0y5T/Ey7h8Zw==
 
+"@splitsoftware/splitio-react@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@splitsoftware/splitio-react/-/splitio-react-1.3.0.tgz#370e027ac8f3c0b9d8e3d3058a294f4b05b215fe"
+  integrity sha512-UV7uXahSXp7+iNh7gyIFgan8yTLgVxgfTGSKSgMZTaQu6WZ3nUjU/7y0Dxl4f/sDuNoLwNWSW+QLT5mp8FBTUw==
+  dependencies:
+    "@babel/runtime" "^7.10.2"
+    "@types/google.analytics" "0.0.40"
+    events "3.1.0"
+    memoize-one "^5.1.1"
+    object-assign "^4.1.1"
+    shallowequal "^1.1.0"
+    unfetch "^4.1.0"
+
 "@stripe/react-stripe-js@^1.6.0":
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/@stripe/react-stripe-js/-/react-stripe-js-1.6.0.tgz#e3adf6a6ea6d839193164fa3cfe73cf52db3a080"
@@ -2537,6 +2550,11 @@
     "@types/minimatch" "*"
     "@types/node" "*"
 
+"@types/google.analytics@0.0.40":
+  version "0.0.40"
+  resolved "https://registry.yarnpkg.com/@types/google.analytics/-/google.analytics-0.0.40.tgz#35526e9d78333423c430ade1c821ce54d0f0f850"
+  integrity sha512-R3HpnLkqmKxhUAf8kIVvDVGJqPtaaZlW4yowNwjOZUTmYUQEgHh8Nh5wkSXKMroNAuQM8gbXJHmNbbgA8tdb7Q==
+
 "@types/graceful-fs@^4.1.2":
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/@types/graceful-fs/-/graceful-fs-4.1.5.tgz#21ffba0d98da4350db64891f92a9e5db3cdb4e15"
@@ -6014,6 +6032,11 @@ eventemitter3@^4.0.0, eventemitter3@^4.0.1:
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
   integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
 
+events@3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/events/-/events-3.1.0.tgz#84279af1b34cb75aa88bf5ff291f6d0bd9b31a59"
+  integrity sha512-Rv+u8MLHNOdMjTAFeT3nCjHn2aGlx435FP/sDHNaRhDEMwyI/aB22Kj2qIN8R0cw3z28psEQLYwxVKLsKrMgWg==
+
 events@^3.0.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
@@ -13655,6 +13678,11 @@ uncontrollable@^7.0.0:
     invariant "^2.2.4"
     react-lifecycles-compat "^3.0.4"
 
+unfetch@^4.1.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/unfetch/-/unfetch-4.2.0.tgz#7e21b0ef7d363d8d9af0fb929a5555f6ef97a3be"
+  integrity sha512-F9p7yYCn6cIW9El1zi0HI6vqpeIvBsr3dSuRO6Xuppb1u5rXpCPmMvLSyECLhybr9isec8Ohl0hPekMVrEinDA==
+
 unicode-canonical-property-names-ecmascript@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz#301acdc525631670d39f6146e0e77ff6bbdebddc"