@pushwoosh/smart-components-kit 1.0.89 → 1.1.0

package/DynamicContentPickerForm/DynamicContentEventPickerForm.js

@@ -1,63 +1,74 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FieldBox, NativeInput, Select } from '@pushwoosh/dumb-components';
 import { Vertical } from '@pushwoosh/kit-helpers';
+import { useLang } from './polyglot';
 export const DynamicContentEventPickerForm = ({
   dc,
   events,
   onChange
 }) => {
+  const lang = useLang();
   const currentEvent = events.find(tag => tag.name === dc.eventName) || {
     name: '',
     attributes: []
   };
-  return React.createElement(Vertical, {
-    "$gap": 16
-  }, React.createElement(Select, {
-    value: {
-      value: dc.eventName,
-      label: dc.eventName
-    },
-    onChange: option => {
-      onChange({
-        eventName: option.value,
-        attribute: '',
-        defaultValue: ''
-      });
-    },
-    options: events.map(event => ({
-      value: event.name,
-      label: event.name
-    })),
-    placeholder: "Select an event"
-  }), React.createElement(FieldBox, {
-    title: "Attribute"
-  }, React.createElement(Select, {
-    value: {
-      value: dc.attribute,
-      label: dc.attribute
-    },
-    onChange: option => {
-      onChange({
-        ...dc,
-        attribute: option.value
-      });
-    },
-    options: currentEvent.attributes.map(attr => ({
-      value: attr.name,
-      label: attr.name
-    })),
-    isDisabled: !currentEvent.name
-  })), React.createElement(FieldBox, {
-    title: "Fallback text",
-    isOptional: true
-  }, React.createElement(NativeInput, {
-    value: dc.defaultValue,
-    onChange: e => {
-      onChange({
-        ...dc,
-        defaultValue: e.target.value
-      });
-    },
-    disabled: !currentEvent.name
-  })));
+  return _jsxs(Vertical, {
+    "$gap": 16,
+    children: [_jsx(Select, {
+      value: {
+        value: dc.eventName,
+        label: dc.eventName
+      },
+      onChange: option => {
+        onChange({
+          eventName: option.value,
+          attribute: '',
+          defaultValue: ''
+        });
+      },
+      options: events.map(event => ({
+        value: event.name,
+        label: event.name
+      })),
+      placeholder: lang({
+        message: 'SMART.DYNAMIC_CONTENT_PICKER_FORM.EVENT.PLACEHOLDER'
+      })
+    }), _jsx(FieldBox, {
+      title: lang({
+        message: 'SMART.DYNAMIC_CONTENT_PICKER_FORM.FIELD.ATTRIBUTE'
+      }),
+      children: _jsx(Select, {
+        value: {
+          value: dc.attribute,
+          label: dc.attribute
+        },
+        onChange: option => {
+          onChange({
+            ...dc,
+            attribute: option.value
+          });
+        },
+        options: currentEvent.attributes.map(attr => ({
+          value: attr.name,
+          label: attr.name
+        })),
+        isDisabled: !currentEvent.name
+      })
+    }), _jsx(FieldBox, {
+      title: lang({
+        message: 'SMART.DYNAMIC_CONTENT_PICKER_FORM.FIELD.FALLBACK_TEXT'
+      }),
+      isOptional: true,
+      children: _jsx(NativeInput, {
+        value: dc.defaultValue,
+        onChange: e => {
+          onChange({
+            ...dc,
+            defaultValue: e.target.value
+          });
+        },
+        disabled: !currentEvent.name
+      })
+    })]
+  });
 };

package/DynamicContentPickerForm/DynamicContentTagPickerForm.js

@@ -1,63 +1,74 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FieldBox, NativeInput, Select } from '@pushwoosh/dumb-components';
 import { Vertical } from '@pushwoosh/kit-helpers';
+import { useLang } from './polyglot';
 export const DynamicContentTagPickerForm = ({
   dc,
   tags,
   onChange
 }) => {
+  const lang = useLang();
   const currentTag = tags.find(tag => tag.name === dc.tagName) || {
     name: '',
     modifiers: ['regular']
   };
-  return React.createElement(Vertical, {
-    "$gap": 16
-  }, React.createElement(Select, {
-    value: {
-      value: dc.tagName,
-      label: dc.tagName
-    },
-    onChange: option => {
-      onChange({
-        tagName: option.value,
-        modifier: currentTag.modifiers[0],
-        defaultValue: ''
-      });
-    },
-    options: tags.map(tag => ({
-      value: tag.name,
-      label: tag.name
-    })),
-    placeholder: "Select a tag"
-  }), React.createElement(FieldBox, {
-    title: "Modifier"
-  }, React.createElement(Select, {
-    value: {
-      value: dc.modifier,
-      label: dc.modifier
-    },
-    onChange: option => {
-      onChange({
-        ...dc,
-        modifier: option.value
-      });
-    },
-    options: currentTag.modifiers.map(modifier => ({
-      value: modifier,
-      label: modifier
-    })),
-    isDisabled: !currentTag.name
-  })), React.createElement(FieldBox, {
-    title: "Fallback text",
-    isOptional: true
-  }, React.createElement(NativeInput, {
-    value: dc.defaultValue,
-    onChange: e => {
-      onChange({
-        ...dc,
-        defaultValue: e.target.value
-      });
-    },
-    disabled: !currentTag.name
-  })));
+  return _jsxs(Vertical, {
+    "$gap": 16,
+    children: [_jsx(Select, {
+      value: {
+        value: dc.tagName,
+        label: dc.tagName
+      },
+      onChange: option => {
+        onChange({
+          tagName: option.value,
+          modifier: currentTag.modifiers[0],
+          defaultValue: ''
+        });
+      },
+      options: tags.map(tag => ({
+        value: tag.name,
+        label: tag.name
+      })),
+      placeholder: lang({
+        message: 'SMART.DYNAMIC_CONTENT_PICKER_FORM.TAG.PLACEHOLDER'
+      })
+    }), _jsx(FieldBox, {
+      title: lang({
+        message: 'SMART.DYNAMIC_CONTENT_PICKER_FORM.FIELD.MODIFIER'
+      }),
+      children: _jsx(Select, {
+        value: {
+          value: dc.modifier,
+          label: dc.modifier
+        },
+        onChange: option => {
+          onChange({
+            ...dc,
+            modifier: option.value
+          });
+        },
+        options: currentTag.modifiers.map(modifier => ({
+          value: modifier,
+          label: modifier
+        })),
+        isDisabled: !currentTag.name
+      })
+    }), _jsx(FieldBox, {
+      title: lang({
+        message: 'SMART.DYNAMIC_CONTENT_PICKER_FORM.FIELD.FALLBACK_TEXT'
+      }),
+      isOptional: true,
+      children: _jsx(NativeInput, {
+        value: dc.defaultValue,
+        onChange: e => {
+          onChange({
+            ...dc,
+            defaultValue: e.target.value
+          });
+        },
+        disabled: !currentTag.name
+      })
+    })]
+  });
 };

package/DynamicContentPickerForm/SimpleDynamicContentPickerFormSmart.js

@@ -1,7 +1,9 @@
-import React, { useEffect } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
 import { FieldBox, NativeInput, Select, Spinner } from '@pushwoosh/dumb-components';
 import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
 import { useDynamicContentTags } from './hooks';
+import { useLang } from './polyglot';
 import { SimpleTagPickerDiv } from './styled';
 const defaultDynamicContent = {
   tagName: '',
@@ -14,6 +16,7 @@ export const SimpleDynamicContentPickerFormSmart = ({
   update,
   children
 }) => {
+  const lang = useLang();
   const asyncResult = useDynamicContentTags();
   useEffect(() => {
     if (!asyncResult.loading) {
@@ -21,68 +24,80 @@ export const SimpleDynamicContentPickerFormSmart = ({
     }
   }, [asyncResult.loading, update]);
   if (asyncResult.loading) {
-    return React.createElement(SimpleTagPickerDiv, null, React.createElement(Horizontal, {
-      "$placeItems": "center",
-      "$padding": 36
-    }, React.createElement(Spinner, {
-      size: "medium"
-    })));
+    return _jsx(SimpleTagPickerDiv, {
+      children: _jsx(Horizontal, {
+        "$placeItems": "center",
+        "$padding": 36,
+        children: _jsx(Spinner, {
+          size: "medium"
+        })
+      })
+    });
   }
   const tags = asyncResult.value || [];
   const currentTag = tags.find(tag => tag.name === dc.tagName) || {
     name: '',
     modifiers: ['regular']
   };
-  return React.createElement(SimpleTagPickerDiv, null, React.createElement(FieldBox, {
-    title: "Tag"
-  }, React.createElement(Vertical, {
-    "$gap": 8
-  }, React.createElement(Select, {
-    width: "auto",
-    menuPlacement: "auto",
-    value: {
-      value: dc.tagName,
-      label: dc.tagName
-    },
-    onChange: option => {
-      onChange({
-        tagName: option.value,
-        modifier: currentTag.modifiers[0],
-        defaultValue: ''
-      });
-    },
-    options: tags.map(tag => ({
-      value: tag.name,
-      label: tag.name
-    }))
-  }), React.createElement(Select, {
-    width: "auto",
-    menuPlacement: "auto",
-    value: {
-      value: dc.modifier,
-      label: dc.modifier
-    },
-    onChange: option => {
-      onChange({
-        ...dc,
-        modifier: option.value
-      });
-    },
-    options: currentTag.modifiers.map(modifier => ({
-      value: modifier,
-      label: modifier
-    })),
-    isDisabled: !currentTag.name
-  }))), React.createElement(FieldBox, {
-    title: "Default Tag Value"
-  }, React.createElement(NativeInput, {
-    value: dc.defaultValue,
-    onChange: e => {
-      onChange({
-        ...dc,
-        defaultValue: e.target.value
-      });
-    },
-    disabled: !currentTag.name
-  })), children);
+  return _jsxs(SimpleTagPickerDiv, {
+    children: [_jsx(FieldBox, {
+      title: lang({
+        message: 'SMART.DYNAMIC_CONTENT_PICKER_FORM.FIELD.TAG'
+      }),
+      children: _jsxs(Vertical, {
+        "$gap": 8,
+        children: [_jsx(Select, {
+          width: "auto",
+          menuPlacement: "auto",
+          value: {
+            value: dc.tagName,
+            label: dc.tagName
+          },
+          onChange: option => {
+            onChange({
+              tagName: option.value,
+              modifier: currentTag.modifiers[0],
+              defaultValue: ''
+            });
+          },
+          options: tags.map(tag => ({
+            value: tag.name,
+            label: tag.name
+          }))
+        }), _jsx(Select, {
+          width: "auto",
+          menuPlacement: "auto",
+          value: {
+            value: dc.modifier,
+            label: dc.modifier
+          },
+          onChange: option => {
+            onChange({
+              ...dc,
+              modifier: option.value
+            });
+          },
+          options: currentTag.modifiers.map(modifier => ({
+            value: modifier,
+            label: modifier
+          })),
+          isDisabled: !currentTag.name
+        })]
+      })
+    }), _jsx(FieldBox, {
+      title: lang({
+        message: 'SMART.DYNAMIC_CONTENT_PICKER_FORM.FIELD.DEFAULT_TAG_VALUE'
+      }),
+      children: _jsx(NativeInput, {
+        value: dc.defaultValue,
+        onChange: e => {
+          onChange({
+            ...dc,
+            defaultValue: e.target.value
+          });
+        },
+        disabled: !currentTag.name
+      })
+    }), children]
+  });
 };

package/DynamicContentPickerForm/VariedDynamicContentPickerFormSmart.js

@@ -1,10 +1,12 @@
-import React, { useEffect, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
 import { Button, FieldBox, Select, Spinner } from '@pushwoosh/dumb-components';
 import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
 import { DynamicContentCustomPickerForm } from './DynamicContentCustomPickerForm';
 import { DynamicContentEventPickerForm } from './DynamicContentEventPickerForm';
 import { DynamicContentTagPickerForm } from './DynamicContentTagPickerForm';
 import { useVariedDynamicContentTags } from './hooks';
+import { useLang } from './polyglot';
 import { VariedTagPickerDiv } from './styled';
 import { createDefaultDynamicContent } from './utils';
 const defaultVariedDynamicContent = {
@@ -15,16 +17,6 @@ const defaultVariedDynamicContent = {
     defaultValue: ''
   }
 };
-const kindsOptions = [{
-  value: 'tag',
-  label: 'Tag'
-}, {
-  value: 'event',
-  label: 'Event'
-}, {
-  value: 'customText',
-  label: 'Custom Text'
-}];
 export const VariedDynamicContentPickerFormSmart = ({
   applicationCode,
   initialDc = defaultVariedDynamicContent,
@@ -33,79 +25,113 @@ export const VariedDynamicContentPickerFormSmart = ({
   update
 }) => {
   var _kindsOptions$find;
+  const lang = useLang();
   const [vdc, setVdc] = useState(initialDc);
   const asyncResult = useVariedDynamicContentTags(applicationCode);
+  const kindsOptions = useMemo(() => [{
+    value: 'tag',
+    label: lang({
+      message: 'SMART.DYNAMIC_CONTENT_PICKER_FORM.KIND.TAG'
+    })
+  }, {
+    value: 'event',
+    label: lang({
+      message: 'SMART.DYNAMIC_CONTENT_PICKER_FORM.KIND.EVENT'
+    })
+  }, {
+    value: 'customText',
+    label: lang({
+      message: 'SMART.DYNAMIC_CONTENT_PICKER_FORM.KIND.CUSTOM_TEXT'
+    })
+  }], [lang]);
   useEffect(() => {
     update();
   }, [asyncResult.loading, update]);
   if (asyncResult.loading) {
-    return React.createElement(VariedTagPickerDiv, null, React.createElement(Horizontal, {
-      "$placeItems": "center",
-      "$padding": 36
-    }, React.createElement(Spinner, {
-      size: "medium"
-    })));
+    return _jsx(VariedTagPickerDiv, {
+      children: _jsx(Horizontal, {
+        "$placeItems": "center",
+        "$padding": 36,
+        children: _jsx(Spinner, {
+          size: "medium"
+        })
+      })
+    });
   }
   const isValidDc = vdc.kind === 'tag' && vdc.dc.tagName !== '' && vdc.dc.modifier !== '' || vdc.kind === 'event' && vdc.dc.eventName !== '' && vdc.dc.attribute !== '' || vdc.kind === 'customText' && vdc.dc.text !== '';
-  return React.createElement(VariedTagPickerDiv, null, React.createElement(Vertical, {
-    "$gap": 8
-  }, React.createElement(FieldBox, {
-    title: "Variable Type"
-  }, React.createElement(Vertical, {
-    "$gap": 8
-  }, React.createElement(Select, {
-    width: "auto",
-    menuPlacement: "auto",
-    value: {
-      value: vdc.kind,
-      label: (_kindsOptions$find = kindsOptions.find(o => o.value === vdc.kind)) === null || _kindsOptions$find === void 0 ? void 0 : _kindsOptions$find.label
-    },
-    onChange: option => {
-      const newDc = createDefaultDynamicContent(option.value);
-      setVdc(newDc);
-      update();
-    },
-    options: kindsOptions
-  }))), vdc.kind === 'tag' && React.createElement(DynamicContentTagPickerForm, {
-    dc: vdc.dc,
-    tags: asyncResult.value[0],
-    onChange: newDc => {
-      setVdc({
-        ...vdc,
-        dc: newDc
-      });
-    }
-  }), vdc.kind === 'event' && React.createElement(DynamicContentEventPickerForm, {
-    dc: vdc.dc,
-    events: asyncResult.value[1],
-    onChange: newDc => {
-      setVdc({
-        ...vdc,
-        dc: newDc
-      });
-    }
-  }), vdc.kind === 'customText' && React.createElement(DynamicContentCustomPickerForm, {
-    dc: vdc.dc,
-    onChange: newDc => {
-      setVdc({
-        ...vdc,
-        dc: newDc
-      });
-    }
-  })), React.createElement(Horizontal, {
-    "$justifyContent": "end",
-    "$gap": 8
-  }, React.createElement(Button, {
-    color: "secondary",
-    size: "compact",
-    onClick: onClose
-  }, "Cancel"), React.createElement(Button, {
-    color: "primary",
-    size: "compact",
-    onClick: () => {
-      onChange(vdc);
-      onClose();
-    },
-    isDisabled: !isValidDc
-  }, "Apply")));
+  return _jsxs(VariedTagPickerDiv, {
+    children: [_jsxs(Vertical, {
+      "$gap": 8,
+      children: [_jsx(FieldBox, {
+        title: lang({
+          message: 'SMART.DYNAMIC_CONTENT_PICKER_FORM.FIELD.VARIABLE_TYPE'
+        }),
+        children: _jsx(Vertical, {
+          "$gap": 8,
+          children: _jsx(Select, {
+            width: "auto",
+            menuPlacement: "auto",
+            value: {
+              value: vdc.kind,
+              label: (_kindsOptions$find = kindsOptions.find(o => o.value === vdc.kind)) === null || _kindsOptions$find === void 0 ? void 0 : _kindsOptions$find.label
+            },
+            onChange: option => {
+              const newDc = createDefaultDynamicContent(option.value);
+              setVdc(newDc);
+              update();
+            },
+            options: kindsOptions
+          })
+        })
+      }), vdc.kind === 'tag' && _jsx(DynamicContentTagPickerForm, {
+        dc: vdc.dc,
+        tags: asyncResult.value[0],
+        onChange: newDc => {
+          setVdc({
+            ...vdc,
+            dc: newDc
+          });
+        }
+      }), vdc.kind === 'event' && _jsx(DynamicContentEventPickerForm, {
+        dc: vdc.dc,
+        events: asyncResult.value[1],
+        onChange: newDc => {
+          setVdc({
+            ...vdc,
+            dc: newDc
+          });
+        }
+      }), vdc.kind === 'customText' && _jsx(DynamicContentCustomPickerForm, {
+        dc: vdc.dc,
+        onChange: newDc => {
+          setVdc({
+            ...vdc,
+            dc: newDc
+          });
+        }
+      })]
+    }), _jsxs(Horizontal, {
+      "$justifyContent": "end",
+      "$gap": 8,
+      children: [_jsx(Button, {
+        color: "secondary",
+        size: "compact",
+        onClick: onClose,
+        children: lang({
+          message: 'SMART.DYNAMIC_CONTENT_PICKER_FORM.BUTTON.CANCEL'
+        })
+      }), _jsx(Button, {
+        color: "primary",
+        size: "compact",
+        onClick: () => {
+          onChange(vdc);
+          onClose();
+        },
+        isDisabled: !isValidDc,
+        children: lang({
+          message: 'SMART.DYNAMIC_CONTENT_PICKER_FORM.BUTTON.APPLY'
+        })
+      })]
+    })]
+  });
 };

package/DynamicContentPickerForm/polyglot/index.d.ts

@@ -0,0 +1,2 @@
+import { type DynamicContentPickerFormMessages } from './types';
+export declare const Lang: import("react").FC<import("@pushwoosh/dumb-components/polyglot").LangProps<DynamicContentPickerFormMessages>>, useLang: () => (props: import("@pushwoosh/dumb-components/polyglot").LangProps<DynamicContentPickerFormMessages>) => string;

package/DynamicContentPickerForm/polyglot/index.js

@@ -0,0 +1,10 @@
+import { createLang } from '@pushwoosh/dumb-components/polyglot';
+import { messages as en } from './messages_en';
+import { messages as ru } from './messages_ru';
+export const {
+  Lang,
+  useLang
+} = createLang({
+  en,
+  ru
+});

package/DynamicContentPickerForm/polyglot/messages_en.d.ts

@@ -0,0 +1,3 @@
+import type { LangMessages } from '@pushwoosh/dumb-components/polyglot';
+import { type DynamicContentPickerFormMessages } from './types';
+export declare const messages: LangMessages<DynamicContentPickerFormMessages>;

package/DynamicContentPickerForm/polyglot/messages_en.js

@@ -0,0 +1,16 @@
+export const messages = {
+  'SMART.DYNAMIC_CONTENT_PICKER_FORM.CUSTOM.PLACEHOLDER': 'Enter custom text',
+  'SMART.DYNAMIC_CONTENT_PICKER_FORM.EVENT.PLACEHOLDER': 'Select an event',
+  'SMART.DYNAMIC_CONTENT_PICKER_FORM.TAG.PLACEHOLDER': 'Select a tag',
+  'SMART.DYNAMIC_CONTENT_PICKER_FORM.FIELD.TAG': 'Tag',
+  'SMART.DYNAMIC_CONTENT_PICKER_FORM.FIELD.ATTRIBUTE': 'Attribute',
+  'SMART.DYNAMIC_CONTENT_PICKER_FORM.FIELD.MODIFIER': 'Modifier',
+  'SMART.DYNAMIC_CONTENT_PICKER_FORM.FIELD.FALLBACK_TEXT': 'Fallback text',
+  'SMART.DYNAMIC_CONTENT_PICKER_FORM.FIELD.DEFAULT_TAG_VALUE': 'Default Tag Value',
+  'SMART.DYNAMIC_CONTENT_PICKER_FORM.FIELD.VARIABLE_TYPE': 'Variable Type',
+  'SMART.DYNAMIC_CONTENT_PICKER_FORM.KIND.TAG': 'Tag',
+  'SMART.DYNAMIC_CONTENT_PICKER_FORM.KIND.EVENT': 'Event',
+  'SMART.DYNAMIC_CONTENT_PICKER_FORM.KIND.CUSTOM_TEXT': 'Custom Text',
+  'SMART.DYNAMIC_CONTENT_PICKER_FORM.BUTTON.CANCEL': 'Cancel',
+  'SMART.DYNAMIC_CONTENT_PICKER_FORM.BUTTON.APPLY': 'Apply'
+};