Merge pull request #1059 from Hexastack/1058-issue---missing-list-dynamic-form-control

fix(frontend): add limit validation based on block list type

frontend/public/locales/en/translation.json

@@ -103,6 +103,7 @@
     "message_is_required": "Message is required",
     "context_var_is_required": "You need to add a context variable",
     "invalid_list_limit": "List limit must be >=2 and <= 4",
+    "invalid_carousel_limit": "List limit must be >=1 and <= 10",
     "no_content_type": "No content type available, please create one first",
     "invalid_max_fallback_attempt_limit": "Max fallback attempt limit must have positive value",
     "regex_is_invalid": "Regex is invalid",

frontend/public/locales/fr/translation.json

@@ -103,6 +103,7 @@
     "message_is_required": "Le message est requis",
     "context_var_is_required": "Vous devez ajouter une variable contextuelle",
     "invalid_list_limit": "La limite doit être >=2 et <= 4",
+    "invalid_carousel_limit": "La limite doit être >=1 et <= 10",
     "no_content_type": "Il n'y a aucun type de contenu pour le moment, veuillez en ajouter un.",
     "invalid_max_fallback_attempt_limit": "La limite des tentatives de secours doit être un nombre positif.",
     "regex_is_invalid": "Le regex est invalide",

frontend/src/components/visual-editor/form/ListMessageForm.tsx

@@ -113,16 +113,26 @@ const ListMessageForm = () => {
             label={t("label.content_limit")}
             type="number"
             inputProps={{
-              maxLength: 25,
-              step: "1",
-              min: 2,
-              max: 4,
+              maxLength: 2,
+              step: 1,
+              min: displayMode === OutgoingMessageFormat.list ? 2 : 1,
+              max: displayMode === OutgoingMessageFormat.list ? 4 : 10,
             }}
             {...register("options.content.limit", {
               validate: {
-                min: (value) =>
-                  (value && value >= 2 && value <= 4) ||
-                  t("message.invalid_list_limit"),
+                limitRange: (value) => {
+                  if (
+                    displayMode === OutgoingMessageFormat.list &&
+                    (value < 2 || value > 4)
+                  ) {
+                    return t("message.invalid_list_limit");
+                  } else if (
+                    displayMode === OutgoingMessageFormat.carousel &&
+                    (value < 1 || value > 10)
+                  ) {
+                    return t("message.invalid_carousel_limit");
+                  }
+                },
               },
               valueAsNumber: true,
             })}