@wise/dynamic-flow-client 0.0.0-experimental-20240319142919

package/build/legacy/step/layoutStep/utils/layout-utils.js

@@ -0,0 +1,212 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+export function convertStepToLayout(step, _a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.displayStepTitle, displayStepTitle = _c === void 0 ? true : _c;
+    // This condition is meant as a temporary hack until mobile platforms will be refactored to fully support the layout property
+    if (step.layout) {
+        return addMissingTitleAndDescriptionToStep(step, displayStepTitle);
+    }
+    switch (step.type) {
+        case 'final':
+            return convertFinalStepToDynamicLayout(step);
+        case 'decision':
+            return convertDecisionStepToDynamicLayout(step);
+        case 'external':
+            return convertExternalStepToDynamicLayout(step);
+        default:
+            return convertFormStepToDynamicLayout(step);
+    }
+}
+function convertCommonComponents(step) {
+    var layout = [];
+    if (step.title) {
+        layout.push(convertStepTitleToDynamicHeading(step.title));
+    }
+    if (step.image) {
+        var image = convertStepImageToDynamicImage(step.image);
+        layout.push(image);
+    }
+    if (step.description) {
+        layout.push(convertStepDescriptionToDynamicParagraph(step.description));
+    }
+    return layout;
+}
+function convertExternalStepToDynamicLayout(step) {
+    return __spreadArray(__spreadArray([], convertCommonComponents(step), true), [convertStepToExternalComponent(step)], false);
+}
+function convertStepToExternalComponent(step) {
+    return {
+        type: 'external',
+        requestUrl: step.requestUrl,
+        polling: step.polling,
+        responseHandlers: step.responseHandlers,
+        retryTitle: step.retryTitle
+    };
+}
+function convertFormStepToDynamicLayout(step) {
+    var layout = convertCommonComponents(step);
+    if (step.reviewFields) {
+        layout.push(convertStepReviewToDynamicReview(step.reviewFields));
+    }
+    if (step.schemas) {
+        layout.push.apply(layout, getSchemaLayout(step));
+    }
+    if (step.actions) {
+        var actions = step.actions.map(convertStepActionToDynamicAction);
+        layout.push(dynamicBox(actions, 'md'));
+    }
+    return layout;
+}
+function convertFinalStepToDynamicLayout(step) {
+    var layout = [];
+    if (step.details) {
+        if (step.details.image) {
+            var image = convertFinalStepImageToDynamicImage(step.details.image);
+            layout.push(image);
+        }
+        if (step.details.title) {
+            layout.push(convertStepTitleToDynamicHeading(step.details.title));
+        }
+        if (step.details.description) {
+            layout.push(convertStepDescriptionToDynamicParagraph(step.details.description));
+        }
+    }
+    if (step.actions) {
+        var actions = step.actions.map(function (action) {
+            return convertStepActionToDynamicAction(__assign(__assign({}, action), { type: action.type || 'primary' }));
+        });
+        layout.push(dynamicBox(actions, 'md'));
+    }
+    return layout;
+}
+function convertDecisionStepToDynamicLayout(step) {
+    var layout = convertCommonComponents(step);
+    if (step.options) {
+        layout.push(convertStepDecisionToDynamicDecision(step.options));
+    }
+    return layout;
+}
+function dynamicBox(components, size) {
+    return {
+        type: 'box',
+        width: size || 'md',
+        components: components
+    };
+}
+function convertStepTitleToDynamicHeading(title) {
+    return {
+        type: 'heading',
+        text: title,
+        size: 'lg',
+        margin: 'lg',
+        align: 'center'
+    };
+}
+function convertStepDescriptionToDynamicParagraph(description) {
+    return {
+        type: 'paragraph',
+        text: description,
+        align: 'center'
+    };
+}
+function convertStepSchemaToDynamicForm(schema) {
+    return { type: 'form', schema: schema };
+}
+function convertStepDecisionToDynamicDecision(options) {
+    return {
+        type: 'decision',
+        options: options.map(convertStepDecisionOption)
+    };
+}
+function convertStepDecisionOption(option) {
+    return {
+        title: option.title,
+        description: option.description,
+        action: {
+            title: option.title,
+            method: 'GET',
+            url: option.url,
+            disabled: option.disabled
+        }
+    };
+}
+function convertStepImageToDynamicImage(image) {
+    return {
+        type: 'image',
+        url: image.url,
+        text: image.text,
+        margin: image.margin || 'lg',
+        size: image.size || 'md'
+    };
+}
+function convertFinalStepImageToDynamicImage(image) {
+    return typeof image === 'string'
+        ? {
+            type: 'image',
+            url: image,
+            text: undefined,
+            margin: 'lg',
+            size: 'md'
+        }
+        : convertStepImageToDynamicImage(image);
+}
+export function convertStepActionToDynamicAction(action) {
+    var newAction = __assign(__assign({}, action), { title: action.title });
+    return {
+        type: 'button',
+        action: newAction
+    };
+}
+function convertStepReviewToDynamicReview(reviewFields) {
+    return {
+        type: 'review',
+        title: reviewFields.title,
+        fields: reviewFields.fields.map(convertReviewFieldToDefinition)
+    };
+}
+function convertReviewFieldToDefinition(reviewField) {
+    return {
+        label: reviewField.title,
+        value: reviewField.value
+    };
+}
+function getSchemaLayout(step) {
+    var layout = [];
+    if (step.schemas && step.schemas[0]) {
+        var schema = step.schemas[0];
+        var dynamicForm = convertStepSchemaToDynamicForm(schema);
+        if (isWideForm()) {
+            layout.push(dynamicForm);
+        }
+        else {
+            layout.push(dynamicBox([dynamicForm], 'md'));
+        }
+    }
+    return layout;
+}
+function isWideForm() {
+    // For the time being we won't support automatically widening forms
+    // Unlike it V2, there is no way to easily iterate and identify narrow fields
+    return false;
+}
+function addMissingTitleAndDescriptionToStep(step, displayStepTitle) {
+    return __spreadArray(__spreadArray(__spreadArray([], (displayStepTitle && step.title ? [convertStepTitleToDynamicHeading(step.title)] : []), true), (step.description ? [convertStepDescriptionToDynamicParagraph(step.description)] : []), true), (step.layout || []), true);
+}

package/build/main.css

@@ -0,0 +1,263 @@
+.tw-form-control textarea {
+  resize: vertical;
+}
+.camera-capture {
+  background: #000;
+  height: 100%;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 1030;
+}
+.camera-capture video {
+  display: block;
+  height: 100%;
+  left: 0;
+  object-fit: cover;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 0;
+}
+.camera-capture .bottom-bar {
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  left: 0;
+  position: absolute;
+  width: 100%;
+}
+.camera-capture .camera-capture-btn {
+  align-self: center;
+  background-color: transparent;
+  background-image: none;
+  border: 6px solid #f8f9fa;
+  border-radius: 50%;
+  cursor: pointer;
+  display: inline-block;
+  height: 76px;
+  position: relative;
+  touch-action: manipulation;
+  transition: all 0.15s ease-in-out;
+  user-select: none;
+  vertical-align: middle;
+  width: 76px;
+}
+.camera-capture .camera-capture-btn:hover {
+  border-color: #cbd3da;
+}
+.camera-capture .camera-capture-btn:hover .camera-capture-btn-inner {
+  background-color: #cbd3da;
+}
+.camera-capture .camera-capture-btn:active {
+  border-color: #9fadba;
+}
+.camera-capture .camera-capture-btn:active .camera-capture-btn-inner {
+  background-color: #9fadba;
+}
+.camera-capture .camera-capture-btn:focus,
+.camera-capture .camera-capture-btn:focus-visible {
+  outline: 0;
+}
+.camera-capture .camera-capture-btn .camera-capture-btn-inner {
+  background-color: #f8f9fa;
+  border-radius: 50%;
+  display: inline-block;
+  height: 60px;
+  margin: 2px;
+  transition: all 0.15s ease-in-out;
+  width: 60px;
+}
+.camera-capture svg {
+  display: block;
+  height: 100%;
+  left: 0;
+  object-fit: cover;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 0;
+}
+.camera-capture svg .camera-capture-text-and-image-container {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  justify-content: center;
+  overflow: hidden;
+  position: absolute;
+}
+.camera-capture svg .camera-capture-instructions,
+.camera-capture svg .camera-capture-title {
+  color: #fff;
+  display: block;
+  text-align: center;
+}
+.camera-capture svg .camera-capture-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: normal;
+}
+.camera-capture svg .camera-capture-img {
+  display: block;
+  filter: invert(100%);
+  height: 32px;
+  position: relative;
+  width: 32px;
+}
+.camera-capture svg foreignObject {
+  overflow: visible;
+}
+.camera-capture .review-image {
+  display: block;
+  height: 100%;
+  left: 0;
+  object-fit: cover;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 0;
+}
+.df-back-btn .tw-avatar__content {
+  cursor: pointer;
+  background-color: var(--color-background-neutral);
+}
+.df-back-btn:hover .tw-avatar__content {
+  background-color: var(--color-background-neutral-hover);
+}
+.df-back-btn:active .tw-avatar__content {
+  background-color: var(--color-background-neutral-active);
+}
+.orientation-lock-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background-color: var(--color-dark);
+  color: var(--color-white);
+  font-size: var(--font-size-16);
+  font-weight: var(--font-weight-semi-bold);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  padding: 24px;
+}
+@media screen and (orientation: landscape) and (height <= 767px) {
+  .orientation-lock-overlay {
+    display: flex;
+  }
+}
+.df-image {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.df-image img {
+  height: auto;
+  width: 100%;
+}
+/* narrow screens */
+.df-image.xs img {
+  width: 50px;
+}
+.df-image.sm img {
+  width: 100px;
+}
+.df-image.md img {
+  width: 200px;
+}
+.df-image.lg img {
+  width: 300px;
+}
+/* wide screens */
+@media (width >= 576px) {
+  .df-image.xs img {
+    width: 100px;
+  }
+
+  .df-image.sm img {
+    width: 200px;
+  }
+
+  .df-image.md img {
+    width: 300px;
+  }
+
+  .df-image.lg img {
+    width: 500px;
+  }
+
+  .df-image.xl img {
+    max-width: 600px;
+  }
+}
+/* We should move to CSS modules when we move this to the Wise layer */
+.df-box-renderer-border {
+  border: 1px solid var(--color-border-neutral);
+  border-radius: var(--radius-small);
+  padding: var(--size-16);
+}
+.df-box-renderer-fixed-width {
+  display: flex;
+  justify-content: center;
+}
+.df-box-renderer-width-xs,
+.df-box-renderer-width-sm,
+.df-box-renderer-width-md,
+.df-box-renderer-width-lg {
+  width: 100%;
+}
+@media screen and (width >= 768px) {
+  .df-box-renderer-width-xs {
+    width: 33.33%;
+  }
+
+  .df-box-renderer-width-sm {
+    width: 50%;
+  }
+
+  .df-box-renderer-width-md {
+    width: 66.66%;
+  }
+
+  .df-box-renderer-width-lg {
+    width: 83.33%;
+  }
+}
+@media screen and (width >= 990px) {
+  .df-box-renderer-width-xs {
+    width: 25%;
+  }
+
+  .df-box-renderer-width-sm {
+    width: 33.33%;
+  }
+
+  .df-box-renderer-width-md {
+    width: 50%;
+  }
+
+  .df-box-renderer-width-lg {
+    width: 66.66%;
+  }
+}
+.df-columns-renderer-container {
+  display: flex;
+  gap: var(--size-16);
+  flex-direction: column;
+}
+.df-columns-renderer-column,
+.df-columns-renderer-bias-start .df-columns-renderer-column:nth-child(2),
+.df-columns-renderer-bias-end .df-columns-renderer-column:nth-child(1) {
+  flex: 1;
+}
+.df-columns-renderer-bias-start .df-columns-renderer-column:nth-child(1),
+.df-columns-renderer-bias-end .df-columns-renderer-column:nth-child(2) {
+  flex: 2;
+}
+@media (width >= 768px) {
+  .df-columns-renderer-container {
+    flex-direction: row;
+  }
+}