Vite a (#2286)

* Fix create feature bug * fix for dynamic vertical centering on mobile (#2266) * Fix some bugs (#2274) * Bump http-proxy-middleware from 2.0.6 to 2.0.7 in /client (#2264) Bumps [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware) from 2.0.6 to 2.0.7. - [Release notes](https://github.com/chimurai/http-proxy-middleware/releases) - [Changelog](https://github.com/chimurai/http-proxy-middleware/blob/v2.0.7/CHANGELOG.md) - [Commits](chimurai/http-proxy-middleware@v2.0.6...v2.0.7) --- updated-dependencies: - dependency-name: http-proxy-middleware dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * 2262 feature flag survey and mobile survey (#2269) * fix feature refetch after add and delete * Fix user is null when use featureflag * Update userFeedbacksurvey mobile size * Undo usefeatureflag hook refech name * Update App.jsx Fixed spelling of userFeedbackSurvey * Fix refresh when add & delete --------- Co-authored-by: John Darragh <[email protected]> * Update social links (#2279) * Trigger the fetchMapboxResults function on the leading edge of the wait interval. (#2280) * Directly install mapbox-gl NPM pkg * Bumped version number to 1.0.86 * Fix deployment issue, remove validation from social media fields (#2282) * Bumped version to 1.0.87 * Rebuild package-lock.json files * Add email and phone input validation (#2284) * display current location button on mobile (#2283) * merge vite with develop --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Hannah Zulueta <[email protected]> Co-authored-by: Whitney Gould <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: June Zhao <[email protected]> Co-authored-by: Farhad Siraj <[email protected]> Co-authored-by: Jenna <[email protected]>
hackforla · Nov 20, 2024 · 84c1003 · 84c1003
1 parent 44d836f
commit 84c1003
Show file tree

Hide file tree

Showing 29 changed files with 2,821 additions and 5,798 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -1,7 +1,7 @@
 {
   "name": "foodoasis-client",
   "description": "React Client for Food Oasis",
-  "version": "1.0.84",
+  "version": "1.0.88",
   "author": "Hack for LA",
   "license": "GPL-2.0",
   "private": true,
@@ -22,22 +22,24 @@
     "@mapbox/geo-viewport": "^0.4.1",
     "@mui/icons-material": "^5.16.7",
     "@mui/lab": "^5.0.0-alpha.113",
-    "@mui/material": "^5.11.1",
+    "@mui/material": "^5.16.7",
     "@mui/x-data-grid": "^5.17.20",
     "@mui/x-date-pickers": "^6.8.0",
+    "@testing-library/dom": "^10.4.0",
     "@types/mapbox-gl": "^3.4.0",
     "axios": "^1.7.4",
     "dayjs": "^1.11.7",
     "debounce-fn": "^5.0.0",
     "formik": "^2.2.9",
     "js-file-download": "^0.4.12",
-    "mapbox-gl": "^3.7.0",
+    "mapbox-gl": "^3.8.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.6",
     "react-gtm-module": "^2.0.11",
     "react-helmet-async": "^1.3.0",
     "react-map-gl": "^7.1.7",
+    "react-number-format": "^5.4.2",
     "react-router-dom": "^6.10.0",
     "react-virtuoso": "^4.1.0",
     "yup": "^0.32.8"

diff --git a/client/src/App.jsx b/client/src/App.jsx
@@ -12,8 +12,11 @@ import { AppStateProvider } from "./appReducer";
 import SEO from "./components/SEO";
 import AppRoutes from "./Routes";
 import { MapProvider } from "react-map-gl";
+import useFeatureFlag from "./hooks/useFeatureFlag";
 
 function App() {
+  const hasUserFeedbackSuveyFeatureFlag = useFeatureFlag("userFeedbackSurvey");
+
   useEffect(() => {
     analytics.postEvent("visitAppComponent");
   }, []);
@@ -41,7 +44,7 @@ function App() {
                 <MapProvider>
                   <Router>
                     <AppRoutes />
-                    <SurveySnackbar />
+                    {hasUserFeedbackSuveyFeatureFlag && <SurveySnackbar />}
                   </Router>
                 </MapProvider>
               </ThemeProvider>

diff --git a/client/src/components/Admin/Features.jsx b/client/src/components/Admin/Features.jsx
@@ -51,7 +51,11 @@ const Features = () => {
     refetch: featureToLoginRefetch,
   } = useFeatureToLogin();
 
-  const { data: featuresData, loading: featuresLoading } = useFeatures();
+  const {
+    data: featuresData,
+    loading: featuresLoading,
+    refetch: featureRefetch,
+  } = useFeatures();
 
   useEffect(() => {
     if (featuresData && featureToLoginData) {
@@ -120,7 +124,7 @@ const Features = () => {
     }),
     onSubmit: async (values, { resetForm, setSubmitting }) => {
       await featureService.post(values);
-      featureToLoginRefetch();
+      await featureRefetch();
       resetForm();
       setSubmitting(false);
       handleModalClose();
@@ -288,7 +292,7 @@ const Features = () => {
                       onClick={async () => {
                         try {
                           await featureService.remove(row.featureId);
-                          featureToLoginRefetch();
+                          featureRefetch();
                         } catch (error) {
                           console.error(
                             "Failed to remove user from feature:",

diff --git a/client/src/components/Admin/OrganizationEdit.jsx b/client/src/components/Admin/OrganizationEdit.jsx
@@ -33,6 +33,15 @@ import MoreDetails from "./OrganizationEdit/MoreDetails";
 import Verification from "./OrganizationEdit/Verification";
 import Label from "./ui/Label";
 import Textarea from "./ui/Textarea";
+// import {
+//   FACEBOOK_REGEX,
+//   INSTAGRAM_REGEX,
+//   LINKEDIN_REGEX,
+//   PINTEREST_REGEX,
+//   TWITTER_REGEX,
+// } from "../../helpers/Constants";
+
+const phoneRegExp = /^\(\d{3}\) \d{3}-\d{4}$/;
 
 const HourSchema = Yup.object().shape({
   weekOfMonth: Yup.number().required("Interval is required"),
@@ -43,6 +52,9 @@ const HourSchema = Yup.object().shape({
 
 const validationSchema = Yup.object().shape({
   name: Yup.string().required("Name is required"),
+  phone: Yup.string()
+    .matches(phoneRegExp, "Invalid phone number")
+    .required("Phone number is required"),
   address1: Yup.string().required("Street address is required"),
   city: Yup.string().required("City is required"),
   state: Yup.string().required("State is required"),
@@ -51,34 +63,11 @@ const validationSchema = Yup.object().shape({
   longitude: Yup.number().required("Longitude is required").min(-180).max(180),
   email: Yup.string().email("Invalid email address format"),
   hours: Yup.array().of(HourSchema),
-  instagram: Yup.string()
-    .transform((value, originalValue) => (originalValue === "" ? null : value))
-    .matches(
-      /^(?:@?[a-zA-Z0-9_.]{1,30})$/,
-      "Valid Instagram username required."
-    )
-    .nullable(),
-  twitter: Yup.string()
-    .transform((value, originalValue) => (originalValue === "" ? null : value))
-    .matches(/^(?:@?[a-zA-Z0-9_]{1,15})$/, "Valid Twitter username required.")
-    .nullable(),
-
-  pinterest: Yup.string()
-    .transform((value, originalValue) =>
-      originalValue.trim() === "" ? null : value
-    )
-    .matches(
-      /^@?(?=.*[a-zA-Z])[a-zA-Z0-9_]{3,30}$/,
-      "Valid Pinterest username is required."
-    )
-    .nullable(),
-  facebook: Yup.string()
-    .matches(
-      /^[a-zA-Z][a-zA-Z0-9.]{4,49}$/,
-      "Valid Facebook username required."
-    )
-    .nullable(),
-
+  instagram: Yup.string().nullable(),
+  pinterest: Yup.string().nullable(),
+  facebook: Yup.string().nullable(),
+  linkedin: Yup.string().nullable(),
+  twitter: Yup.string().nullable(),
   selectedCategoryIds: Yup.array().min(
     1,
     "You must select at least one category"

diff --git a/client/src/components/Admin/OrganizationEdit/ContactDetails.jsx b/client/src/components/Admin/OrganizationEdit/ContactDetails.jsx
@@ -1,58 +1,8 @@
 import { Grid } from "@mui/material";
 import { TabPanel } from "components/Admin/ui/TabPanel";
-import { InputAdornment, TextField } from "@mui/material";
+import { TextField } from "@mui/material";
 import Label from "../ui/Label";
 
-const CustomTextFieldComponent = ({
-  id,
-  name,
-  placeholder,
-  value,
-  onChange,
-  onBlur,
-  touched,
-  errors,
-  startAdornment,
-}) => (
-  <TextField
-    id={id}
-    sx={{
-      "& .MuiOutlinedInput-root": {
-        borderRadius: "4px",
-        backgroundColor: "white",
-        paddingLeft: "0",
-        "& fieldset": {
-          borderColor: "grey",
-        },
-        "& input::placeholder": {
-          color: "#B0BEC5",
-          opacity: 1,
-        },
-      },
-      "& .MuiInputAdornment-root": {
-        backgroundColor: "#F4F6F8",
-        padding: "22px 8px 22px 8px",
-        borderRight: "1px solid grey",
-        borderRadius: "4px 0 0 4px",
-        color: "#B0BEC5",
-        margin: "-20px 0",
-      },
-    }}
-    name={name}
-    placeholder={placeholder}
-    value={value}
-    onChange={onChange}
-    onBlur={onBlur}
-    helperText={touched ? errors : ""}
-    error={Boolean(touched && errors)}
-    InputProps={{
-      startAdornment: startAdornment && (
-        <InputAdornment position="start">{startAdornment}</InputAdornment>
-      ),
-    }}
-  />
-);
-
 export default function ContactDetails({
   tabPage,
   values,
@@ -68,13 +18,13 @@ export default function ContactDetails({
           <div>
             <Label
               id="website"
-              label="Web Site"
-              tooltipTitle="The organization's web address"
+              label="Website"
+              tooltipTitle="Enter the Full URL for the organization's web site, e.g., https://www.hackforla.org"
             />
             <TextField
               id="website"
               name="website"
-              placeholder="Web Site"
+              placeholder="Website"
               value={values.website}
               onChange={handleChange}
               onBlur={handleBlur}
@@ -88,20 +38,18 @@ export default function ContactDetails({
             <Label
               id="instagram"
               label="Instagram"
-              tooltipTitle="Enter your Instagram username"
-              href="https://instagram.com/"
-              handle={values.instagram}
+              tooltipTitle="Enter a full Instagram URL, e.g., https://www.instagram.com/hackforla"
+              href={values.instagram}
             />
-            <CustomTextFieldComponent
+            <TextField
               id="instagram"
               name="instagram"
-              placeholder="Instagram username"
+              placeholder="https://instagram.com/..."
               value={values.instagram}
               onChange={handleChange}
               onBlur={handleBlur}
-              touched={touched.instagram}
-              errors={errors.instagram}
-              startAdornment="https://instagram.com/"
+              helperText={touched.instagram ? errors.instagram : ""}
+              error={touched.instagram && Boolean(errors.instagram)}
             />
           </div>
         </Grid>
@@ -110,20 +58,18 @@ export default function ContactDetails({
             <Label
               id="facebook"
               label="Facebook"
-              tooltipTitle="Enter your Facebook username"
-              href="https://facebook.com/"
-              handle={values.facebook}
+              tooltipTitle="Enter a full Facebook URL, e.g., https://www.facebook.com/hackforla"
+              href={values.facebook}
             />
-            <CustomTextFieldComponent
+            <TextField
               id="facebook"
               name="facebook"
-              placeholder="Facebook username"
+              placeholder="https://facebook.com/..."
               value={values.facebook}
               onChange={handleChange}
               onBlur={handleBlur}
-              touched={touched.facebook}
-              errors={errors.facebook}
-              startAdornment="https://facebook.com/"
+              helperText={touched.facebook ? errors.facebook : ""}
+              error={touched.facebook && Boolean(errors.facebook)}
             />
           </div>
         </Grid>
@@ -132,20 +78,18 @@ export default function ContactDetails({
             <Label
               id="twitter-label"
               label="Twitter"
-              tooltipTitle="Enter your Twitter username"
-              href="https://twitter.com/"
-              handle={values.twitter}
+              tooltipTitle="Enter a full Twitter URL, e.g., https://www.x.com/hackforla"
+              href={values.twitter}
             />
-            <CustomTextFieldComponent
+            <TextField
               id="twitter"
               name="twitter"
-              placeholder="Twitter username"
+              placeholder="https://x.com/..."
               value={values.twitter}
               onChange={handleChange}
               onBlur={handleBlur}
-              touched={touched.twitter}
-              errors={errors.twitter}
-              startAdornment="https://twitter.com/"
+              helperText={touched.twitter ? errors.twitter : ""}
+              error={touched.twitter && Boolean(errors.twitter)}
             />
           </div>
         </Grid>
@@ -154,30 +98,33 @@ export default function ContactDetails({
             <Label
               id="pinterest"
               label="Pinterest"
-              href="https://pinterest.com/"
-              handle={values.pinterest}
-              tooltipTitle="Enter your Pinterest username"
+              href={values.pinterest}
+              tooltipTitle="Enter a full Pinterest URL, e.g., https://www.pinterest.com/hackforla"
             />
-            <CustomTextFieldComponent
+            <TextField
               id="pinterest"
               name="pinterest"
-              placeholder="Pinterest username"
+              placeholder="https://pinterest.com/..."
               value={values.pinterest}
               onChange={handleChange}
               onBlur={handleBlur}
-              touched={touched.pinterest}
-              errors={errors.pinterest}
-              startAdornment="https://pinterest.com/"
+              helperText={touched.pinterest ? errors.pinterest : ""}
+              error={touched.pinterest && Boolean(errors.pinterest)}
             />
           </div>
         </Grid>
         <Grid item sm={6} xs={12}>
           <div>
-            <Label id="linkedin" label="LinkedIn" />
+            <Label
+              id="linkedin"
+              label="LinkedIn"
+              href={values.linkedin}
+              tooltipTitle="Enter a full LinkedIn URL, e.g., https://www.linkedin.com/hackforla"
+            />
             <TextField
               id="linkedin"
               name="linkedin"
-              placeholder="LinkedIn"
+              placeholder="https://linkedin.com/..."
               value={values.linkedin}
               onChange={handleChange}
               onBlur={handleBlur}

diff --git a/client/src/components/Admin/OrganizationEdit/Identification.jsx b/client/src/components/Admin/OrganizationEdit/Identification.jsx
@@ -23,6 +23,8 @@ import * as awsService from "services/aws-service";
 import { disabledText, error as errorColor } from "theme/palette";
 import Label from "../ui/Label";
 import Textarea from "../ui/Textarea";
+import { PatternFormat } from "react-number-format";
+
 
 const ITEM_HEIGHT = 48;
 const ITEM_PADDING_TOP = 8;
@@ -117,12 +119,17 @@ export default function Identification({
                 label="Phone"
                 tooltipTitle="Phone number for clients to use"
               />
-              <TextField
+              <PatternFormat
+                format="(###) ###-####"
+                customInput={TextField}
+                mask="_"
                 id="phone"
                 name="phone"
                 placeholder="Phone"
                 value={values.phone}
-                onChange={handleChange}
+                onValueChange={(formattedValues) => {
+                  setFieldValue("phone", formattedValues.formattedValue);
+                }}
                 onBlur={handleBlur}
                 helperText={touched.phone ? errors.phone : ""}
                 error={touched.phone && Boolean(errors.phone)}

diff --git a/client/src/components/Admin/ParentOrganizations.jsx b/client/src/components/Admin/ParentOrganizations.jsx
@@ -101,7 +101,7 @@ function ParentOrganizations(props) {
     setActiveOrg({
       code: "",
       name: "",
-      TENANT_ID,
+      tenantId: TENANT_ID,
     });
   };