@heycater/qualification-funnel 1.3.12 → 1.3.13

package/dist/index.esm.js

@@ -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 = {
@@ -9774,24 +9796,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 +9827,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 +9843,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}`
@@ -9864,6 +9864,47 @@ 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,
@@ -10021,14 +10062,25 @@ 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, {}) }),
+  return /* @__PURE__ */ jsxs(Wrapper$3, { children: [
+    /* @__PURE__ */ jsx(FullRowBox, { children: /* @__PURE__ */ jsx(
+      TeamSizeInput,
+      {
+        label: t2("common:questions.min_order_number"),
+        questionId: 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(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(
@@ -10078,7 +10130,7 @@ const Divider$1 = styled(Box)`
   width: 100%;
   grid-column: 1 / 3;
 `;
-const Wrapper$4 = styled.div`
+const Wrapper$3 = styled.div`
   display: flex;
   flex-direction: column;
   max-width: 441px;
@@ -10341,12 +10393,12 @@ function DatePickerLayout({
   if (state.status !== QUALIFICATION_STATUS.answering) {
     return null;
   }
-  return /* @__PURE__ */ jsxs(Wrapper$3, { $hasSidebar: hasSidebar, ...boxProps, children: [
+  return /* @__PURE__ */ jsxs(Wrapper$2, { $hasSidebar: hasSidebar, ...boxProps, children: [
     dateSelector,
     sideContent
   ] });
 }
-const Wrapper$3 = styled(Box)`
+const Wrapper$2 = styled(Box)`
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
@@ -10882,7 +10934,7 @@ function DietaryDistribution() {
   }
   const peopleCountAnswer = answerOf("min_order_number");
   return /* @__PURE__ */ jsxs(Box, { maxWidth: "500px", width: "100%", mx: "auto", children: [
-    /* @__PURE__ */ jsx(Wrapper$2, { children: step.questions.map((childQuestion, index) => {
+    /* @__PURE__ */ jsx(Wrapper$1, { children: step.questions.map((childQuestion, index) => {
       return /* @__PURE__ */ jsx(
         DietaryStepper,
         {
@@ -10895,7 +10947,7 @@ function DietaryDistribution() {
     /* @__PURE__ */ jsx(DietaryTotal, { count: peopleCountAnswer || 0 })
   ] });
 }
-const Wrapper$2 = styled.div`
+const Wrapper$1 = styled.div`
   display: flex;
   flex-direction: column;
 `;
@@ -11419,27 +11471,6 @@ 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 Wrapper$1 = styled(Box)`
-  display: flex;
-  justify-content: center;
-  padding: ${({ theme }) => theme.spacing(2)}px;
-  background: white;
-  border-radius: 8px;
-  max-width: 300px;
-  margin: 0 auto;
-`;
 const MAX_WIDTH_OF_WHITE_WRAPPER = 826;
 const defaultStepTitleMapping = {
   service_selection: "qualification:embeddedFunnel.serviceSelection.title",
@@ -11594,9 +11625,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", teamSizeQuestion.content.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 +11670,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 })