@wise/dynamic-flow-client 5.6.1 → 5.7.0

package/build/i18n/ja.json

@@ -26,7 +26,7 @@
   "dynamicFlows.FileUploadSchema.maxFileSizeError": "大変申し訳ございませんが、ファイルが大きすぎます。これより小さいファイルをアップロードしてください。",
   "dynamicFlows.FileUploadSchema.wrongFileTypeError": "そのファイル形式はサポートされていません。別のファイルをアップロードしてください。",
   "dynamicFlows.Help.ariaLabel": "詳細はこちらをクリックしてください。",
-  "dynamicFlows.MultiSelect.summary": "{first}とその他{count}",
+  "dynamicFlows.MultiSelect.summary": "{first}とその他{count}オプション",
   "dynamicFlows.MultipleFileUploadSchema.maxFileSizeError": "大変申し訳ございませんが、ファイルが大きすぎます。これより小さいファイルをアップロードしてください。",
   "dynamicFlows.MultipleFileUploadSchema.maxItemsError": "{maxItems}個以下のファイルをアップロードしてください。",
   "dynamicFlows.MultipleFileUploadSchema.minItemsError": "{minItems}個以上のファイルをアップロードしてください。",

package/build/main.css

@@ -153,6 +153,21 @@
     width: 300px;
   }
 }
+.df-media-layout-avatar {
+  display: flex;
+}
+.df-media-layout-avatar.start {
+  justify-content: start;
+  align-items: start;
+}
+.df-media-layout-avatar.center {
+  justify-content: center;
+  align-items: center;
+}
+.df-media-layout-avatar.end {
+  justify-content: end;
+  align-items: end;
+}
 .df-toolbar {
   display: flex;
   gap: 0.25em;

package/build/main.js

@@ -416,7 +416,7 @@ var ja_default = {
   "dynamicFlows.FileUploadSchema.maxFileSizeError": "\u5927\u5909\u7533\u3057\u8A33\u3054\u3056\u3044\u307E\u305B\u3093\u304C\u3001\u30D5\u30A1\u30A4\u30EB\u304C\u5927\u304D\u3059\u304E\u307E\u3059\u3002\u3053\u308C\u3088\u308A\u5C0F\u3055\u3044\u30D5\u30A1\u30A4\u30EB\u3092\u30A2\u30C3\u30D7\u30ED\u30FC\u30C9\u3057\u3066\u304F\u3060\u3055\u3044\u3002",
   "dynamicFlows.FileUploadSchema.wrongFileTypeError": "\u305D\u306E\u30D5\u30A1\u30A4\u30EB\u5F62\u5F0F\u306F\u30B5\u30DD\u30FC\u30C8\u3055\u308C\u3066\u3044\u307E\u305B\u3093\u3002\u5225\u306E\u30D5\u30A1\u30A4\u30EB\u3092\u30A2\u30C3\u30D7\u30ED\u30FC\u30C9\u3057\u3066\u304F\u3060\u3055\u3044\u3002",
   "dynamicFlows.Help.ariaLabel": "\u8A73\u7D30\u306F\u3053\u3061\u3089\u3092\u30AF\u30EA\u30C3\u30AF\u3057\u3066\u304F\u3060\u3055\u3044\u3002",
-  "dynamicFlows.MultiSelect.summary": "{first}\u3068\u305D\u306E\u4ED6{count}",
+  "dynamicFlows.MultiSelect.summary": "{first}\u3068\u305D\u306E\u4ED6{count}\u30AA\u30D7\u30B7\u30E7\u30F3",
   "dynamicFlows.MultipleFileUploadSchema.maxFileSizeError": "\u5927\u5909\u7533\u3057\u8A33\u3054\u3056\u3044\u307E\u305B\u3093\u304C\u3001\u30D5\u30A1\u30A4\u30EB\u304C\u5927\u304D\u3059\u304E\u307E\u3059\u3002\u3053\u308C\u3088\u308A\u5C0F\u3055\u3044\u30D5\u30A1\u30A4\u30EB\u3092\u30A2\u30C3\u30D7\u30ED\u30FC\u30C9\u3057\u3066\u304F\u3060\u3055\u3044\u3002",
   "dynamicFlows.MultipleFileUploadSchema.maxItemsError": "{maxItems}\u500B\u4EE5\u4E0B\u306E\u30D5\u30A1\u30A4\u30EB\u3092\u30A2\u30C3\u30D7\u30ED\u30FC\u30C9\u3057\u3066\u304F\u3060\u3055\u3044\u3002",
   "dynamicFlows.MultipleFileUploadSchema.minItemsError": "{minItems}\u500B\u4EE5\u4E0A\u306E\u30D5\u30A1\u30A4\u30EB\u3092\u30A2\u30C3\u30D7\u30ED\u30FC\u30C9\u3057\u3066\u304F\u3060\u3055\u3044\u3002",
@@ -841,6 +841,7 @@ var getChildren = (node) => {
     case "list":
     case "loading-indicator":
     case "markdown":
+    case "media":
     case "input-multi-select":
     case "input-upload-multi":
     case "input-number":
@@ -854,6 +855,7 @@ var getChildren = (node) => {
     case "input-upload":
     case "external-confirmation":
     case "subflow":
+    case "upsell":
       return [];
   }
 };
@@ -1134,6 +1136,55 @@ var createSubflowDomainComponent = (subflowProps, onComponentUpdate) => {
   return subflowComponent;
 };
 
+// src/domain/features/prefetch/request-cache.ts
+var makeRequestCacheWithParent = (parent) => {
+  const map = /* @__PURE__ */ new Map();
+  const cache = {
+    get: (requestParams) => {
+      var _a;
+      const key = makeRequestCacheKey(requestParams);
+      const promise = (_a = map.get(key)) != null ? _a : parent == null ? void 0 : parent.get(requestParams);
+      map.delete(key);
+      return promise;
+    },
+    set: (requestParams, responsePromise) => {
+      return map.set(makeRequestCacheKey(requestParams), responsePromise);
+    }
+  };
+  return cache;
+};
+var makeRequestCache = (initialValues = []) => {
+  const cache = makeRequestCacheWithParent(void 0);
+  initialValues.forEach(([requestParams, responsePromise]) => {
+    cache.set(requestParams, responsePromise);
+  });
+  return cache;
+};
+var normaliseRequestCache = (cache) => {
+  if (cache === void 0) {
+    return makeRequestCache();
+  }
+  if (isRequestCacheInstance(cache)) {
+    return cache;
+  }
+  return makeRequestCache(cache);
+};
+var isRequestCacheInstance = (cache) => {
+  return !cache || !Array.isArray(cache);
+};
+var makeRequestCacheKey = (requestParams) => {
+  var _a, _b;
+  const [input, init] = requestParams;
+  const url = typeof input === "string" || input instanceof URL ? input.toString() : input.url;
+  const key = JSON.stringify({
+    url,
+    method: (_a = init == null ? void 0 : init.method) != null ? _a : "GET",
+    headers: (init == null ? void 0 : init.headers) ? Array.from(new Headers(init.headers).entries()) : [],
+    body: (_b = init == null ? void 0 : init.body) != null ? _b : null
+  });
+  return key;
+};
+
 // src/domain/components/ModalComponent.ts
 var createModalContentComponent = (modalProps, onComponentUpdate) => {
   const update = getInputUpdateFunction(onComponentUpdate);
@@ -1208,51 +1259,6 @@ var getActionByReference = ($ref, actions = []) => {
   return action;
 };
 
-// src/domain/mappers/utils/call-to-action-utils.ts
-var getDomainLayerCallToAction = (callToAction, mapperProps) => {
-  var _a;
-  if (!callToAction) {
-    return void 0;
-  }
-  const { step, onBehavior, registerSubmissionBehavior } = mapperProps;
-  const stepActions = (_a = step.actions) != null ? _a : [];
-  const { title = "", accessibilityDescription, action, behavior } = callToAction;
-  return getCallToAction(
-    { title, accessibilityDescription },
-    getDomainLayerBehavior({ action, behavior }, stepActions, registerSubmissionBehavior),
-    onBehavior
-  );
-};
-var getCallToAction = ({ title, accessibilityDescription }, behavior, onBehavior) => {
-  const onClick = () => {
-    void onBehavior(behavior);
-  };
-  switch (behavior.type) {
-    case "action":
-    case "modal":
-    case "copy":
-    case "dismiss": {
-      return {
-        type: behavior.type,
-        title: title != null ? title : "",
-        accessibilityDescription,
-        onClick
-      };
-    }
-    case "link": {
-      return {
-        type: "link",
-        title: title != null ? title : "",
-        href: behavior.url,
-        accessibilityDescription,
-        onClick
-      };
-    }
-    default:
-      return void 0;
-  }
-};
-
 // src/domain/mappers/utils/legacy-utils.ts
 var mapLegacyContext = (context) => {
   switch (context) {
@@ -1304,6 +1310,27 @@ var legacyActionTypeToControl = {
 };
 var mapLegacyActionTypeToControl = (type) => type && type in legacyActionTypeToControl ? legacyActionTypeToControl[type] : "secondary";
 
+// src/domain/mappers/utils/call-to-action-utils.ts
+function getDomainLayerCallToAction(cta, mapperProps) {
+  var _a, _b;
+  if (!cta) {
+    return void 0;
+  }
+  const { step, onBehavior, registerSubmissionBehavior } = mapperProps;
+  const stepActions = (_a = step.actions) != null ? _a : [];
+  const behavior = getDomainLayerBehavior(cta, stepActions, registerSubmissionBehavior);
+  return {
+    type: behavior.type,
+    title: (_b = cta.title) != null ? _b : "",
+    context: cta.context ? mapLegacyContext(cta.context) : void 0,
+    accessibilityDescription: cta.accessibilityDescription,
+    href: behavior.type === "link" ? behavior.url : void 0,
+    onClick: () => {
+      void onBehavior(behavior);
+    }
+  };
+}
+
 // src/domain/mappers/layout/alertLayoutToComponent.ts
 var alertLayoutToComponent = (uid, {
   control,
@@ -1852,6 +1879,24 @@ var markdownLayoutToComponent = (uid, {
   size: size != null ? size : "md"
 });
 
+// src/domain/components/MediaComponent.ts
+var createMediaComponent = (props) => __spreadValues({
+  type: "media",
+  kind: "layout"
+}, props);
+
+// src/domain/mappers/layout/mediaLayoutToComponent.ts
+var mediaLayoutToComponent = (uid, { analyticsId, align, control, margin, media, size, tags }) => createMediaComponent({
+  uid,
+  analyticsId,
+  align: mapLegacyAlign(align != null ? align : "center"),
+  control,
+  margin: margin != null ? margin : "md",
+  media,
+  size: size != null ? size : "md",
+  tags
+});
+
 // src/domain/components/ModalLayoutComponent.ts
 var createModalComponent = (modalProps) => __spreadProps(__spreadValues({
   type: "modal-layout",
@@ -1951,14 +1996,14 @@ var reviewLayoutToComponent = (uid, {
 }, mapperProps) => createReviewComponent({
   uid,
   analyticsId,
-  callToAction: getCallToAction2({ mapperProps, callToAction, action }),
+  callToAction: getCallToAction({ mapperProps, callToAction, action }),
   control: getOrientationControl({ control, orientation }),
   fields: fields.map((field) => mapReviewField(field, mapperProps)),
   margin: margin != null ? margin : "md",
   tags,
   title
 });
-var getCallToAction2 = ({
+var getCallToAction = ({
   callToAction,
   action,
   mapperProps
@@ -1996,7 +2041,7 @@ var mapReviewField = (field, mapperProps) => {
     help: (_a = field.help) == null ? void 0 : _a.markdown,
     inlineAlert: mapInlineAlert(field.inlineAlert),
     additionalInfo: mapAdditionalInfo(field.additionalInfo, mapperProps),
-    callToAction: getCallToAction2({
+    callToAction: getCallToAction({
       callToAction: field.callToAction,
       mapperProps
     }),
@@ -2043,7 +2088,7 @@ var debounce = (callback, waitMs) => {
 // src/domain/components/searchComponent/SearchComponent.ts
 var DEBOUNCE_TIME = 400;
 var createSearchComponent = (searchProps, performSearch, onBehavior, onComponentUpdate) => {
-  const { uid, analyticsId, control, emptyMessage, margin, tags, title } = searchProps;
+  const { uid, analyticsId, control, emptyMessage, hint, margin, tags, title } = searchProps;
   const update = getInputUpdateFunction(onComponentUpdate);
   let abortController = new AbortController();
   const search = (component2, query, searchConfig) => {
@@ -2079,6 +2124,7 @@ var createSearchComponent = (searchProps, performSearch, onBehavior, onComponent
     analyticsId,
     control,
     emptyMessage,
+    hint,
     margin,
     tags,
     title,
@@ -2165,7 +2211,7 @@ var isValidResponseBody = (body) => isObject(body) && "results" in body && isArr
 var hashRequest = (query, config) => JSON.stringify({ query, config });
 
 // src/domain/mappers/layout/searchLayoutToComponent.ts
-var searchLayoutToComponent = (uid, { analyticsId, control, emptyMessage, method, param, title, url, margin, tags }, mapperProps) => {
+var searchLayoutToComponent = (uid, { analyticsId, control, emptyMessage, hint, method, param, title, url, margin, tags }, mapperProps) => {
   const { httpClient, onBehavior, onComponentUpdate } = mapperProps;
   const search = getPerformSearchFunction(httpClient, { method, param, url });
   return createSearchComponent(
@@ -2174,6 +2220,7 @@ var searchLayoutToComponent = (uid, { analyticsId, control, emptyMessage, method
       analyticsId,
       control,
       emptyMessage: emptyMessage != null ? emptyMessage : "",
+      hint,
       margin: margin != null ? margin : "md",
       tags,
       title
@@ -2253,6 +2300,60 @@ var mapTabs = (tabs, uid, mapperProps, schemaComponents) => tabs.map(({ componen
   )
 }));
 
+// src/domain/components/UpsellComponent.ts
+var createUpsellComponent = (upsellProps, onComponentUpdate) => {
+  const update = getInputUpdateFunction(onComponentUpdate);
+  const _a = upsellProps, { onDismiss: propsOnDismiss } = _a, restProps = __objRest(_a, ["onDismiss"]);
+  const component = __spreadProps(__spreadValues({
+    type: "upsell",
+    kind: "layout"
+  }, restProps), {
+    visible: true,
+    onDismiss: propsOnDismiss ? () => {
+      update(component, (draft) => {
+        draft.visible = false;
+      });
+      propsOnDismiss();
+    } : void 0
+  });
+  return component;
+};
+
+// src/domain/mappers/layout/upsellLayoutToComponent.ts
+var upsellLayoutToComponent = (uid, {
+  analyticsId,
+  callToAction,
+  context,
+  control,
+  margin,
+  media,
+  onDismiss,
+  tags,
+  text
+}, mapperProps) => {
+  const { onComponentUpdate } = mapperProps;
+  return createUpsellComponent(
+    {
+      uid,
+      analyticsId,
+      callToAction: getDomainLayerCallToAction(callToAction, mapperProps),
+      context: context ? mapLegacyContext(context) : "neutral",
+      control,
+      margin: margin != null ? margin : "md",
+      media: getDomainLayerMedia({ media }),
+      tags,
+      text,
+      onDismiss: onDismiss ? () => {
+        const { url, method } = onDismiss;
+        const body = method === "GET" ? void 0 : JSON.stringify(onDismiss.body);
+        void mapperProps.httpClient(url, { method, body }).catch(() => {
+        });
+      } : void 0
+    },
+    onComponentUpdate
+  );
+};
+
 // src/domain/mappers/mapLayoutToComponent.ts
 var mapLayoutToComponent = (uid, layout, mapperProps, schemaComponents) => {
   switch (layout.type) {
@@ -2284,6 +2385,8 @@ var mapLayoutToComponent = (uid, layout, mapperProps, schemaComponents) => {
       return loadingIndicatorLayoutToComponent(uid, layout);
     case "markdown":
       return markdownLayoutToComponent(uid, layout);
+    case "media":
+      return mediaLayoutToComponent(uid, layout);
     case "modal":
       return modalLayoutToComponent(uid, layout, mapperProps, schemaComponents);
     case "paragraph":
@@ -2300,6 +2403,8 @@ var mapLayoutToComponent = (uid, layout, mapperProps, schemaComponents) => {
       return statusListLayoutToComponent(uid, layout, mapperProps);
     case "tabs":
       return tabsLayoutToComponent(uid, layout, mapperProps, schemaComponents);
+    case "upsell":
+      return upsellLayoutToComponent(uid, layout, mapperProps);
     default:
       throw new Error(`Invalid layout type in ${JSON.stringify(layout)}`);
   }
@@ -5407,6 +5512,7 @@ var mapStringSchemaSuggestions = (suggestions, logEvent) => {
 
 // src/domain/mappers/schema/stringSchemaToComponent/stringSchemaToDateInputComponent.ts
 var stringSchemaToDateInputComponent = (schemaMapperProps, mapperProps) => {
+  var _a;
   const { schema, localValue, model, required = false, onPersistAsync } = schemaMapperProps;
   const {
     autocompleteHint,
@@ -5422,7 +5528,7 @@ var stringSchemaToDateInputComponent = (schemaMapperProps, mapperProps) => {
     mapperProps
   );
   const validLocalValue = isString(localValue) ? localValue : null;
-  const validModel = isString(model) ? model : defaultValue != null ? defaultValue : null;
+  const validModel = (_a = getValidDate(model)) != null ? _a : getValidDate(defaultValue != null ? defaultValue : null);
   const value = onPersistAsync ? validLocalValue : validModel;
   return createDateInputComponent(
     __spreadProps(__spreadValues({}, mapCommonSchemaProps(schemaMapperProps)), {
@@ -5445,6 +5551,21 @@ var stringSchemaToDateInputComponent = (schemaMapperProps, mapperProps) => {
     onComponentUpdate
   );
 };
+var getValidDate = (model) => {
+  if (!isString(model)) {
+    return null;
+  }
+  if (/^\d{4}-\d{2}$/.test(model)) {
+    return model;
+  }
+  try {
+    const date = new Date(model);
+    const stringDate = date.toISOString();
+    return stringDate.split("T")[0];
+  } catch (e) {
+    return null;
+  }
+};
 
 // src/domain/mappers/schema/stringSchemaToComponent/stringSchemaToUploadInputComponent.ts
 var stringSchemaToUploadInputComponent = (schemaMapperProps, mapperProps) => {
@@ -6015,59 +6136,14 @@ var createRequestFromAction = (action, model) => {
   });
 };
 
-// src/domain/features/prefetch/request-cache.ts
-var makeRequestCacheWithParent = (parent) => {
-  const map = /* @__PURE__ */ new Map();
-  const cache = {
-    get: (requestParams) => {
-      var _a;
-      const key = makeKey(requestParams);
-      const promise = (_a = map.get(key)) != null ? _a : parent == null ? void 0 : parent.get(requestParams);
-      map.delete(key);
-      return promise;
-    },
-    set: (requestParams, responsePromise) => {
-      return map.set(makeKey(requestParams), responsePromise);
-    }
-  };
-  return cache;
-};
-var makeRequestCache = (initialValues = []) => {
-  const cache = makeRequestCacheWithParent(void 0);
-  initialValues.forEach(([requestParams, responsePromise]) => {
-    cache.set(requestParams, responsePromise);
-  });
-  return cache;
-};
-var normaliseRequestCache = (cache) => {
-  if (cache === void 0) {
-    return makeRequestCache();
-  }
-  if (isRequestCacheInstance(cache)) {
-    return cache;
-  }
-  return makeRequestCache(cache);
-};
-var isRequestCacheInstance = (cache) => {
-  return !cache || !Array.isArray(cache);
-};
-var makeKey = (requestParams) => {
-  var _a, _b;
-  const [input, init] = requestParams;
-  const url = typeof input === "string" || input instanceof URL ? input.toString() : input.url;
-  const key = JSON.stringify({
-    url,
-    method: (_a = init == null ? void 0 : init.method) != null ? _a : "GET",
-    headers: (init == null ? void 0 : init.headers) ? Array.from(new Headers(init.headers).entries()) : [],
-    body: (_b = init == null ? void 0 : init.body) != null ? _b : null
-  });
-  return key;
-};
-
 // src/domain/features/prefetch/getStepPrefetch.ts
 var getStepPrefetch = (httpClient, flowRequestCache, submissionBehaviors) => {
   const requestCache = makeRequestCacheWithParent(flowRequestCache);
+  const keys = /* @__PURE__ */ new Set();
   const start = (model) => {
+    if (keys.size > 0) {
+      return;
+    }
     submissionBehaviors.forEach((behavior) => {
       const request = behavior.type === "action" ? createRequestFromAction(behavior.action, model) : behavior.launchConfig.request;
       const requestParams = [
@@ -6079,8 +6155,13 @@ var getStepPrefetch = (httpClient, flowRequestCache, submissionBehaviors) => {
         }
       ];
       try {
+        const key = makeRequestCacheKey(requestParams);
+        if (keys.has(key)) {
+          return;
+        }
         const responsePromise = httpClient(...requestParams).catch(() => null);
         requestCache.set(requestParams, responsePromise);
+        keys.add(key);
       } catch (e) {
       }
     });
@@ -6825,7 +6906,11 @@ var createFlowController = (props) => {
       initState = "created";
       trackEvent("Initiated");
       rootComponent.setLoadingState("submitting");
-      void onAction(__spreadValues({ method: "GET" }, initialAction), null);
+      void onAction(__spreadValues({ method: "GET" }, initialAction), null).then(() => {
+        initState = "started";
+        rootComponent.start();
+      });
+      return;
     }
     if (initState === "created") {
       initState = "started";
@@ -7472,6 +7557,9 @@ var markdownComponentToProps = (control, rendererMapperProps) => __spreadValues(
   "size"
 )), rendererMapperProps);
 
+// src/renderers/mappers/mediaComponentToProps.ts
+var mediaComponentToProps = (component, rendererMapperProps) => __spreadValues(__spreadValues({}, pick(component, "uid", "analyticsId", "type", "align", "control", "margin", "media", "size", "tags")), rendererMapperProps);
+
 // src/renderers/mappers/modalComponentToProps.ts
 var modalComponentToProps = (component, rendererMapperProps) => {
   const { uid, analyticsId, open, tags, title, close } = component;
@@ -7817,7 +7905,19 @@ var rootComponentToProps = (rootComponent, rendererMapperProps) => {
 
 // src/renderers/mappers/searchComponentToProps.ts
 var searchComponentToProps = (component, rendererMapperProps) => {
-  const { uid, control, emptyMessage, error, isLoading, margin, query, results, title, tags } = component;
+  const {
+    uid,
+    control,
+    emptyMessage,
+    error,
+    hint,
+    isLoading,
+    margin,
+    query,
+    results,
+    title,
+    tags
+  } = component;
   const onChange = component.onChange.bind(component);
   const onSelect = component.onSelect.bind(component);
   const state = getSearchState({
@@ -7834,6 +7934,7 @@ var searchComponentToProps = (component, rendererMapperProps) => {
     type: "search",
     id: uid,
     control,
+    hint,
     isLoading,
     margin,
     query,
@@ -7978,6 +8079,23 @@ var uploadInputComponentToProps = (component, rendererMapperProps) => {
   });
 };
 
+// src/renderers/mappers/upsellComponentToProps.ts
+var upsellComponentToProps = (component, rendererMapperProps) => __spreadValues(__spreadProps(__spreadValues({}, pick(
+  component,
+  "uid",
+  "analyticsId",
+  "type",
+  "callToAction",
+  "context",
+  "control",
+  "margin",
+  "media",
+  "tags",
+  "text"
+)), {
+  onDismiss: component.onDismiss ? component.onDismiss.bind(component) : void 0
+}), rendererMapperProps);
+
 // src/renderers/mappers/subflowComponentToRendererProps.ts
 var subflowComponentToRendererProps = (component, rendererMapperProps) => {
   return __spreadValues(__spreadProps(__spreadValues({
@@ -8059,6 +8177,8 @@ var getComponentProps = (component, rendererMapperProps) => {
       return loadingIndicatorComponentToProps(component, rendererMapperProps);
     case "markdown":
       return markdownComponentToProps(component, rendererMapperProps);
+    case "media":
+      return mediaComponentToProps(component, rendererMapperProps);
     case "modal-layout":
       return modalLayoutComponentToProps(component, rendererMapperProps);
     case "modal":
@@ -8099,6 +8219,8 @@ var getComponentProps = (component, rendererMapperProps) => {
       return tupleComponentToProps(component, rendererMapperProps);
     case "upload":
       return uploadInputComponentToProps(component, rendererMapperProps);
+    case "upsell":
+      return upsellComponentToProps(component, rendererMapperProps);
     case "persist-async":
       return persistAsyncComponentToProps(component, rendererMapperProps);
     case "step":