@bigbinary/neeto-molecules 5.5.0 → 5.5.2

package/dist/v2/Onboarding.js

@@ -1,16 +1,23 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useState, useLayoutEffect, useEffect, useMemo, useRef } from 'react';
-import { Typography, Button, Stepper } from '@bigbinary/neeto-atoms';
+import { Input, Button, Typography, Checkbox, Stepper } from '@bigbinary/neeto-atoms';
 import classnames from 'classnames';
-import { isPresent, capitalize, noop, findIndexBy } from '@bigbinary/neeto-cist';
+import { capitalize, isPresent, noop, findIndexBy } from '@bigbinary/neeto-cist';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { globalProps } from '@bigbinary/neeto-commons-frontend/v2/initializers';
 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/v2/react-utils/useBreakpoints';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { assoc, dissoc } from 'ramda';
+import { C as CircleUser } from '../circle-user-ieD_gMjm.js';
 import { c as createLucideIcon } from '../createLucideIcon--oLqczpc.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { M as Mail } from '../mail-CkquKByM.js';
+import { useMutation } from '@tanstack/react-query';
+import axios from 'axios';
+import { BASE_API_V1_URL } from '@bigbinary/neeto-commons-frontend/v2/constants';
+import * as yup from 'yup';
+import useBreakpoints from '@bigbinary/neeto-commons-frontend/v2/react-utils/useBreakpoints';
 import { n } from '../inject-css-C2dztUxs.js';
 import { withT } from '@bigbinary/neeto-commons-frontend/v2/react-utils';
 
@@ -22,18 +29,384 @@ import { withT } from '@bigbinary/neeto-commons-frontend/v2/react-utils';
  */
 
 
-const __iconNode = [
+const __iconNode$1 = [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "m12 5 7 7-7 7", key: "xquz4c" }]
 ];
-const ArrowRight = createLucideIcon("arrow-right", __iconNode);
+const ArrowRight = createLucideIcon("arrow-right", __iconNode$1);
+
+/**
+ * @license lucide-react v1.24.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode = [
+  ["path", { d: "M2 6h4", key: "aawbzj" }],
+  ["path", { d: "M2 10h4", key: "l0bgd4" }],
+  ["path", { d: "M2 14h4", key: "1gsvsf" }],
+  ["path", { d: "M2 18h4", key: "1bu2t1" }],
+  ["rect", { width: "16", height: "20", x: "4", y: "2", rx: "2", key: "1nb95v" }],
+  ["path", { d: "M9.5 8h5", key: "11mslq" }],
+  ["path", { d: "M9.5 12H16", key: "ktog6x" }],
+  ["path", { d: "M9.5 16H14", key: "p1seyn" }]
+];
+const NotebookText = createLucideIcon("notebook-text", __iconNode);
+
+var COMMUNITY_OPTIONS = [{
+  key: "slack",
+  icon: CircleUser,
+  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: NotebookText,
+  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"),
+        variant: "ghost",
+        onClick: onCancel
+      })]
+    });
+  }
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex flex-wrap items-center gap-2 ps-6 pt-3",
+    children: [/*#__PURE__*/jsx(Mail, {
+      "aria-hidden": true,
+      className: "text-muted-foreground",
+      size: 16
+    }), /*#__PURE__*/jsx(Typography, {
+      color: "muted",
+      variant: "body2",
+      children: /*#__PURE__*/jsx(Trans, {
+        components: {
+          strong: /*#__PURE__*/jsx("strong", {
+            className: "text-foreground"
+          })
+        },
+        i18nKey: recipientKey,
+        values: {
+          email: email
+        }
+      })
+    }), /*#__PURE__*/jsx(Button, {
+      "data-testid": dataTestids.change,
+      label: t("neetoMolecules.onboarding.communityScreen.changeButton"),
+      size: "sm",
+      variant: "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",
+        variant: "h2",
+        children: t("neetoMolecules.onboarding.communityScreen.title")
+      }), /*#__PURE__*/jsx(Typography, {
+        "data-testid": "onboarding-community-description",
+        variant: "body1",
+        children: t("neetoMolecules.onboarding.communityScreen.description", {
+          appName: appName
+        })
+      })]
+    }), /*#__PURE__*/jsx("div", {
+      className: "border-border flex w-full flex-col gap-6 rounded-lg 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
+              })]
+            }),
+            onCheckedChange: function onCheckedChange(checked) {
+              setSelected(assoc(key, checked));
+              if (!checked) recipients.cancel(key);
+            }
+          }), /*#__PURE__*/jsx(Typography, {
+            className: "ps-6 pt-2",
+            color: "muted",
+            variant: "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, {
+      color: "muted",
+      variant: "body2",
+      children: t("neetoMolecules.onboarding.communityScreen.unsubscribe")
+    }), /*#__PURE__*/jsx(Button, {
+      "data-testid": "community-onboarding-continue-button",
+      icon: function icon() {
+        return /*#__PURE__*/jsx(ArrowRight, {
+          className: "rtl:scale-x-[-1]",
+          size: 16
+        });
+      },
+      iconPosition: "right",
+      label: t("neetoMolecules.onboarding.communityScreen.continueButton"),
+      onClick: handleContinue
+    })]
+  });
+};
+
 var HelpScreen = function HelpScreen(_ref) {
   var setCurrentStep = _ref.setCurrentStep,
     helpScreenClassName = _ref.helpScreenClassName;
@@ -84,7 +457,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"),
@@ -94,7 +474,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
     });
@@ -251,11 +631,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],
@@ -267,6 +663,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]);
@@ -286,7 +689,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", {