@heycater/qualification-funnel 1.3.13 → 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";
@@ -9683,6 +9683,7 @@ const QuantityStepperField = ({
   autoFocus = true
 }) => {
   const { inputRef } = useInputFocusOnMount({ shouldFocus: autoFocus });
+  const muiTheme = useTheme$1();
   const handleChange = (nextValue) => {
     onChange(Number(nextValue));
   };
@@ -9692,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,
@@ -9716,7 +9726,8 @@ const QuantityStepperField = ({
         defaultValue,
         onChange: (event) => handleChange(event.target.value),
         value,
-        autoComplete: "off"
+        autoComplete: "off",
+        inputProps: { style: inputInlineStyle }
       }
     ),
     /* @__PURE__ */ jsx(
@@ -9864,47 +9875,6 @@ const StyledTypography$1 = styled(Typography)`
   border-bottom: 1px dotted #000;
   cursor: pointer;
 `;
-const TeamSizeInput = ({
-  label,
-  questionId,
-  value,
-  onChange,
-  placeholder,
-  error,
-  suggestions,
-  autoFocus
-}) => {
-  return /* @__PURE__ */ jsxs(Wrapper$4, { 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$4 = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  max-width: 441px;
-  margin: 0 auto;
-`;
 function PriceStepperField({
   name,
   min: min2,
@@ -9916,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) => {
@@ -9965,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 }) })
@@ -10068,19 +10050,27 @@ function BudgetQuestionWithPeopleCount() {
   const pricePerPersonErrors = errorsOf(pricePerPersonQuestion.id);
   const budgetAnswer = answerOf(totalBudgetQuestion.id);
   const budgetErrors = errorsOf(totalBudgetQuestion.id);
-  return /* @__PURE__ */ jsxs(Wrapper$3, { children: [
-    /* @__PURE__ */ jsx(FullRowBox, { children: /* @__PURE__ */ jsx(
-      TeamSizeInput,
+  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(
+      QuantityStepperField,
       {
-        label: t2("common:questions.min_order_number"),
-        questionId: questions$2.peopleCount.id,
+        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),
-        suggestions: peopleCountQuestion.suggestions,
         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(
@@ -10130,7 +10120,7 @@ const Divider$1 = styled(Box)`
   width: 100%;
   grid-column: 1 / 3;
 `;
-const Wrapper$3 = styled.div`
+const Wrapper$4 = styled.div`
   display: flex;
   flex-direction: column;
   max-width: 441px;
@@ -10393,12 +10383,12 @@ function DatePickerLayout({
   if (state.status !== QUALIFICATION_STATUS.answering) {
     return null;
   }
-  return /* @__PURE__ */ jsxs(Wrapper$2, { $hasSidebar: hasSidebar, ...boxProps, children: [
+  return /* @__PURE__ */ jsxs(Wrapper$3, { $hasSidebar: hasSidebar, ...boxProps, children: [
     dateSelector,
     sideContent
   ] });
 }
-const Wrapper$2 = styled(Box)`
+const Wrapper$3 = styled(Box)`
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
@@ -10934,7 +10924,7 @@ function DietaryDistribution() {
   }
   const peopleCountAnswer = answerOf("min_order_number");
   return /* @__PURE__ */ jsxs(Box, { maxWidth: "500px", width: "100%", mx: "auto", children: [
-    /* @__PURE__ */ jsx(Wrapper$1, { children: step.questions.map((childQuestion, index) => {
+    /* @__PURE__ */ jsx(Wrapper$2, { children: step.questions.map((childQuestion, index) => {
       return /* @__PURE__ */ jsx(
         DietaryStepper,
         {
@@ -10947,7 +10937,7 @@ function DietaryDistribution() {
     /* @__PURE__ */ jsx(DietaryTotal, { count: peopleCountAnswer || 0 })
   ] });
 }
-const Wrapper$1 = styled.div`
+const Wrapper$2 = styled.div`
   display: flex;
   flex-direction: column;
 `;
@@ -11471,6 +11461,47 @@ const IconWrapper$1 = styled(Box)`
 function createIconEntry(id, Icon, translationKey) {
   return { id, Icon, translationKey: translationKey || `common:cities.${id}` };
 }
+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.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 441px;
+  margin: 0 auto;
+`;
 const MAX_WIDTH_OF_WHITE_WRAPPER = 826;
 const defaultStepTitleMapping = {
   service_selection: "qualification:embeddedFunnel.serviceSelection.title",
@@ -11495,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;
@@ -11625,7 +11656,7 @@ 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", teamSizeQuestion.content.titleDe),
+              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),
@@ -14740,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
@@ -14911,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();
@@ -15404,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 {
@@ -15499,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);
@@ -18994,7 +19019,7 @@ function makeStyles(stylesOrCreator) {
   };
   return useStyles;
 }
-var reactIs = requireReactIs();
+var reactIs = reactIsExports;
 var REACT_STATICS = {
   childContextTypes: true,
   contextType: true,