@bigbinary/neeto-molecules 5.5.1 → 5.5.3

package/dist/DocumentEditor.js

@@ -4,7 +4,7 @@ import { useCallback, memo, useRef, useState, useMemo } from 'react';
 import classnames from 'classnames';
 import { useFormikContext } from 'formik';
 import { isPresent, noop } from '@bigbinary/neeto-cist';
-import FormikEditor from '@bigbinary/neeto-editor/FormikEditor';
+import FormikEditor from '@bigbinary/neeto-editor-frontend/FormikEditor';
 import MenuHorizontal from '@bigbinary/neeto-icons/MenuHorizontal';
 import Modal from '@bigbinary/neetoui/Modal';
 import Typography from '@bigbinary/neetoui/Typography';

package/dist/EmailForm.js

@@ -4,14 +4,14 @@ import { createContext, useState, useContext, createElement } from 'react';
 import classnames from 'classnames';
 import { useFormikContext, Field } from 'formik';
 import { isPresent, isNotEmpty, notEqualsDeep, noop } from '@bigbinary/neeto-cist';
-import FormikEditor from '@bigbinary/neeto-editor/FormikEditor';
+import FormikEditor from '@bigbinary/neeto-editor-frontend/FormikEditor';
 import Button from '@bigbinary/neetoui/Button';
 import ActionBlock from '@bigbinary/neetoui/formik/ActionBlock';
 import Radio from '@bigbinary/neetoui/formik/Radio';
 import { prop, equals, pluck, isEmpty } from 'ramda';
 import { useTranslation } from 'react-i18next';
 import { t } from 'i18next';
-import { isEditorEmpty } from '@bigbinary/neeto-editor/utils';
+import { isEditorEmpty } from '@bigbinary/neeto-editor-frontend/utils';
 import * as yup from 'yup';
 import Select from '@bigbinary/neetoui/formik/Select';
 import Input from '@bigbinary/neetoui/formik/Input';
@@ -30,7 +30,7 @@ import MobilePreviewHeader from './MobilePreviewHeader.js';
 import { n } from './inject-css-C2dztUxs.js';
 import Form from '@bigbinary/neetoui/formik/Form';
 import '@bigbinary/neeto-commons-frontend/react-utils/withT';
-import '@bigbinary/neeto-editor/EditorContent';
+import '@bigbinary/neeto-editor-frontend/EditorContent';
 import '@bigbinary/neetoui/Typography';
 import './index-DAYCJu79.js';
 import './_commonjsHelpers-BFTU3MAI.js';

package/dist/EmailPreview.js

@@ -2,7 +2,7 @@ import { memo } from 'react';
 import classnames from 'classnames';
 import { isPresent } from '@bigbinary/neeto-cist';
 import withT from '@bigbinary/neeto-commons-frontend/react-utils/withT';
-import EditorContent from '@bigbinary/neeto-editor/EditorContent';
+import EditorContent from '@bigbinary/neeto-editor-frontend/EditorContent';
 import Typography from '@bigbinary/neetoui/Typography';
 import Button from '@bigbinary/neetoui/Button';
 import { P as PropTypes } from './index-DAYCJu79.js';

package/dist/Onboarding.js

@@ -1,7 +1,7 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useState, useLayoutEffect, useEffect, useMemo, useRef } from 'react';
 import classnames from 'classnames';
-import { isPresent, capitalize, noop, findIndexBy } from '@bigbinary/neeto-cist';
+import { capitalize, isPresent, noop, findIndexBy } from '@bigbinary/neeto-cist';
 import Stepper from '@bigbinary/neetoui/Stepper';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { globalProps } from '@bigbinary/neeto-commons-frontend/initializers';
@@ -10,18 +10,368 @@ import Typography from '@bigbinary/neetoui/Typography';
 import { R as ReactConfetti } from './react-confetti-BnGq_LBE.js';
 import { useTranslation, Trans } from 'react-i18next';
 import { t } from 'i18next';
-import useBreakpoints from '@bigbinary/neeto-commons-frontend/react-utils/useBreakpoints';
 import RightArrow from '@bigbinary/neeto-icons/RightArrow';
+import Checkbox from '@bigbinary/neetoui/Checkbox';
+import { assoc, dissoc } from 'ramda';
+import Notes from '@bigbinary/neeto-icons/Notes';
+import UserCircle from '@bigbinary/neeto-icons/UserCircle';
+import Email from '@bigbinary/neeto-icons/Email';
+import Input from '@bigbinary/neetoui/Input';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMutation } from '@tanstack/react-query';
+import axios from 'axios';
+import { BASE_API_V1_URL } from '@bigbinary/neeto-commons-frontend/constants';
+import * as yup from 'yup';
+import useBreakpoints from '@bigbinary/neeto-commons-frontend/react-utils/useBreakpoints';
 import { n } from './inject-css-C2dztUxs.js';
 import withT from '@bigbinary/neeto-commons-frontend/react-utils/withT';
 
+var COMMUNITY_OPTIONS = [{
+  key: "slack",
+  icon: UserCircle,
+  dataTestid: "onboarding-community-slack-checkbox",
+  recipientDataTestids: {
+    change: "onboarding-community-slack-email-change-button",
+    input: "onboarding-community-slack-email-input",
+    save: "onboarding-community-slack-email-save-button",
+    cancel: "onboarding-community-slack-email-cancel-button"
+  }
+}, {
+  key: "blog",
+  icon: Notes,
+  dataTestid: "onboarding-community-blog-checkbox",
+  recipientDataTestids: {
+    change: "onboarding-community-blog-email-change-button",
+    input: "onboarding-community-blog-email-input",
+    save: "onboarding-community-blog-email-save-button",
+    cancel: "onboarding-community-blog-email-cancel-button"
+  }
+}];
+
+var EmailRecipient = function EmailRecipient(_ref) {
+  var email = _ref.email,
+    edit = _ref.edit,
+    onStartEditing = _ref.onStartEditing,
+    onDraftChange = _ref.onDraftChange,
+    onSave = _ref.onSave,
+    onCancel = _ref.onCancel,
+    recipientKey = _ref.recipientKey,
+    inputLabelKey = _ref.inputLabelKey,
+    dataTestids = _ref.dataTestids;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var handleKeyDown = function handleKeyDown(event) {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      onSave();
+    }
+    if (event.key === "Escape") onCancel();
+  };
+  if (edit) {
+    return /*#__PURE__*/jsxs("div", {
+      className: "flex items-start gap-2 ps-6 pt-3",
+      children: [/*#__PURE__*/jsx("div", {
+        className: "w-72",
+        children: /*#__PURE__*/jsx(Input, {
+          autoFocus: true,
+          "aria-label": t(inputLabelKey),
+          "data-testid": dataTestids.input,
+          error: edit.error,
+          type: "email",
+          value: edit.draft,
+          onChange: function onChange(event) {
+            return onDraftChange(event.target.value);
+          },
+          onKeyDown: handleKeyDown
+        })
+      }), /*#__PURE__*/jsx(Button, {
+        "data-testid": dataTestids.save,
+        label: t("neetoMolecules.common.actions.save"),
+        onClick: onSave
+      }), /*#__PURE__*/jsx(Button, {
+        "data-testid": dataTestids.cancel,
+        label: t("neetoMolecules.common.actions.cancel"),
+        style: "text",
+        onClick: onCancel
+      })]
+    });
+  }
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex flex-wrap items-center gap-2 ps-6 pt-3",
+    children: [/*#__PURE__*/jsx(Email, {
+      "aria-hidden": true,
+      className: "neeto-ui-text-gray-500",
+      size: 16
+    }), /*#__PURE__*/jsx(Typography, {
+      className: "neeto-ui-text-gray-600",
+      style: "body2",
+      children: /*#__PURE__*/jsx(Trans, {
+        components: {
+          strong: /*#__PURE__*/jsx("strong", {
+            className: "neeto-ui-text-gray-800"
+          })
+        },
+        i18nKey: recipientKey,
+        values: {
+          email: email
+        }
+      })
+    }), /*#__PURE__*/jsx(Button, {
+      "data-testid": dataTestids.change,
+      label: t("neetoMolecules.onboarding.communityScreen.changeButton"),
+      size: "small",
+      style: "link",
+      onClick: onStartEditing
+    })]
+  });
+};
+
+var joinCommunity = function joinCommunity(communityJoin) {
+  return axios.post("".concat(BASE_API_V1_URL, "/community_join"), {
+    communityJoin: communityJoin
+  }, {
+    showToastr: false
+  });
+};
+var communityApi = {
+  joinCommunity: joinCommunity
+};
+
+var useJoinCommunity = function useJoinCommunity() {
+  return useMutation({
+    mutationFn: communityApi.joinCommunity
+  });
+};
+
+var isValidEmail = function isValidEmail(email) {
+  return !!email && yup.string().email().isValidSync(email);
+};
+
+function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+
+// Tracks the email each option goes to, plus any address being edited, so
+// Continue can pick up a draft the user typed but did not save.
+var useRecipientEmails = function useRecipientEmails(defaultEmail) {
+  var _useState = useState({
+      slack: defaultEmail,
+      blog: defaultEmail
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    emails = _useState2[0],
+    setEmails = _useState2[1];
+
+  // { [key]: { draft, error } } for the options whose email field is open.
+  var _useState3 = useState({}),
+    _useState4 = _slicedToArray(_useState3, 2),
+    edits = _useState4[0],
+    setEdits = _useState4[1];
+  var startEditing = function startEditing(key) {
+    return setEdits(assoc(key, {
+      draft: emails[key],
+      error: ""
+    }));
+  };
+  var changeDraft = function changeDraft(key, draft) {
+    return setEdits(assoc(key, {
+      draft: draft,
+      error: ""
+    }));
+  };
+  var cancel = function cancel(key) {
+    return setEdits(dissoc(key));
+  };
+  var validate = function validate(key) {
+    var draft = edits[key].draft.trim();
+    return isValidEmail(draft) ? {
+      draft: draft
+    } : {
+      error: t("neetoMolecules.onboarding.communityScreen.invalidEmail")
+    };
+  };
+  var save = function save(key) {
+    var _validate = validate(key),
+      draft = _validate.draft,
+      error = _validate.error;
+    if (error) {
+      setEdits(assoc(key, _objectSpread$3(_objectSpread$3({}, edits[key]), {}, {
+        error: error
+      })));
+      return;
+    }
+    setEmails(assoc(key, draft));
+    setEdits(dissoc(key));
+  };
+
+  // Applies every open draft of the given options. Returns the final emails,
+  // or null when a draft is invalid, after showing its error.
+  var applyDrafts = function applyDrafts(keys) {
+    var nextEmails = emails;
+    var nextEdits = edits;
+    keys.filter(function (key) {
+      return edits[key];
+    }).forEach(function (key) {
+      var _validate2 = validate(key),
+        draft = _validate2.draft,
+        error = _validate2.error;
+      if (error) {
+        nextEdits = assoc(key, _objectSpread$3(_objectSpread$3({}, edits[key]), {}, {
+          error: error
+        }), nextEdits);
+      } else {
+        nextEmails = assoc(key, draft, nextEmails);
+        nextEdits = dissoc(key, nextEdits);
+      }
+    });
+    setEmails(nextEmails);
+    setEdits(nextEdits);
+    var hasInvalidDraft = keys.some(function (key) {
+      return nextEdits[key];
+    });
+    return hasInvalidDraft ? null : nextEmails;
+  };
+  return {
+    emails: emails,
+    edits: edits,
+    startEditing: startEditing,
+    changeDraft: changeDraft,
+    cancel: cancel,
+    save: save,
+    applyDrafts: applyDrafts
+  };
+};
+
 var GENERAL_ONBOARDING_STEPS = {
   WELCOME: "welcome",
+  COMMUNITY: "community",
   HELP: "help",
   FINISH: "finish"
 };
 
+function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Community = function Community(_ref) {
+  var _globalProps$user, _globalProps$appName;
+  var setCurrentStep = _ref.setCurrentStep,
+    communityScreenClassName = _ref.communityScreenClassName;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = useState({
+      slack: true,
+      blog: true
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    selected = _useState2[0],
+    setSelected = _useState2[1];
+
+  // Both start at the signed-in user's email; each can be changed separately.
+  var recipients = useRecipientEmails((_globalProps$user = globalProps.user) === null || _globalProps$user === void 0 ? void 0 : _globalProps$user.email);
+  var _useJoinCommunity = useJoinCommunity(),
+    joinCommunity = _useJoinCommunity.mutate;
+  var appName = capitalize((_globalProps$appName = globalProps.appName) !== null && _globalProps$appName !== void 0 ? _globalProps$appName : "");
+  var handleContinue = function handleContinue() {
+    var selectedKeys = Object.keys(selected).filter(function (key) {
+      return selected[key];
+    });
+
+    // An address typed but not saved still counts; an invalid one keeps the
+    // user here with its error showing.
+    var emails = recipients.applyDrafts(selectedKeys);
+    if (!emails) return;
+
+    // The Slack invite and blog subscription are both sent by email in the
+    // background, so onboarding moves on without waiting for them.
+    if (selectedKeys.length > 0) {
+      joinCommunity(_objectSpread$2(_objectSpread$2({}, selected), {}, {
+        slackEmail: emails.slack,
+        blogEmail: emails.blog
+      }));
+    }
+    setCurrentStep(GENERAL_ONBOARDING_STEPS.HELP);
+  };
+  return /*#__PURE__*/jsxs("div", {
+    className: classnames("mx-auto flex w-full max-w-3xl flex-col items-start gap-y-6 px-6 pt-16 pb-6", communityScreenClassName),
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "space-y-2",
+      children: [/*#__PURE__*/jsx(Typography, {
+        "data-testid": "onboarding-community-title",
+        style: "h1",
+        children: t("neetoMolecules.onboarding.communityScreen.title")
+      }), /*#__PURE__*/jsx(Typography, {
+        "data-testid": "onboarding-community-description",
+        style: "body1",
+        children: t("neetoMolecules.onboarding.communityScreen.description", {
+          appName: appName
+        })
+      })]
+    }), /*#__PURE__*/jsx("div", {
+      className: "neeto-ui-rounded-lg neeto-ui-border-gray-200 flex w-full flex-col gap-6 border p-3 lg:p-6",
+      children: COMMUNITY_OPTIONS.map(function (_ref2) {
+        var key = _ref2.key,
+          Icon = _ref2.icon,
+          dataTestid = _ref2.dataTestid,
+          recipientDataTestids = _ref2.recipientDataTestids;
+        return /*#__PURE__*/jsxs("div", {
+          className: "w-full",
+          children: [/*#__PURE__*/jsx(Checkbox, {
+            checked: selected[key],
+            "data-testid": dataTestid,
+            id: dataTestid,
+            labelProps: {
+              className: "text-xl font-semibold"
+            },
+            label: /*#__PURE__*/jsxs("span", {
+              className: "flex flex-wrap items-center gap-2",
+              children: [t("neetoMolecules.onboarding.communityScreen.".concat(key, ".title"), {
+                appName: appName
+              }), /*#__PURE__*/jsx(Icon, {
+                "aria-hidden": true,
+                size: 24
+              })]
+            }),
+            onChange: function onChange(event) {
+              setSelected(assoc(key, event.target.checked));
+              if (!event.target.checked) recipients.cancel(key);
+            }
+          }), /*#__PURE__*/jsx(Typography, {
+            className: "neeto-ui-text-gray-600 ps-6 pt-2",
+            style: "body1",
+            children: t("neetoMolecules.onboarding.communityScreen.".concat(key, ".description"))
+          }), selected[key] && /*#__PURE__*/jsx(EmailRecipient, {
+            dataTestids: recipientDataTestids,
+            edit: recipients.edits[key],
+            email: recipients.emails[key],
+            inputLabelKey: "neetoMolecules.onboarding.communityScreen.".concat(key, ".emailInputLabel"),
+            recipientKey: "neetoMolecules.onboarding.communityScreen.".concat(key, ".recipient"),
+            onCancel: function onCancel() {
+              return recipients.cancel(key);
+            },
+            onDraftChange: function onDraftChange(draft) {
+              return recipients.changeDraft(key, draft);
+            },
+            onSave: function onSave() {
+              return recipients.save(key);
+            },
+            onStartEditing: function onStartEditing() {
+              return recipients.startEditing(key);
+            }
+          })]
+        }, key);
+      })
+    }), /*#__PURE__*/jsx(Typography, {
+      className: "neeto-ui-text-gray-600",
+      style: "body2",
+      children: t("neetoMolecules.onboarding.communityScreen.unsubscribe")
+    }), /*#__PURE__*/jsx(Button, {
+      "data-testid": "community-onboarding-continue-button",
+      icon: RightArrow,
+      iconPosition: "right",
+      label: t("neetoMolecules.onboarding.communityScreen.continueButton"),
+      onClick: handleContinue
+    })]
+  });
+};
+
 var HelpScreen = function HelpScreen(_ref) {
   var setCurrentStep = _ref.setCurrentStep,
     helpScreenClassName = _ref.helpScreenClassName;
@@ -74,7 +424,14 @@ var HelpScreen = function HelpScreen(_ref) {
 
 function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var createSteps = function createSteps(onboardingSteps, setCurrentStep, currentStep, helpScreenClassName) {
+var createSteps = function createSteps(onboardingSteps, setCurrentStep, currentStep, helpScreenClassName, isCommunityStepVisible) {
+  var communityStep = {
+    key: GENERAL_ONBOARDING_STEPS.COMMUNITY,
+    label: t("neetoMolecules.onboarding.communityLabel"),
+    element: /*#__PURE__*/jsx(Community, {
+      setCurrentStep: setCurrentStep
+    })
+  };
   var helpStep = {
     key: GENERAL_ONBOARDING_STEPS.HELP,
     label: t("neetoMolecules.onboarding.helpLabel"),
@@ -84,7 +441,7 @@ var createSteps = function createSteps(onboardingSteps, setCurrentStep, currentS
       setCurrentStep: setCurrentStep
     })
   };
-  return onboardingSteps.concat(helpStep).map(function (step, idx) {
+  return onboardingSteps.concat(isCommunityStepVisible ? [communityStep, helpStep] : helpStep).map(function (step, idx) {
     return _objectSpread$1(_objectSpread$1({}, step), {}, {
       id: idx + 1
     });
@@ -242,11 +599,27 @@ var Onboarding = function Onboarding(_ref) {
     welcomeScreenClassName = _ref$welcomeScreenCla === void 0 ? "" : _ref$welcomeScreenCla,
     _ref$completedScreenC = _ref.completedScreenClassName,
     completedScreenClassName = _ref$completedScreenC === void 0 ? "" : _ref$completedScreenC,
-    completedScreenSuccessMessage = _ref.completedScreenSuccessMessage;
+    completedScreenSuccessMessage = _ref.completedScreenSuccessMessage,
+    _ref$isCommunityStepV = _ref.isCommunityStepVisible,
+    isCommunityStepVisible = _ref$isCommunityStepV === void 0 ? true : _ref$isCommunityStepV;
   var steps = useMemo(function () {
-    return createSteps(onboardingSteps, setCurrentStep, currentStep, helpScreenClassName);
-  }, [onboardingSteps]);
+    return createSteps(onboardingSteps, setCurrentStep, currentStep, helpScreenClassName, isCommunityStepVisible);
+  }, [onboardingSteps, isCommunityStepVisible]);
   var prevStep = useRef(currentStep);
+  var isStepperNavigation = useRef(false);
+  var isRedirectingToCommunity = useRef(false);
+
+  // Products move from their last step straight to Help. Send them through
+  // the community step first, unless they picked Help in the stepper.
+  useLayoutEffect(function () {
+    var isFromStepper = isStepperNavigation.current;
+    isStepperNavigation.current = false;
+    var shouldShowCommunityFirst = isCommunityStepVisible && !isFromStepper && currentStep === GENERAL_ONBOARDING_STEPS.HELP && prevStep.current !== currentStep && prevStep.current !== GENERAL_ONBOARDING_STEPS.COMMUNITY;
+    if (shouldShowCommunityFirst) {
+      isRedirectingToCommunity.current = true;
+      setCurrentStep(GENERAL_ONBOARDING_STEPS.COMMUNITY);
+    }
+  }, [currentStep]);
   var _useState = useState(""),
     _useState2 = _slicedToArray(_useState, 2),
     direction = _useState2[0],
@@ -258,6 +631,13 @@ var Onboarding = function Onboarding(_ref) {
   };
   useEffect(function () {
     if (currentStep === prevStep.current) return;
+
+    // Help is skipped over on the way to the community step, so the
+    // animation should run from the step before it.
+    if (isRedirectingToCommunity.current) {
+      isRedirectingToCommunity.current = false;
+      return;
+    }
     setDirection(getOnboardingStepIndex(currentStep) > getOnboardingStepIndex(prevStep.current) ? "forward" : "backward");
     prevStep.current = currentStep;
   }, [currentStep]);
@@ -277,7 +657,10 @@ var Onboarding = function Onboarding(_ref) {
     });
   }
   var handleStepChange = function handleStepChange(index) {
-    return setCurrentStep(steps[index].key);
+    var stepKey = steps[index].key;
+    if (stepKey === currentStep) return;
+    isStepperNavigation.current = true;
+    setCurrentStep(stepKey);
   };
   var isStepperVisible = steps.length > 1;
   return /*#__PURE__*/jsxs("div", {