@aclymatepackages/modules 1.0.0

package/src/components/FootprintVideo.js

@@ -0,0 +1,328 @@
+import React, { useState, useEffect, useRef } from "react";
+import CountUp from "react-countup";
+import Typewriter from "typewriter-effect";
+
+import { ThemeProvider } from "@mui/material/styles";
+import { Box, Container, Grid, Typography, Paper, Fade } from "@mui/material";
+
+import { AnimatedLogo } from "@aclymatepackages/atoms";
+
+import { editObjectData } from "@aclymatepackages/array-immutability-helpers";
+import { mergeDarkTheme } from "@aclymatepackages/themes";
+import {
+  tonsToLbs,
+  convertFootprintToDriving,
+  convertFootprintToIce,
+  convertFootprintToTrees,
+} from "@aclymatepackages/converters";
+import { letterSBoolean } from "@aclymatepackages/formatters";
+
+const OnboardingFootprintLayout = ({ children }) => {
+  const [backgroundFade, setBackgroundFade] = useState(false);
+
+  useEffect(() => {
+    const fadeBackground = setTimeout(() => setBackgroundFade(true), 1500);
+    return () => clearTimeout(fadeBackground);
+  }, []);
+
+  return (
+    <Box
+      style={{
+        position: "absolute",
+        top: 0,
+        left: 0,
+        bottom: 0,
+        right: 0,
+        backgroundColor: "rgba(0, 0, 0, 0.4)",
+        opacity: backgroundFade ? 1 : 0,
+        transition: "opacity 1s",
+      }}
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      p={4}
+    >
+      {backgroundFade && (
+        <ThemeProvider theme={mergeDarkTheme}>{children}</ThemeProvider>
+      )}
+    </Box>
+  );
+};
+
+const VideoFootprintDisplay = ({ monthlyFootprintTons, onAdvanceSlide }) => {
+  const [showCaption, setShowCaption] = useState(false);
+  useEffect(() => {
+    const advanceSlide = setTimeout(onAdvanceSlide, 8500);
+    return () => clearTimeout(advanceSlide);
+  }, [onAdvanceSlide]);
+
+  return (
+    <OnboardingFootprintLayout>
+      <Grid container direction="column" spacing={2}>
+        <Grid item>
+          <CountUp
+            delay={0}
+            start={0}
+            startOnMount
+            end={Math.round(tonsToLbs(monthlyFootprintTons))}
+            separator=","
+            decimal="."
+            suffix=" lbs."
+            duration={1.5}
+            onEnd={() => setShowCaption(true)}
+          >
+            {({ countUpRef }) => (
+              <Typography
+                ref={countUpRef}
+                variant="h2"
+                align="center"
+                color="textPrimary"
+              />
+            )}
+          </CountUp>
+        </Grid>
+        {showCaption && (
+          <Grid item>
+            <Typography variant="h5" align="center" color="textSecondary">
+              <Typewriter
+                options={{
+                  strings: [
+                    "This is our preliminary estimate of your company's monthly carbon emissions.",
+                  ],
+                  autoStart: true,
+                  delay: 50,
+                  deleteSpeed: 100000,
+                }}
+              />
+            </Typography>
+          </Grid>
+        )}
+      </Grid>
+    </OnboardingFootprintLayout>
+  );
+};
+
+const FootprintVideoIntermediateStep = ({ label, onAdvanceSlide }) => {
+  useEffect(() => {
+    const advanceSlide = setTimeout(onAdvanceSlide, 8000);
+    return () => clearTimeout(advanceSlide);
+  }, [onAdvanceSlide]);
+
+  return (
+    <OnboardingFootprintLayout video="logging">
+      <Typography variant="h5" align="center" color="textSecondary">
+        <Typewriter
+          options={{
+            strings: [label],
+            autoStart: true,
+            delay: 50,
+            deleteSpeed: 100000,
+          }}
+        />
+      </Typography>
+    </OnboardingFootprintLayout>
+  );
+};
+
+const FootprintVideoFinal = ({ actionButton, onVideoEnd }) => {
+  const [showButton, setShowButton] = useState(false);
+
+  useEffect(() => {
+    const onShowButton = setTimeout(() => {
+      setShowButton(true);
+      if (onVideoEnd) {
+        onVideoEnd();
+      }
+    }, 9000);
+
+    return () => clearTimeout(onShowButton);
+  }, [onVideoEnd]);
+
+  return (
+    <OnboardingFootprintLayout>
+      <Grid container direction="column" spacing={2} alignItems="center">
+        <Grid item>
+          <Typography variant="h5" align="center" color="textSecondary">
+            <Typewriter
+              onInit={(typewriter) =>
+                typewriter
+                  .changeDelay(50)
+                  .typeString("But all of that ends now.")
+                  .pauseFor(1500)
+                  .typeString(" Welcome to your climate journey.")
+                  .start()
+              }
+            />
+          </Typography>
+        </Grid>
+        <Fade in={showButton}>
+          <Grid item>{actionButton}</Grid>
+        </Fade>
+      </Grid>
+    </OnboardingFootprintLayout>
+  );
+};
+
+const FootprintVideo = ({
+  monthlyFootprintTons,
+  footprintLoading,
+  actionButton,
+  onVideoEnd,
+}) => {
+  const [videoStep, setVideoStep] = useState(0);
+  const [loadedVideos, setLoadedVideos] = useState({
+    pollution: false,
+    driving: false,
+    logging: false,
+    glacier: false,
+    monthly: false,
+    mountains: false,
+  });
+  const [showVideos, setShowVideos] = useState(false);
+
+  const onVideoLoaded = (video) => editObjectData(setLoadedVideos, video, true);
+
+  const pollutionVideoRef = useRef();
+  const drivingVideoRef = useRef();
+  const loggingVideoRef = useRef();
+  const glacierVideoRef = useRef();
+  const monthlyVideoRef = useRef();
+  const mountainsVideoRef = useRef();
+
+  const videoRefsArray = [
+    pollutionVideoRef,
+    drivingVideoRef,
+    loggingVideoRef,
+    glacierVideoRef,
+    monthlyVideoRef,
+    mountainsVideoRef,
+  ];
+
+  useEffect(() => {
+    const areAllVideosLoaded = Object.values(loadedVideos).reduce(
+      (acc, isLoaded) => isLoaded && acc,
+      true
+    );
+    if (areAllVideosLoaded && !footprintLoading) {
+      setShowVideos(true);
+    }
+  }, [loadedVideos, footprintLoading]);
+
+  useEffect(() => {
+    if (
+      pollutionVideoRef.current &&
+      loggingVideoRef.current &&
+      glacierVideoRef.current &&
+      drivingVideoRef.current &&
+      monthlyVideoRef.current &&
+      mountainsVideoRef.current &&
+      showVideos
+    ) {
+      videoRefsArray[videoStep]?.current?.play();
+    }
+    // eslint-disable-next-line
+  }, [videoStep, showVideos]);
+
+  const onAdvanceSlide = () => setVideoStep((currentStep) => currentStep + 1);
+
+  const intermediateStepLabels = [
+    `That's as much carbon as driving ${convertFootprintToDriving(
+      monthlyFootprintTons
+    )} miles.`,
+    `Or cutting down more than ${convertFootprintToTrees(
+      monthlyFootprintTons
+    )} 50-year-old tree${letterSBoolean(
+      convertFootprintToTrees(monthlyFootprintTons)
+    )}.`,
+    `It's enough to melt more than ${formatDecimal(
+      convertFootprintToIce(monthlyFootprintTons)
+    )} square feet of Arctic sea ice that will never come back.`,
+    "And your company emits this much carbon every single month.",
+  ];
+
+  const onboardingFootprintSteps = [
+    <VideoFootprintDisplay
+      monthlyFootprintTons={monthlyFootprintTons}
+      onAdvanceSlide={onAdvanceSlide}
+    />,
+    ...intermediateStepLabels.map((label, idx) => (
+      <FootprintVideoIntermediateStep
+        label={label}
+        onAdvanceSlide={onAdvanceSlide}
+        key={`video-intermediate-step-${idx}`}
+      />
+    )),
+    <FootprintVideoFinal actionButton={actionButton} onVideoEnd={onVideoEnd} />,
+  ];
+
+  const buildVideoProps = (idx) => ({
+    autoPlay: !idx,
+    style: {
+      position: "absolute",
+      top: 0,
+      objectFit: "cover",
+      objectPosition: "center center",
+      opacity: showVideos && idx === videoStep ? 1 : 0,
+      transition: "opacity 1s",
+      marginBottom: "-10px",
+      width: "100%",
+    },
+  });
+
+  const buildSrcProps = (video) => ({
+    src: `/videos/${video}.mp4`,
+    type: "video/mp4",
+  });
+
+  const videos = [
+    "pollution",
+    "driving",
+    "logging",
+    "glacier",
+    "monthly",
+    "mountains",
+  ];
+
+  return (
+    <Container maxWidth="md">
+      <Paper style={{ overflow: "hidden" }}>
+        <div
+          style={{
+            position: "relative",
+            paddingTop: "56.25%",
+          }}
+        >
+          {!showVideos && (
+            <Box
+              display="flex"
+              alignItems="center"
+              justifyContent="center"
+              style={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                bottom: 0,
+                right: 0,
+              }}
+            >
+              <AnimatedLogo />
+            </Box>
+          )}
+          {videos.map((video, idx) => (
+            <video
+              key={`footprint-video-${idx}`}
+              muted
+              {...buildVideoProps(idx)}
+              ref={videoRefsArray[idx]}
+              onLoadedData={() => onVideoLoaded(video)}
+            >
+              <source {...buildSrcProps(video)} />
+            </video>
+          ))}
+          {onboardingFootprintSteps[videoStep]}
+        </div>
+      </Paper>
+    </Container>
+  );
+};
+export default FootprintVideo;

package/src/components/FuelTypesSelect.js

@@ -0,0 +1,29 @@
+import React from "react";
+
+import { Select } from "@aclymatepackages/atoms";
+import { ucFirstLetters } from "@aclymatepackages/formatters";
+
+const FuelTypesSelect = ({
+  fuelType,
+  editVehicle,
+  availableFuelTypes,
+  id,
+  smallFont,
+  variant,
+  noLabel,
+}) => (
+  <Select
+    id={id}
+    size="small"
+    label={noLabel || "Fuel Type"}
+    value={fuelType || ""}
+    editValue={editVehicle}
+    options={availableFuelTypes.map((option) => ({
+      label: ucFirstLetters(option),
+      value: option,
+    }))}
+    smallFont={smallFont}
+    variant={variant}
+  />
+);
+export default FuelTypesSelect;

package/src/components/IndustryAutocomplete.js

@@ -0,0 +1,56 @@
+import React, { useState } from "react";
+
+import Autocomplete from "@mui/lab/Autocomplete";
+import { TextField, Popper } from "@mui/material";
+
+import { industriesList } from "@aclymatepackages/lists";
+
+const CustomPopper = (props) => (
+  <Popper {...props} style={{ width: "fit-content" }} />
+);
+
+const IndustryAutocomplete = ({
+  industry,
+  setIndustry,
+  style,
+  variant = "outlined",
+  label,
+  helperText,
+  textFieldProps,
+}) => {
+  const [inputValue, setInputValue] = useState("");
+
+  return (
+    <div
+      onClick={(e) => e.stopPropagation()}
+      onFocus={(e) => e.stopPropagation()}
+    >
+      <Autocomplete
+        id="company-industry-autocomplete"
+        options={industriesList}
+        getOptionLabel={(option) =>
+          typeof option === "string" ? option : option.label
+        }
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            label={label || "Company Industry"}
+            fullWidth
+            size="small"
+            variant={variant}
+            style={style}
+            helperText={helperText}
+            {...textFieldProps}
+          />
+        )}
+        inputValue={inputValue}
+        onInputChange={(e, newInputValue) => setInputValue(newInputValue)}
+        onChange={(event, newValue) => setIndustry(newValue || null)}
+        value={industry ?? null}
+        getOptionSelected={(option, value) => option.label === value.label}
+        PopperComponent={CustomPopper}
+      />
+    </div>
+  );
+};
+export default IndustryAutocomplete;

package/src/components/PlacesAutocomplete.js

@@ -0,0 +1,174 @@
+import React, { useState, useEffect, useCallback } from "react";
+import parse from "autosuggest-highlight/parse";
+
+import Autocomplete from "@mui/lab/Autocomplete";
+import { Grid, Typography, TextField } from "@mui/material";
+
+import fetchAclymateApi from "@aclymatepackages/fetch-aclymate-api";
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faMapMarkerAlt } from "@fortawesome/free-solid-svg-icons";
+
+const PlacesAutocomplete = ({
+  place,
+  editPlace,
+  label,
+  errorMsg,
+  variant = "outlined",
+  size = "medium",
+  disabled,
+  helperText,
+  error,
+  id,
+  style,
+  textFieldProps,
+  coordinates,
+}) => {
+  const [inputValue, setInputValue] = useState("");
+  const [options, setOptions] = useState([]);
+  const [previousCharacterCount, setPreviousCharacterCount] = useState(0);
+
+  const fetchPlaces = useCallback(
+    async ({ value, signal }) => {
+      const formattedPlaceValue = (value || inputValue).replaceAll(
+        /#|\?/gm,
+        ""
+      );
+      const placeObj = { place: formattedPlaceValue };
+      const coordinatesObj = coordinates ? { coordinates } : {};
+      const dataString = JSON.stringify({ ...placeObj, ...coordinatesObj });
+
+      const placesFetchCallback = (data) => {
+        setOptions(data.predictions || []);
+        return data.predictions;
+      };
+
+      return await fetchAclymateApi({
+        path: `/google-maps/autocomplete/${dataString}`,
+        method: "GET",
+        signal,
+        callback: placesFetchCallback,
+      });
+    },
+    [inputValue, coordinates]
+  );
+
+  useEffect(() => {
+    if (inputValue === "") {
+      setOptions(place ? [place] : []);
+      return undefined;
+    }
+    const controller = new AbortController();
+    const { signal } = controller;
+
+    fetchPlaces({ signal });
+
+    return () => {
+      controller.abort();
+    };
+  }, [inputValue, place, fetchPlaces]);
+
+  return (
+    <Autocomplete
+      id={id || "places1-autocomplete"}
+      options={options}
+      getOptionLabel={(option) =>
+        typeof option === "string"
+          ? option
+          : option.description || option.address || ""
+      }
+      filterOptions={(x) => x}
+      autoComplete
+      filterSelectedOptions
+      includeInputInList
+      disabled={disabled}
+      renderInput={(params) => (
+        <TextField
+          id="places-autocomplete-input"
+          {...params}
+          label={label}
+          variant={variant}
+          error={(errorMsg && !place) || error}
+          size={size}
+          autoComplete="off"
+          helperText={helperText}
+          style={style}
+          {...textFieldProps}
+        />
+      )}
+      getOptionSelected={(option, value) => {
+        return (
+          option === "" ||
+          option.description === value.description ||
+          option === value
+        );
+      }}
+      value={place || ""}
+      onChange={(event, newValue) => {
+        setOptions(newValue ? [newValue, ...options] : options);
+        editPlace(newValue);
+      }}
+      onInputChange={(event, newInputValue) => {
+        setInputValue(newInputValue);
+        if (
+          newInputValue &&
+          Math.abs(previousCharacterCount - newInputValue.length) > 1 &&
+          newInputValue !== place?.description
+        ) {
+          fetchPlaces({ value: newInputValue }).then((options = []) => {
+            const firstOption = options[0];
+            if (firstOption) {
+              const { place_id, description } = firstOption;
+              setInputValue(description);
+              editPlace({ place_id, description });
+            }
+          });
+        }
+        setPreviousCharacterCount(newInputValue.length);
+      }}
+      renderOption={(props, option) => {
+        if (option.description) {
+          const matches =
+            option?.structured_formatting?.main_text_matched_substrings;
+          const parts = !!matches?.length
+            ? parse(
+                option?.structured_formatting?.main_text,
+                matches.map((match) => [
+                  match.offset,
+                  match.offset + match.length,
+                ])
+              )
+            : [];
+
+          return (
+            <li {...props}>
+              <Grid container alignItems="center" spacing={2}>
+                <Grid item>
+                  <FontAwesomeIcon icon={faMapMarkerAlt} />
+                </Grid>
+                <Grid item xs>
+                  {parts.length
+                    ? parts.map((part, index) => (
+                        <span
+                          key={index}
+                          style={{ fontWeight: part.highlight ? 700 : 400 }}
+                        >
+                          {part.text}
+                        </span>
+                      ))
+                    : ""}
+                  <Typography variant="body2" color="textSecondary">
+                    {option?.structured_formatting?.secondary_text}
+                  </Typography>
+                </Grid>
+              </Grid>
+            </li>
+          );
+        }
+
+        return <li {...props}>{option}</li>;
+      }}
+    />
+  );
+};
+export default PlacesAutocomplete;

package/src/components/StripeElements.js

@@ -0,0 +1,95 @@
+import React, { useState, useEffect } from "react";
+
+import { Elements } from "@stripe/react-stripe-js";
+import { loadStripe } from "@stripe/stripe-js";
+
+import { Grid } from "@mui/material";
+
+import fetchAclymateApi from "@aclymatepackages/fetch-aclymate-api";
+
+const StripeElementsWrapper = ({
+  accountData,
+  accountCollection,
+  loadingComponent,
+  baseFetchHost,
+  stripePromise,
+  children,
+}) => {
+  const [stripeClientSecret, setStripeClientSecret] = useState("");
+
+  const {
+    id: accountId,
+    stripeCustomerId: accountDataCustomerId,
+    billing = {},
+  } = accountData;
+  const { stripeCustomerId: billingObjStripeCustomerId } = billing;
+
+  useEffect(() => {
+    const getStripeClientSecret = async () => {
+      const { clientSecret } = await fetchAclymateApi({
+        path: `/stripe/create-setup-intent`,
+        method: "POST",
+        data: {
+          accountId,
+          accountType: accountCollection,
+          customerId: billingObjStripeCustomerId || accountDataCustomerId,
+        },
+        callback: (response) => response,
+        baseFetchHost,
+      });
+
+      setStripeClientSecret(clientSecret);
+    };
+
+    if (!stripeClientSecret) {
+      getStripeClientSecret();
+    }
+  }, [
+    stripeClientSecret,
+    accountDataCustomerId,
+    accountId,
+    billingObjStripeCustomerId,
+    accountCollection,
+    baseFetchHost,
+  ]);
+
+  const appearance = {
+    theme: "stripe",
+    variables: {
+      colorPrimary: "#27aae1",
+      colorBackground: "fafafa",
+    },
+  };
+
+  return (
+    <>
+      {!stripeClientSecret ? (
+        loadingComponent ? (
+          <Grid container justifyContent="center" spacing={2}>
+            <Grid item>{loadingComponent}</Grid>
+          </Grid>
+        ) : (
+          <></>
+        )
+      ) : (
+        <Elements
+          stripe={stripePromise}
+          options={{ clientSecret: stripeClientSecret, appearance }}
+        >
+          {children}
+        </Elements>
+      )}
+    </>
+  );
+};
+
+const StripeElements = ({ stripePublishableKey, children, ...otherProps }) => {
+  const stripePromise = loadStripe(stripePublishableKey);
+
+  return (
+    <StripeElementsWrapper stripePromise={stripePromise} {...otherProps}>
+      {children}
+    </StripeElementsWrapper>
+  );
+};
+export default StripeElements;