@aclymatepackages/modules 1.0.0

package/src/components/YesNoQuestion.js

@@ -0,0 +1,68 @@
+import React from "react";
+
+import { useTheme } from "@mui/styles";
+import { Grid, Typography } from "@mui/material";
+import { ThemeProvider } from "@mui/material/styles";
+
+import { ToggleButtons } from "@aclymatepackages/atoms";
+import { mergeDarkTheme, mainTheme } from "@aclymatepackages/themes";
+
+const YesNoQuestionButtons = ({ value, setValue }) => {
+  const { palette } = useTheme();
+
+  const noButtonStyleObj =
+    value === false ? { style: { backgroundColor: palette.error.main } } : {};
+
+  const yesButtonStyleObj = value
+    ? { style: { backgroundColor: palette.secondary.main } }
+    : {};
+
+  const buttons = [
+    { value: false, name: "No", ...noButtonStyleObj },
+    { value: true, name: "Yes", ...yesButtonStyleObj },
+  ];
+
+  return <ToggleButtons value={value} onChange={setValue} buttons={buttons} />;
+};
+
+const YesNoQuestion = ({
+  question,
+  value,
+  setValue,
+  typographyProps,
+  lightBackground,
+}) => {
+  const findTheme = () => {
+    if (lightBackground || value !== undefined) {
+      return mainTheme;
+    }
+
+    return mergeDarkTheme;
+  };
+
+  return (
+    <Grid
+      container
+      spacing={2}
+      justifyContent="space-between"
+      alignItems="center"
+      wrap="nowrap"
+    >
+      <Grid item>
+        <Typography
+          variant="body1"
+          color={lightBackground ? "textPrimary" : "inherit"}
+          {...typographyProps}
+        >
+          {question}
+        </Typography>
+      </Grid>
+      <Grid item>
+        <ThemeProvider theme={findTheme()}>
+          <YesNoQuestionButtons value={value} setValue={setValue} />
+        </ThemeProvider>
+      </Grid>
+    </Grid>
+  );
+};
+export default YesNoQuestion;

package/src/components/stripeInput.js

@@ -0,0 +1,288 @@
+import React, { useState } from "react";
+import dayjs from "dayjs";
+import {
+  useStripe,
+  useElements,
+  PaymentElement,
+} from "@stripe/react-stripe-js";
+
+import { Box, Typography } from "@mui/material";
+
+import { LoadingButton } from "@aclymatepackages/atoms";
+import { isObjectEmpty } from "@aclymatepackages/other-helpers";
+import fetchAclymateApi from "@aclymatepackages/fetch-aclymate-api";
+
+const StripeSubmitButton = ({
+  stripeSubmit,
+  stripeError,
+  isStripeComplete,
+  buttonText,
+}) => {
+  const [saveLoading, setSaveLoading] = useState(false);
+  const handleSave = async () => {
+    setSaveLoading(true);
+    await stripeSubmit();
+
+    return setSaveLoading(false);
+  };
+
+  return (
+    <LoadingButton
+      isLoading={saveLoading}
+      label={buttonText || "Save Payment Info"}
+      color="secondary"
+      disabled={!isStripeComplete || !isObjectEmpty(stripeError)}
+      onClick={() => handleSave()}
+    />
+  );
+};
+
+const CardInput = ({ options, setCardData }) => {
+  const defaultOptions = {
+    fields: {
+      billingDetails: {
+        name: "never",
+        email: "never",
+      },
+    },
+    wallets: {
+      applePay: "never",
+      googlePay: "never",
+    },
+    business: {
+      name: "Aclymate",
+    },
+  };
+
+  return (
+    <PaymentElement
+      options={options || defaultOptions}
+      onChange={(e) => setCardData(e)}
+    />
+  );
+};
+
+const StripeInputForm = ({ style, options, error = {}, setCardData }) => {
+  const { message } = error;
+  const CardError = () => (
+    <>
+      {message && (
+        <Typography variant="caption" color="error">
+          {message}
+        </Typography>
+      )}
+    </>
+  );
+
+  if (style) {
+    return (
+      <>
+        <Box p={2} style={style}>
+          <CardInput options={options} setCardData={setCardData} />
+        </Box>
+        <CardError />
+      </>
+    );
+  }
+
+  return (
+    <>
+      <CardInput options={options} setCardData={setCardData} />
+      <CardError />
+    </>
+  );
+};
+
+const useStripeInput = ({
+  onButtonClick,
+  accountData,
+  authUser,
+  updateAccountData,
+  confirmSetupReturnUrl = "",
+  baseFetchHost,
+  buttonText,
+}) => {
+  const stripe = useStripe();
+  const elements = useElements();
+
+  const {
+    stripeCustomerId: accountObjStripeCustomerId,
+    billing = {},
+    name: accountName,
+  } = accountData || {};
+  const { stripeCustomerId: billingObjStripeCustomerId } = billing;
+
+  const [paymentData, setPaymentData] = useState({});
+  const { error: stripeError, complete: isStripeComplete } = paymentData;
+
+  const createBillingDetailsFullName = () => {
+    const { displayName } = authUser;
+    const [firstCompanyWord] = accountName.split(" ");
+    const [firstName, lastName] = displayName.split(" ");
+
+    if (!lastName) {
+      return `${firstName} ${firstCompanyWord}`;
+    }
+
+    return `${firstName} ${lastName}`;
+  };
+
+  const updateAccountBilling = async (updateObj) => {
+    await updateAccountData(updateObj);
+
+    if (onButtonClick) {
+      return await onButtonClick(updateObj);
+    }
+
+    return updateObj;
+  };
+
+  const createStripePaymentMethod = async () => {
+    const { email } = authUser;
+
+    const billingDetailsFullName = createBillingDetailsFullName();
+
+    const { setupIntent, error } = await stripe.confirmSetup({
+      elements,
+      confirmParams: {
+        return_url: confirmSetupReturnUrl,
+        payment_method_data: {
+          billing_details: {
+            name: billingDetailsFullName,
+            email,
+          },
+        },
+      },
+      redirect: "if_required",
+    });
+
+    if (error) {
+      setPaymentData((data) => ({ ...data, error }));
+      return false;
+    }
+
+    const { payment_method, status } = setupIntent;
+
+    const paymentMethod = await fetchAclymateApi({
+      path: "/stripe/get-payment-method-data",
+      method: "POST",
+      data: {
+        paymentMethodId: payment_method,
+      },
+      baseFetchHost,
+      callback: (res) => res,
+    });
+
+    return {
+      ...paymentMethod,
+      status,
+    };
+  };
+
+  const savePaymentMethod = async (paymentMethod) => {
+    const { paymentMethodId: existingPaymentMethodId, subscriptions } = billing;
+    const existingSubscriptionsObj = subscriptions ? { subscriptions } : {};
+    const { type } = paymentMethod;
+
+    if (existingPaymentMethodId && authUser) {
+      await fetchAclymateApi({
+        path: "/stripe/detach-payment-method",
+        method: "POST",
+        data: {
+          paymentMethodId: existingPaymentMethodId,
+        },
+        baseFetchHost,
+      });
+    }
+
+    const generateCardBillingAccountObj = () => {
+      const { card, id: newPaymentMethodId } = paymentMethod;
+      const { brand, exp_month, exp_year, last4 } = card;
+      const daysInMonth = dayjs(`${exp_year}-${exp_month}-01`).daysInMonth();
+      const expirationDate = dayjs(
+        `${exp_year}-${exp_month}-${daysInMonth}`
+      ).toDate();
+
+      return {
+        billing: {
+          card: {
+            brand,
+            expiration: `${exp_month}/${exp_year}`,
+            expirationDate,
+            last4,
+          },
+          paymentMethodId: newPaymentMethodId,
+          ...existingSubscriptionsObj,
+        },
+        stripeCustomerId:
+          billingObjStripeCustomerId || accountObjStripeCustomerId,
+      };
+    };
+
+    const generateBankBillingAccountObj = () => {
+      const {
+        us_bank_account,
+        id: newPaymentMethodId,
+        billing_details,
+        status,
+      } = paymentMethod;
+      const { name, email } = billing_details;
+      const {
+        account_type,
+        account_holder_type,
+        bank_name,
+        last4,
+        routing_number,
+      } = us_bank_account;
+
+      return {
+        billing: {
+          us_bank_account: {
+            account_type,
+            account_holder_type,
+            bank_name,
+            last4,
+            routing_number,
+            status,
+            name,
+            email,
+          },
+          paymentMethodId: newPaymentMethodId,
+          ...existingSubscriptionsObj,
+        },
+        stripeCustomerId:
+          billingObjStripeCustomerId || accountObjStripeCustomerId,
+      };
+    };
+
+    const accountUpdateObj =
+      type === "card"
+        ? generateCardBillingAccountObj()
+        : generateBankBillingAccountObj();
+
+    return await updateAccountBilling(accountUpdateObj);
+  };
+
+  const stripeSubmit = async () => {
+    if (!stripe || !elements) {
+      return;
+    }
+
+    const paymentMethod = await createStripePaymentMethod();
+
+    return await savePaymentMethod(paymentMethod);
+  };
+
+  return {
+    input: <StripeInputForm setCardData={setPaymentData} error={stripeError} />,
+    button: (
+      <StripeSubmitButton
+        stripeSubmit={stripeSubmit}
+        stripeError={stripeError}
+        isStripeComplete={isStripeComplete}
+        buttonText={buttonText}
+      />
+    ),
+  };
+};
+export default useStripeInput;

package/src/components/useChartWarningLabels.js

@@ -0,0 +1,139 @@
+import React, { useEffect, useState } from "react";
+
+import { LabelList } from "recharts";
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { Avatar } from "@mui/material";
+
+//WL 10-20-23: This empty label with a useEffect is a super weird hack, but it's the only way I could figure out how to draw status labels
+const WarningLabelSetter = ({ value, y, x, setWarningLabels, id, width }) => {
+  useEffect(() => {
+    const setWarningLabelValues = () => {
+      if (value) {
+        const { color, icon } = value;
+        return setWarningLabels((existingLabels) => {
+          const otherLabels = existingLabels.filter(
+            (label) => label?.id !== id
+          );
+          return [...otherLabels, { id, x, y, color, icon, width }];
+        });
+      }
+
+      return setWarningLabels((existingLabels) =>
+        existingLabels.filter((label) => label?.id !== id)
+      );
+    };
+
+    setWarningLabelValues();
+  }, [value, x, y, id, setWarningLabels, width]);
+
+  return <></>;
+};
+
+const WarningLabel = ({ x, y, icon, color, width, value, maxChartValue }) => {
+  const AVATAR_WIDTH = 40;
+
+  const buildCommonProps = (topOffset) => ({
+    backgroundColor: color,
+    position: "absolute",
+    top:
+      maxChartValue * 0.9 > value ? y - topOffset * 1.25 : y - AVATAR_WIDTH / 2,
+  });
+
+  const buildCenteringProps = (warningWidth) => ({
+    left: x + width / 2,
+    transform: `translateX(-${warningWidth / 2}px)`,
+  });
+
+  if (width >= AVATAR_WIDTH) {
+    return (
+      <Avatar
+        style={{
+          ...buildCommonProps(AVATAR_WIDTH),
+          ...buildCenteringProps(AVATAR_WIDTH),
+        }}
+      >
+        <FontAwesomeIcon icon={icon} style={{ color: "white" }} />
+      </Avatar>
+    );
+  }
+
+  const BADGE_WIDTH = 10;
+
+  const buildBadgeProps = (badgeWidth) => ({
+    width: badgeWidth,
+    height: badgeWidth,
+    borderRadius: "50%",
+  });
+
+  if (width >= BADGE_WIDTH) {
+    return (
+      <div
+        style={{
+          ...buildCommonProps(BADGE_WIDTH),
+          ...buildCenteringProps(BADGE_WIDTH),
+          ...buildBadgeProps(BADGE_WIDTH),
+        }}
+      />
+    );
+  }
+
+  return (
+    <div
+      style={{
+        ...buildCommonProps(width),
+        left: x,
+        ...buildBadgeProps(width),
+      }}
+    />
+  );
+};
+
+const useChartWarningLabels = ({ data, warningField, barSumField }) => {
+  const [warningLabels, setWarningLabels] = useState([]);
+
+  useEffect(() => {
+    if (!data.some((dataObj) => dataObj[warningField])) {
+      setWarningLabels([]);
+    }
+
+    setWarningLabels((currentLabels) =>
+      currentLabels.filter(({ id }) =>
+        data.find((dataObj) => dataObj.id === id)
+      )
+    );
+  }, [data, warningField]);
+
+  const maxChartValue = Math.max(
+    ...data.map((dataObj) => dataObj[barSumField])
+  );
+
+  return {
+    labelSetter: (
+      <>
+        <LabelList
+          position="insideTopLeft"
+          dataKey={warningField}
+          content={<WarningLabelSetter setWarningLabels={setWarningLabels} />}
+        />
+      </>
+    ),
+    warningLabels: (
+      <>
+        {!!warningLabels.length &&
+          warningLabels.map((warning, idx) => (
+            <WarningLabel
+              key={`chart-warning-label-${idx}`}
+              maxChartValue={maxChartValue}
+              value={
+                data.find((dataObj) => dataObj.id === warning.id)?.[barSumField]
+              }
+              {...warning}
+            />
+          ))}
+      </>
+    ),
+  };
+};
+export default useChartWarningLabels;

package/src/index.js

@@ -0,0 +1,35 @@
+import FootprintVideo from "./components/FootprintVideo";
+import IndustryAutocomplete from "./components/IndustryAutocomplete";
+import PlacesAutocomplete from "./components/PlacesAutocomplete";
+import YesNoQuestion from "./components/YesNoQuestion";
+import FootprintEquivalencies from "./components/FootprintEquivalencies";
+import ComparisonChart from "./components/ComparisonChart";
+import CompaniesAutocomplete from "./components/CompaniesAutocomplete";
+import useStripeInput from "./components/stripeInput";
+import StripeElements from "./components/StripeElements";
+import EmissionsReductionGraph from "./components/EmissionsReductionGraph";
+import CompanyOnboardingInput from "./components/CompanyOnboardingInput";
+import CustomTooltipDisplayRow from "./components/CustomTooltipDisplayRow";
+import EmissionsChart from "./components/EmissionsChart";
+import EmissionsCustomTooltip from "./components/EmissionsCustomTooltip";
+import EmissionsPieChart from "./components/EmissionsPieChart";
+import useChartWarningLabels from "./components/useChartWarningLabels";
+
+export {
+  FootprintVideo,
+  IndustryAutocomplete,
+  PlacesAutocomplete,
+  YesNoQuestion,
+  FootprintEquivalencies,
+  ComparisonChart,
+  CompaniesAutocomplete,
+  useStripeInput,
+  StripeElements,
+  EmissionsReductionGraph,
+  CompanyOnboardingInput,
+  CustomTooltipDisplayRow,
+  EmissionsChart,
+  EmissionsCustomTooltip,
+  EmissionsPieChart,
+  useChartWarningLabels,
+};