@heycater/qualification-funnel 1.3.12 → 1.3.14

package/dist/index.esm.js

@@ -2,7 +2,7 @@ var _a;
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import React__default, { createContext, useContext, useMemo, useReducer, useCallback, useEffect, useRef, useState, isValidElement, cloneElement, Children, forwardRef } from "react";
-import { darken as darken$1, lighten as lighten$1, ButtonBase as ButtonBase$2, Typography as Typography$1, useMediaQuery, Input as Input$1, IconButton as IconButton$2, FormControlLabel, useTheme as useTheme$1, Tooltip, Menu, Hidden, SnackbarContent, Snackbar, TextField, CircularProgress, Modal, ThemeProvider as ThemeProvider$1, StylesProvider as StylesProvider$1, CssBaseline } from "@material-ui/core";
+import { darken as darken$1, lighten as lighten$1, ButtonBase as ButtonBase$2, Typography as Typography$1, useMediaQuery, Input as Input$1, IconButton as IconButton$2, useTheme as useTheme$1, FormControlLabel, Tooltip, Menu, Hidden, SnackbarContent, Snackbar, TextField, CircularProgress, Modal, ThemeProvider as ThemeProvider$1, StylesProvider as StylesProvider$1, CssBaseline } from "@material-ui/core";
 import { useTranslation, initReactI18next, I18nextProvider } from "react-i18next";
 import styled, { css as css$1, createGlobalStyle, ThemeProvider } from "styled-components";
 import { gql, useQuery, useClient, mapExchange, Client, cacheExchange, fetchExchange, Provider } from "urql";
@@ -7077,7 +7077,29 @@ const teamSizeQuestion = Object.freeze(
       titleDe: "Wie viele Mitarbeitende sind ca. regelmäßig vor Ort?",
       placeholderEn: "Number of employees",
       placeholderDe: "Anzahl der Mitarbeiter"
-    }
+    },
+    suggestions: [
+      {
+        labelEn: "10 People",
+        labelDe: "10 Personen",
+        value: 10
+      },
+      {
+        labelEn: "25 People",
+        labelDe: "25 Personen",
+        value: 25
+      },
+      {
+        labelEn: "50 People",
+        labelDe: "50 Personen",
+        value: 50
+      },
+      {
+        labelEn: "100 People",
+        labelDe: "100 Personen",
+        value: 100
+      }
+    ]
   })
 );
 const questions$2 = {
@@ -9661,6 +9683,7 @@ const QuantityStepperField = ({
   autoFocus = true
 }) => {
   const { inputRef } = useInputFocusOnMount({ shouldFocus: autoFocus });
+  const muiTheme = useTheme$1();
   const handleChange = (nextValue) => {
     onChange(Number(nextValue));
   };
@@ -9670,6 +9693,15 @@ const QuantityStepperField = ({
   const onIncrement = () => {
     handleChange((value ?? 0) + 1);
   };
+  const inputInlineStyle = {
+    textAlign: "center",
+    backgroundColor: muiTheme.palette.text.disabled,
+    border: "1px solid transparent",
+    borderRadius: muiTheme.spacing(1),
+    height: 49,
+    width: 110,
+    boxSizing: "border-box"
+  };
   return /* @__PURE__ */ jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [
     /* @__PURE__ */ jsx(
       IconButtonLeft$1,
@@ -9694,7 +9726,8 @@ const QuantityStepperField = ({
         defaultValue,
         onChange: (event) => handleChange(event.target.value),
         value,
-        autoComplete: "off"
+        autoComplete: "off",
+        inputProps: { style: inputInlineStyle }
       }
     ),
     /* @__PURE__ */ jsx(
@@ -9774,24 +9807,6 @@ const IconButtonRight$1 = styled(StepperIconButton$1)`
 const IconButtonLeft$1 = styled(StepperIconButton$1)`
   margin-right: ${(props) => props.theme.spacing(2)}px;
 `;
-function PeopleCountStepper() {
-  const { actions, state, answerOf, errorsOf } = useQualification();
-  if (state.status !== QUALIFICATION_STATUS.answering) {
-    return null;
-  }
-  const answer = answerOf(questions$2.peopleCount.id);
-  const errors = errorsOf(questions$2.peopleCount.id);
-  return /* @__PURE__ */ jsx(
-    QuantityStepperField,
-    {
-      name: questions$2.peopleCount.id,
-      id: questions$2.peopleCount.id,
-      value: answer || 0,
-      error: !!(errors == null ? void 0 : errors.length),
-      onChange: (value) => actions.answerQuestion(questions$2.peopleCount.id, value)
-    }
-  );
-}
 const localeConfig = {
   locales: ["en", "de"],
   defaultLocale: "de"
@@ -9823,18 +9838,14 @@ function useLocalizedFieldName() {
     localizedAttributeName
   };
 }
-function PopularValues() {
-  const { actions } = useQualification();
+function PopularValues({ questionId, suggestions, onSelect }) {
   const { localizedAttributeName } = useLocalizedFieldName();
   const localizedOptions = useMemo(
-    () => {
-      var _a2;
-      return (_a2 = peopleCountQuestion.suggestions) == null ? void 0 : _a2.map((option) => ({
-        value: option.value,
-        label: option[localizedAttributeName("label")]
-      }));
-    },
-    [localizedAttributeName]
+    () => suggestions.map((option) => ({
+      value: option.value,
+      label: option[localizedAttributeName("label")]
+    })),
+    [localizedAttributeName, suggestions]
   ) || [];
   return /* @__PURE__ */ jsx(
     FlexBox,
@@ -9843,11 +9854,11 @@ function PopularValues() {
       flexDirection: "row",
       alignItems: "center",
       justifyContent: "center",
-      id: peopleCountQuestion.id,
+      id: questionId,
       children: localizedOptions.map((option, index) => /* @__PURE__ */ jsx(
         Box,
         {
-          onClick: () => actions.answerQuestion(peopleCountQuestion.id, option.value),
+          onClick: () => onSelect(option.value),
           children: /* @__PURE__ */ jsx(StyledTypography$1, { variant: "caption", children: option.label })
         },
         `${option.value}::${index}`
@@ -9875,6 +9886,7 @@ function PriceStepperField({
   autoFocus
 }) {
   const { inputRef } = useInputFocusOnMount({ shouldFocus: !!autoFocus });
+  const muiTheme = useTheme$1();
   const minValue = min2 || 0;
   const currencySymbol = useCurrencySymbol();
   const isInputValid = (value2) => {
@@ -9924,7 +9936,18 @@ function PriceStepperField({
           type: "tel",
           onChange: handleChange,
           value: Number(value),
-          autoComplete: "off"
+          autoComplete: "off",
+          inputProps: {
+            style: {
+              textAlign: "center",
+              backgroundColor: muiTheme.palette.text.disabled,
+              border: "1px solid transparent",
+              borderRadius: muiTheme.spacing(1),
+              height: 49,
+              width: 110,
+              boxSizing: "border-box"
+            }
+          }
         }
       ),
       /* @__PURE__ */ jsx(Adornment, { children: /* @__PURE__ */ jsx(Typography, { children: currencySymbol }) })
@@ -10021,14 +10044,33 @@ function BudgetQuestionWithPeopleCount() {
   const { t: t2 } = useTranslation();
   const { currentUserAccount } = useCurrentUser();
   const isManagedAccount = (_b = (_a2 = currentUserAccount == null ? void 0 : currentUserAccount.owner) == null ? void 0 : _a2.salesforceCustomer) == null ? void 0 : _b.isManagedAccount;
+  const peopleCountAnswer = answerOf(questions$2.peopleCount.id);
+  const peopleCountErrors = errorsOf(questions$2.peopleCount.id);
   const pricePerPersonAnswer = answerOf(pricePerPersonQuestion.id);
   const pricePerPersonErrors = errorsOf(pricePerPersonQuestion.id);
   const budgetAnswer = answerOf(totalBudgetQuestion.id);
   const budgetErrors = errorsOf(totalBudgetQuestion.id);
   return /* @__PURE__ */ jsxs(Wrapper$4, { children: [
     /* @__PURE__ */ jsx(Box, { mb: 3, children: /* @__PURE__ */ jsx(Typography, { as: "label", htmlFor: questions$2.peopleCount.id, children: t2("common:questions.min_order_number") }) }),
-    /* @__PURE__ */ jsx(Box, { mb: 3, children: /* @__PURE__ */ jsx(PeopleCountStepper, {}) }),
-    /* @__PURE__ */ jsx(FullRowBox, { children: /* @__PURE__ */ jsx(PopularValues, {}) }),
+    /* @__PURE__ */ jsx(Box, { mb: 3, children: /* @__PURE__ */ jsx(
+      QuantityStepperField,
+      {
+        name: questions$2.peopleCount.id,
+        id: questions$2.peopleCount.id,
+        value: peopleCountAnswer || 0,
+        error: !!(peopleCountErrors == null ? void 0 : peopleCountErrors.length),
+        onChange: (value) => actions.answerQuestion(questions$2.peopleCount.id, value),
+        autoFocus: false
+      }
+    ) }),
+    /* @__PURE__ */ jsx(FullRowBox, { children: /* @__PURE__ */ jsx(
+      PopularValues,
+      {
+        questionId: questions$2.peopleCount.id,
+        suggestions: peopleCountQuestion.suggestions || [],
+        onSelect: (value) => actions.answerQuestion(questions$2.peopleCount.id, value)
+      }
+    ) }),
     /* @__PURE__ */ jsx(Divider$1, { my: 4 }),
     /* @__PURE__ */ jsx(Box, { mb: 2, children: /* @__PURE__ */ jsx(Typography, { as: "label", htmlFor: pricePerPersonQuestion.id, children: t2("common:questions.budgetProPerson") }) }),
     /* @__PURE__ */ jsx(Box, { mb: 2, children: /* @__PURE__ */ jsx(
@@ -11419,25 +11461,45 @@ const IconWrapper$1 = styled(Box)`
 function createIconEntry(id, Icon, translationKey) {
   return { id, Icon, translationKey: translationKey || `common:cities.${id}` };
 }
-const TeamSizeInput = ({ value, onChange, placeholder }) => {
-  return /* @__PURE__ */ jsx(Wrapper$1, { children: /* @__PURE__ */ jsx(
-    QuantityStepperField,
-    {
-      id: "team-size",
-      name: "team_size",
-      value,
-      onChange: (val) => onChange(Number(val)),
-      placeholder
-    }
-  ) });
+const TeamSizeInput = ({
+  label,
+  questionId,
+  value,
+  onChange,
+  placeholder,
+  error,
+  suggestions,
+  autoFocus
+}) => {
+  return /* @__PURE__ */ jsxs(Wrapper$1, { children: [
+    /* @__PURE__ */ jsx(Box, { mb: 3, children: /* @__PURE__ */ jsx(Typography, { as: "label", htmlFor: questionId, children: label }) }),
+    /* @__PURE__ */ jsx(Box, { mb: (suggestions == null ? void 0 : suggestions.length) ? 3 : 0, children: /* @__PURE__ */ jsx(
+      QuantityStepperField,
+      {
+        id: questionId,
+        name: questionId,
+        value,
+        error,
+        onChange: (val) => onChange(Number(val)),
+        placeholder,
+        autoFocus
+      }
+    ) }),
+    (suggestions == null ? void 0 : suggestions.length) ? /* @__PURE__ */ jsx(
+      PopularValues,
+      {
+        questionId,
+        suggestions,
+        onSelect: onChange
+      }
+    ) : null
+  ] });
 };
-const Wrapper$1 = styled(Box)`
+const Wrapper$1 = styled.div`
   display: flex;
-  justify-content: center;
-  padding: ${({ theme }) => theme.spacing(2)}px;
-  background: white;
-  border-radius: 8px;
-  max-width: 300px;
+  flex-direction: column;
+  align-items: center;
+  max-width: 441px;
   margin: 0 auto;
 `;
 const MAX_WIDTH_OF_WHITE_WRAPPER = 826;
@@ -11464,7 +11526,7 @@ const EmbeddedQuestion = ({
   LayoutComponent = EmbeddedQuestionLayout,
   mode = "embedded"
 }) => {
-  var _a2, _b, _c, _d;
+  var _a2, _b, _c, _d, _e;
   const { t: t2 } = useTranslation();
   const { state, actions, answerOf } = useQualification();
   const selectedMenu = "qualification" in state ? state.qualification.selectedMenu : null;
@@ -11594,9 +11656,12 @@ const EmbeddedQuestion = ({
           content: /* @__PURE__ */ jsx(Container, { size: MAX_WIDTH_OF_WHITE_WRAPPER, children: /* @__PURE__ */ jsx(WhiteWrapper, { children: /* @__PURE__ */ jsx(Box, { py: 4, children: /* @__PURE__ */ jsx(
             TeamSizeInput,
             {
+              label: t2("qualification:embeddedFunnel.teamSize.label", (_e = teamSizeQuestion.content) == null ? void 0 : _e.titleDe),
+              questionId: teamSizeQuestion.id,
               value: answerOf("team_size"),
               onChange: (value) => actions.answerQuestion("team_size", value),
-              placeholder: t2("qualification:embeddedFunnel.teamSize.placeholder")
+              placeholder: t2("qualification:embeddedFunnel.teamSize.placeholder"),
+              suggestions: teamSizeQuestion.suggestions
             }
           ) }) }) }),
           side: selectedMenu && /* @__PURE__ */ jsx(SelectedMenuCard, { ...selectedMenu })
@@ -11636,9 +11701,12 @@ const EmbeddedQuestion = ({
           content: /* @__PURE__ */ jsx(Container, { size: MAX_WIDTH_OF_WHITE_WRAPPER, children: /* @__PURE__ */ jsx(WhiteWrapper, { children: /* @__PURE__ */ jsx(Box, { py: 4, children: /* @__PURE__ */ jsx(
             TeamSizeInput,
             {
+              label: t2("common:questions.min_order_number"),
+              questionId: peopleCountFullServiceQuestion.id,
               value: answerOf("min_order_number"),
               onChange: (value) => actions.answerQuestion("min_order_number", value),
-              placeholder: t2("qualification:embeddedFunnel.peopleCount.placeholder")
+              placeholder: t2("qualification:embeddedFunnel.peopleCount.placeholder"),
+              suggestions: peopleCountFullServiceQuestion.suggestions
             }
           ) }) }) }),
           side: selectedMenu && /* @__PURE__ */ jsx(SelectedMenuCard, { ...selectedMenu })
@@ -14703,17 +14771,12 @@ function requireReactIs_development() {
   }
   return reactIs_development;
 }
-var hasRequiredReactIs;
-function requireReactIs() {
-  if (hasRequiredReactIs) return reactIs$1.exports;
-  hasRequiredReactIs = 1;
-  if (process.env.NODE_ENV === "production") {
-    reactIs$1.exports = requireReactIs_production_min();
-  } else {
-    reactIs$1.exports = requireReactIs_development();
-  }
-  return reactIs$1.exports;
+if (process.env.NODE_ENV === "production") {
+  reactIs$1.exports = requireReactIs_production_min();
+} else {
+  reactIs$1.exports = requireReactIs_development();
 }
+var reactIsExports = reactIs$1.exports;
 /*
 object-assign
 (c) Sindre Sorhus
@@ -14874,7 +14937,7 @@ var hasRequiredFactoryWithTypeCheckers;
 function requireFactoryWithTypeCheckers() {
   if (hasRequiredFactoryWithTypeCheckers) return factoryWithTypeCheckers;
   hasRequiredFactoryWithTypeCheckers = 1;
-  var ReactIs = requireReactIs();
+  var ReactIs = reactIsExports;
   var assign2 = requireObjectAssign();
   var ReactPropTypesSecret = requireReactPropTypesSecret();
   var has2 = requireHas();
@@ -15367,7 +15430,7 @@ function requireFactoryWithThrowingShims() {
   return factoryWithThrowingShims;
 }
 if (process.env.NODE_ENV !== "production") {
-  var ReactIs = requireReactIs();
+  var ReactIs = reactIsExports;
   var throwOnDirectAccess = true;
   propTypes.exports = requireFactoryWithTypeCheckers()(ReactIs.isElement, throwOnDirectAccess);
 } else {
@@ -15462,7 +15525,6 @@ function formatMuiErrorMessage(code) {
   }
   return "Minified Material-UI error #" + code + "; visit " + url + " for the full message.";
 }
-var reactIsExports = requireReactIs();
 var fnNameMatchRegex = /^\s*function(?:\s|\s*\/\*.*\*\/\s*)+([^(\s/]*)\s*/;
 function getFunctionName(fn) {
   var match2 = "".concat(fn).match(fnNameMatchRegex);
@@ -18957,7 +19019,7 @@ function makeStyles(stylesOrCreator) {
   };
   return useStyles;
 }
-var reactIs = requireReactIs();
+var reactIs = reactIsExports;
 var REACT_STATICS = {
   childContextTypes: true,
   contextType: true,