@corva/ui 0.34.0-rc.2 → 0.34.0-rc.3

package/components/HelpCenter/HelpCenterDialog/components/HelpContentList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HelpContentList.js","sources":["../../../../../src/components/HelpCenter/HelpCenterDialog/components/HelpContentList.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport { makeStyles } from '@material-ui/core';\n\nimport { LoadingIndicator } from '~/components';\nimport { helpContentShape } from '../../shapes';\nimport { HelpContentItem } from './HelpContentItem';\nimport { HelpCenterLink } from './HelpCenterLink';\nimport { EmptyView } from './EmptyView';\n\nconst useStyles = makeStyles(theme => ({\n  loader: {\n    height: 500,\n    display: 'flex',\n    alignItems: 'center',\n  },\n  helpContentsContainer: {\n    width: '100%',\n    display: 'flex',\n    flexWrap: 'wrap',\n    gap: 24,\n    marginBottom: 24,\n  },\n  footer: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    height: 32,\n    width: '100%',\n    fontSize: 14,\n    lineHeight: '22px',\n    color: theme.palette.primary.text7,\n    marginBottom: 12,\n  },\n}));\n\nconst EMPTY_VIEW_TEXTS = {\n  error: 'Oops! Something went wrong',\n  nothingFound: 'No help content was found',\n  noContent: 'There is no help content yet',\n};\n\nexport function HelpContentList({ error, helpContents, isLoading, onItemClick, search }) {\n  const styles = useStyles();\n\n  if (isLoading) return <LoadingIndicator fullscreen={false} className={styles.loader} />;\n\n  if (error) return <EmptyView title={EMPTY_VIEW_TEXTS.error} />;\n\n  if (helpContents.length === 0) {\n    return (\n      <EmptyView title={search ? EMPTY_VIEW_TEXTS.nothingFound : EMPTY_VIEW_TEXTS.noContent} />\n    );\n  }\n\n  return (\n    <>\n      <div className={styles.helpContentsContainer}>\n        {helpContents.map(helpContent => (\n          <HelpContentItem\n            helpContent={helpContent}\n            key={helpContent.id}\n            onClick={() => onItemClick(helpContent)}\n          />\n        ))}\n      </div>\n      <div className={styles.footer}>\n        Did nоt find an answer?&nbsp;<HelpCenterLink />\n      </div>\n    </>\n  );\n}\n\nHelpContentList.propTypes = {\n  isLoading: PropTypes.bool.isRequired,\n  error: PropTypes.shape({\n    message: PropTypes.string.isRequired,\n  }),\n  helpContents: PropTypes.arrayOf(helpContentShape).isRequired,\n  onItemClick: PropTypes.func.isRequired,\n  search: PropTypes.string,\n};\n\nHelpContentList.defaultProps = {\n  error: null,\n  search: null,\n};\n"],"names":["useStyles","makeStyles","theme","loader","height","display","alignItems","helpContentsContainer","width","flexWrap","gap","marginBottom","footer","justifyContent","fontSize","lineHeight","color","palette","primary","text7","EMPTY_VIEW_TEXTS","error","nothingFound","noContent","HelpContentList","helpContents","isLoading","onItemClick","search","styles","_jsx","length","_jsxs","map","helpContent","id","propTypes","PropTypes","bool","isRequired","shape","message","string","arrayOf","helpContentShape","func","defaultProps"],"mappings":"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"}

package/components/HelpCenter/HelpCenterDialog/components/HelpContentTimestamp.js

@@ -1 +1,37 @@
-import{makeStyles as t}from"@material-ui/core";import e from"moment";import r from"classnames";import m from"prop-types";import{helpContentShape as o}from"../../shapes/index.js";import{jsx as a}from"react/jsx-runtime";var p=t((function(t){return{timeStamp:{fontSize:12,lineHeight:"17px",color:t.palette.primary.text6,letterSpacing:"0.4px"}}}));function i(t){var m=t.helpContent,o=t.className,i=p(),n=e(m.updatedAt||m.createdAt).format("MM/DD/YY HH:mm");return a("div",{className:r(i.timeStamp,o),children:n})}i.propTypes={helpContent:o.isRequired,className:m.string},i.defaultProps={className:null};export{i as HelpContentTimestamp};
+import moment from 'moment';
+import { jsx } from 'react/jsx-runtime';
+import { makeStyles } from '@material-ui/core';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { helpContentShape } from '../../shapes/index.js';
+
+var useStyles = makeStyles(function (theme) {
+  return {
+    timeStamp: {
+      fontSize: 12,
+      lineHeight: '17px',
+      color: theme.palette.primary.text6,
+      letterSpacing: '0.4px'
+    }
+  };
+});
+function HelpContentTimestamp(_ref) {
+  var helpContent = _ref.helpContent,
+      className = _ref.className;
+  var styles = useStyles();
+  var timestamp = moment(helpContent.updatedAt || helpContent.createdAt).format('MM/DD/YY HH:mm');
+  return /*#__PURE__*/jsx("div", {
+    className: classNames(styles.timeStamp, className),
+    children: timestamp
+  });
+}
+HelpContentTimestamp.propTypes = {
+  helpContent: helpContentShape.isRequired,
+  className: PropTypes.string
+};
+HelpContentTimestamp.defaultProps = {
+  className: null
+};
+
+export { HelpContentTimestamp };
+//# sourceMappingURL=HelpContentTimestamp.js.map

package/components/HelpCenter/HelpCenterDialog/components/HelpContentTimestamp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HelpContentTimestamp.js","sources":["../../../../../src/components/HelpCenter/HelpCenterDialog/components/HelpContentTimestamp.js"],"sourcesContent":["import { makeStyles } from '@material-ui/core';\nimport moment from 'moment';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\n\nimport { helpContentShape } from '../../shapes';\n\nconst useStyles = makeStyles(theme => ({\n  timeStamp: {\n    fontSize: 12,\n    lineHeight: '17px',\n    color: theme.palette.primary.text6,\n    letterSpacing: '0.4px',\n  },\n}));\n\nexport function HelpContentTimestamp({ helpContent, className }) {\n  const styles = useStyles();\n\n  const timestamp = moment(helpContent.updatedAt || helpContent.createdAt).format('MM/DD/YY HH:mm');\n\n  return <div className={classNames(styles.timeStamp, className)}>{timestamp}</div>;\n}\n\nHelpContentTimestamp.propTypes = {\n  helpContent: helpContentShape.isRequired,\n  className: PropTypes.string,\n};\n\nHelpContentTimestamp.defaultProps = {\n  className: null,\n};\n"],"names":["useStyles","makeStyles","theme","timeStamp","fontSize","lineHeight","color","palette","primary","text6","letterSpacing","HelpContentTimestamp","helpContent","className","styles","timestamp","moment","updatedAt","createdAt","format","_jsx","classNames","propTypes","helpContentShape","isRequired","PropTypes","string","defaultProps"],"mappings":";;;;;;;AAOA,IAAMA,SAAS,GAAGC,UAAU,CAAC,UAAAC,KAAK;AAAA,SAAK;AACrCC,IAAAA,SAAS,EAAE;AACTC,MAAAA,QAAQ,EAAE,EADD;AAETC,MAAAA,UAAU,EAAE,MAFH;AAGTC,MAAAA,KAAK,EAAEJ,KAAK,CAACK,OAAN,CAAcC,OAAd,CAAsBC,KAHpB;AAITC,MAAAA,aAAa,EAAE;AAJN;AAD0B,GAAL;AAAA,CAAN,CAA5B;AASO,SAASC,oBAAT,OAA0D;AAAA,MAA1BC,WAA0B,QAA1BA,WAA0B;AAAA,MAAbC,SAAa,QAAbA,SAAa;AAC/D,MAAMC,MAAM,GAAGd,SAAS,EAAxB;AAEA,MAAMe,SAAS,GAAGC,MAAM,CAACJ,WAAW,CAACK,SAAZ,IAAyBL,WAAW,CAACM,SAAtC,CAAN,CAAuDC,MAAvD,CAA8D,gBAA9D,CAAlB;AAEA,sBAAOC;AAAK,IAAA,SAAS,EAAEC,UAAU,CAACP,MAAM,CAACX,SAAR,EAAmBU,SAAnB,CAA1B;AAAA,cAA0DE;AAA1D,IAAP;AACD;AAEDJ,oBAAoB,CAACW,SAArB,GAAiC;AAC/BV,EAAAA,WAAW,EAAEW,gBAAgB,CAACC,UADC;AAE/BX,EAAAA,SAAS,EAAEY,SAAS,CAACC;AAFU,CAAjC;AAKAf,oBAAoB,CAACgB,YAArB,GAAoC;AAClCd,EAAAA,SAAS,EAAE;AADuB,CAApC;;;;"}

package/components/HelpCenter/HelpCenterDialog/components/SearchInput.js

@@ -1 +1,91 @@
-import r from"@babel/runtime/helpers/slicedToArray";import{useState as e,useCallback as o}from"react";import{makeStyles as a,Paper as i,InputBase as t}from"@material-ui/core";import n from"@material-ui/icons/Search";import c from"@material-ui/icons/Close";import l from"prop-types";import s from"classnames";import{debounce as m}from"lodash";import{jsxs as p,jsx as u}from"react/jsx-runtime";var h=a((function(r){return{root:{display:"flex",alignItems:"center",height:30,paddingLeft:19,borderRadius:30,boxShadow:"none","&:focus-within":{boxShadow:"inset 0 0 0 2px ".concat(r.palette.primary.main)},width:358,backgroundColor:r.palette.background.b7},input:{flex:1,fontSize:14,fontWeight:200},searchIcon:{height:16,width:16,color:r.palette.primary.contrastText,marginRight:9},closeIcon:{height:16,width:16,margin:"0 10px",color:r.palette.primary.text6,cursor:"pointer"}}})),f=function(a){var l=a.onChange,f=a.initialValue,d=h(),g=e(f),x=r(g,2),b=x[0],y=x[1],v=o(m(l,500),[]);return p(i,{className:s(d.root),children:[u(n,{className:d.searchIcon}),u(t,{className:d.input,placeholder:"Search ...",value:b,inputProps:{"aria-label":"search"},onChange:function(r){var e=r.target;y(e.value),v(e.value)}}),b&&u(c,{className:d.closeIcon,onClick:function(){y(""),l("")}})]})};f.propTypes={onChange:l.func.isRequired,initialValue:l.string.isRequired};export{f as SearchInput};
+import { debounce } from 'lodash';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makeStyles, Paper, InputBase } from '@material-ui/core';
+import CloseIcon from '@material-ui/icons/Close';
+import { useState, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import SearchIcon from '@material-ui/icons/Search';
+
+var useStyles = makeStyles(function (theme) {
+  return {
+    root: {
+      display: 'flex',
+      alignItems: 'center',
+      height: 30,
+      paddingLeft: 19,
+      borderRadius: 30,
+      boxShadow: 'none',
+      '&:focus-within': {
+        boxShadow: "inset 0 0 0 2px ".concat(theme.palette.primary.main)
+      },
+      width: 358,
+      backgroundColor: theme.palette.background.b7
+    },
+    input: {
+      flex: 1,
+      fontSize: 14,
+      fontWeight: 200
+    },
+    searchIcon: {
+      height: 16,
+      width: 16,
+      color: theme.palette.primary.contrastText,
+      marginRight: 9
+    },
+    closeIcon: {
+      height: 16,
+      width: 16,
+      margin: '0 10px',
+      color: theme.palette.primary.text6,
+      cursor: 'pointer'
+    }
+  };
+});
+var SearchInput = function SearchInput(_ref) {
+  var onChange = _ref.onChange,
+      initialValue = _ref.initialValue;
+  var styles = useStyles();
+
+  var _useState = useState(initialValue),
+      _useState2 = _slicedToArray(_useState, 2),
+      inputValue = _useState2[0],
+      setInputValue = _useState2[1];
+
+  var handleChangeDebounced = useCallback(debounce(onChange, 500), []);
+
+  var handleInputChange = function handleInputChange(_ref2) {
+    var target = _ref2.target;
+    setInputValue(target.value);
+    handleChangeDebounced(target.value);
+  };
+
+  return /*#__PURE__*/jsxs(Paper, {
+    className: classNames(styles.root),
+    children: [/*#__PURE__*/jsx(SearchIcon, {
+      className: styles.searchIcon
+    }), /*#__PURE__*/jsx(InputBase, {
+      className: styles.input,
+      placeholder: "Search ...",
+      value: inputValue,
+      inputProps: {
+        'aria-label': 'search'
+      },
+      onChange: handleInputChange
+    }), inputValue && /*#__PURE__*/jsx(CloseIcon, {
+      className: styles.closeIcon,
+      onClick: function onClick() {
+        setInputValue('');
+        onChange('');
+      }
+    })]
+  });
+};
+SearchInput.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  initialValue: PropTypes.string.isRequired
+};
+
+export { SearchInput };
+//# sourceMappingURL=SearchInput.js.map

package/components/HelpCenter/HelpCenterDialog/components/SearchInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.js","sources":["../../../../../src/components/HelpCenter/HelpCenterDialog/components/SearchInput.js"],"sourcesContent":["import { useState, useCallback } from 'react';\nimport { Paper, InputBase, makeStyles } from '@material-ui/core';\nimport SearchIcon from '@material-ui/icons/Search';\nimport CloseIcon from '@material-ui/icons/Close';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { debounce } from 'lodash';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n    height: 30,\n    paddingLeft: 19,\n    borderRadius: 30,\n    boxShadow: 'none',\n    '&:focus-within': {\n      boxShadow: `inset 0 0 0 2px ${theme.palette.primary.main}`,\n    },\n    width: 358,\n    backgroundColor: theme.palette.background.b7,\n  },\n  input: {\n    flex: 1,\n    fontSize: 14,\n    fontWeight: 200,\n  },\n  searchIcon: {\n    height: 16,\n    width: 16,\n    color: theme.palette.primary.contrastText,\n    marginRight: 9,\n  },\n  closeIcon: {\n    height: 16,\n    width: 16,\n    margin: '0 10px',\n    color: theme.palette.primary.text6,\n    cursor: 'pointer',\n  },\n}));\n\nexport const SearchInput = ({ onChange, initialValue }) => {\n  const styles = useStyles();\n  const [inputValue, setInputValue] = useState(initialValue);\n\n  const handleChangeDebounced = useCallback(debounce(onChange, 500), []);\n\n  const handleInputChange = ({ target }) => {\n    setInputValue(target.value);\n\n    handleChangeDebounced(target.value);\n  };\n\n  return (\n    <Paper className={classNames(styles.root)}>\n      <SearchIcon className={styles.searchIcon} />\n      <InputBase\n        className={styles.input}\n        placeholder=\"Search ...\"\n        value={inputValue}\n        inputProps={{ 'aria-label': 'search' }}\n        onChange={handleInputChange}\n      />\n      {inputValue && (\n        <CloseIcon\n          className={styles.closeIcon}\n          onClick={() => {\n            setInputValue('');\n            onChange('');\n          }}\n        />\n      )}\n    </Paper>\n  );\n};\n\nSearchInput.propTypes = {\n  onChange: PropTypes.func.isRequired,\n  initialValue: PropTypes.string.isRequired,\n};\n"],"names":["useStyles","makeStyles","theme","root","display","alignItems","height","paddingLeft","borderRadius","boxShadow","palette","primary","main","width","backgroundColor","background","b7","input","flex","fontSize","fontWeight","searchIcon","color","contrastText","marginRight","closeIcon","margin","text6","cursor","SearchInput","onChange","initialValue","styles","useState","inputValue","setInputValue","handleChangeDebounced","useCallback","debounce","handleInputChange","target","value","_jsxs","classNames","_jsx","propTypes","PropTypes","func","isRequired","string"],"mappings":"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"}

package/components/HelpCenter/HelpCenterDialog/effects/useHelpContents.js

@@ -1 +1,91 @@
-import r from"@babel/runtime/helpers/asyncToGenerator";import e from"@babel/runtime/helpers/slicedToArray";import t from"@babel/runtime/regenerator";import{useState as n,useEffect as a}from"react";import{getAppHelpContent as o}from"../../../../clients/jsonApi/index.js";import"../../../../utils/index.js";import{jsonaDataFormatter as s}from"../../../../utils/jsonaDataFormatter.js";function i(i){var p,c=i.appId,u=n([]),l=e(u,2),m=l[0],f=l[1],d=n(!1),h=e(d,2),b=h[0],x=h[1],j=n(null),v=e(j,2),I=v[0],y=v[1],g=(p=r(t.mark((function r(e){var n,a,i,p;return t.wrap((function(r){for(;;)switch(r.prev=r.next){case 0:return n=e.appId,a=e.search,x(!0),y(null),r.prev=3,r.next=6,o(n,{search:a,status:"published"});case 6:i=r.sent,p=s.deserialize(i),f(p),r.next=14;break;case 11:r.prev=11,r.t0=r.catch(3),y(r.t0);case 14:x(!1);case 15:case"end":return r.stop()}}),r,null,[[3,11]])}))),function(r){return p.apply(this,arguments)});return a((function(){g({appId:c})}),[c]),{helpContents:m,isLoading:b,error:I,searchHelpContents:function(r){return g({appId:c,search:r})}}}export{i as useHelpContents};
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import { jsonaDataFormatter } from '../../../../utils/jsonaDataFormatter.js';
+import { getAppHelpContent } from '../../../../clients/jsonApi/index.js';
+import '../../../../utils/index.js';
+import { useState, useEffect } from 'react';
+
+function useHelpContents(_ref) {
+  var appId = _ref.appId;
+
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      helpContents = _useState2[0],
+      setHelpContents = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isLoading = _useState4[0],
+      setIsLoading = _useState4[1];
+
+  var _useState5 = useState(null),
+      _useState6 = _slicedToArray(_useState5, 2),
+      error = _useState6[0],
+      setError = _useState6[1];
+
+  var loadHelpContents = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref2) {
+      var appId, search, response, formattedResponse;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              appId = _ref2.appId, search = _ref2.search;
+              setIsLoading(true);
+              setError(null);
+              _context.prev = 3;
+              _context.next = 6;
+              return getAppHelpContent(appId, {
+                search: search,
+                status: 'published'
+              });
+
+            case 6:
+              response = _context.sent;
+              formattedResponse = jsonaDataFormatter.deserialize(response);
+              setHelpContents(formattedResponse);
+              _context.next = 14;
+              break;
+
+            case 11:
+              _context.prev = 11;
+              _context.t0 = _context["catch"](3);
+              setError(_context.t0);
+
+            case 14:
+              setIsLoading(false);
+
+            case 15:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[3, 11]]);
+    }));
+
+    return function loadHelpContents(_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+
+  useEffect(function () {
+    loadHelpContents({
+      appId: appId
+    });
+  }, [appId]);
+  return {
+    helpContents: helpContents,
+    isLoading: isLoading,
+    error: error,
+    searchHelpContents: function searchHelpContents(search) {
+      return loadHelpContents({
+        appId: appId,
+        search: search
+      });
+    }
+  };
+}
+
+export { useHelpContents };
+//# sourceMappingURL=useHelpContents.js.map

package/components/HelpCenter/HelpCenterDialog/effects/useHelpContents.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHelpContents.js","sources":["../../../../../src/components/HelpCenter/HelpCenterDialog/effects/useHelpContents.js"],"sourcesContent":["import { useState, useEffect } from 'react';\n\nimport * as jsonApi from '~/clients/jsonApi';\nimport { jsonaDataFormatter } from '~/utils';\n\nexport function useHelpContents({ appId }) {\n  const [helpContents, setHelpContents] = useState([]);\n  const [isLoading, setIsLoading] = useState(false);\n  const [error, setError] = useState(null);\n\n  const loadHelpContents = async ({ appId, search }) => {\n    setIsLoading(true);\n    setError(null);\n    try {\n      const response = await jsonApi.getAppHelpContent(appId, { search, status: 'published' });\n      const formattedResponse = jsonaDataFormatter.deserialize(response);\n      setHelpContents(formattedResponse);\n    } catch (error) {\n      setError(error);\n    }\n    setIsLoading(false);\n  };\n\n  useEffect(() => {\n    loadHelpContents({ appId });\n  }, [appId]);\n\n  return {\n    helpContents,\n    isLoading,\n    error,\n    searchHelpContents: search => loadHelpContents({ appId, search }),\n  };\n}\n"],"names":["useHelpContents","appId","useState","helpContents","setHelpContents","isLoading","setIsLoading","error","setError","loadHelpContents","search","jsonApi","status","response","formattedResponse","jsonaDataFormatter","deserialize","useEffect","searchHelpContents"],"mappings":";;;;;;;;AAKO,SAASA,eAAT,OAAoC;AAAA,MAATC,KAAS,QAATA,KAAS;;AAAA,kBACDC,QAAQ,CAAC,EAAD,CADP;AAAA;AAAA,MAClCC,YADkC;AAAA,MACpBC,eADoB;;AAAA,mBAEPF,QAAQ,CAAC,KAAD,CAFD;AAAA;AAAA,MAElCG,SAFkC;AAAA,MAEvBC,YAFuB;;AAAA,mBAGfJ,QAAQ,CAAC,IAAD,CAHO;AAAA;AAAA,MAGlCK,KAHkC;AAAA,MAG3BC,QAH2B;;AAKzC,MAAMC,gBAAgB;AAAA,yEAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAASR,cAAAA,KAAT,SAASA,KAAT,EAAgBS,MAAhB,SAAgBA,MAAhB;AACvBJ,cAAAA,YAAY,CAAC,IAAD,CAAZ;AACAE,cAAAA,QAAQ,CAAC,IAAD,CAAR;AAFuB;AAAA;AAAA,qBAIEG,iBAAA,CAA0BV,KAA1B,EAAiC;AAAES,gBAAAA,MAAM,EAANA,MAAF;AAAUE,gBAAAA,MAAM,EAAE;AAAlB,eAAjC,CAJF;;AAAA;AAIfC,cAAAA,QAJe;AAKfC,cAAAA,iBALe,GAKKC,kBAAkB,CAACC,WAAnB,CAA+BH,QAA/B,CALL;AAMrBT,cAAAA,eAAe,CAACU,iBAAD,CAAf;AANqB;AAAA;;AAAA;AAAA;AAAA;AAQrBN,cAAAA,QAAQ,aAAR;;AARqB;AAUvBF,cAAAA,YAAY,CAAC,KAAD,CAAZ;;AAVuB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAAH;;AAAA,oBAAhBG,gBAAgB;AAAA;AAAA;AAAA,KAAtB;;AAaAQ,EAAAA,SAAS,CAAC,YAAM;AACdR,IAAAA,gBAAgB,CAAC;AAAER,MAAAA,KAAK,EAALA;AAAF,KAAD,CAAhB;AACD,GAFQ,EAEN,CAACA,KAAD,CAFM,CAAT;AAIA,SAAO;AACLE,IAAAA,YAAY,EAAZA,YADK;AAELE,IAAAA,SAAS,EAATA,SAFK;AAGLE,IAAAA,KAAK,EAALA,KAHK;AAILW,IAAAA,kBAAkB,EAAE,4BAAAR,MAAM;AAAA,aAAID,gBAAgB,CAAC;AAAER,QAAAA,KAAK,EAALA,KAAF;AAASS,QAAAA,MAAM,EAANA;AAAT,OAAD,CAApB;AAAA;AAJrB,GAAP;AAMD;;;;"}

package/components/HelpCenter/ItemContent/ArticleItemContent.js

@@ -1 +1,25 @@
-import t from"../../SlateFormattedText/SlateFormattedText.js";import"../../SlateFormattedText/RenderElements.js";import"@babel/runtime/helpers/typeof";import"lodash";import"slate";import{HelpContentCaption as e}from"../HelpCenterDialog/components/HelpContentCaption.js";import{helpContentShape as o}from"../shapes/index.js";import{jsxs as r,Fragment as n,jsx as p}from"react/jsx-runtime";function m(o){var m=o.helpContent;return r(n,{children:[p(e,{helpContent:m}),p(t,{text:m.articleContent})]})}m.propTypes={helpContent:o.isRequired};export{m as ArticleItemContent};
+import 'lodash';
+import '@babel/runtime/helpers/typeof';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { helpContentShape } from '../shapes/index.js';
+import 'slate';
+import '../../SlateFormattedText/RenderElements.js';
+import SlateFormattedText from '../../SlateFormattedText/SlateFormattedText.js';
+import { HelpContentCaption } from '../HelpCenterDialog/components/HelpContentCaption.js';
+
+function ArticleItemContent(_ref) {
+  var helpContent = _ref.helpContent;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(HelpContentCaption, {
+      helpContent: helpContent
+    }), /*#__PURE__*/jsx(SlateFormattedText, {
+      text: helpContent.articleContent
+    })]
+  });
+}
+ArticleItemContent.propTypes = {
+  helpContent: helpContentShape.isRequired
+};
+
+export { ArticleItemContent };
+//# sourceMappingURL=ArticleItemContent.js.map

package/components/HelpCenter/ItemContent/ArticleItemContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleItemContent.js","sources":["../../../../src/components/HelpCenter/ItemContent/ArticleItemContent.js"],"sourcesContent":["import { SlateFormattedText } from '~components/SlateFormattedText';\n\nimport { HelpContentCaption } from '../HelpCenterDialog/components/HelpContentCaption';\nimport { helpContentShape } from '../shapes';\n\nexport function ArticleItemContent({ helpContent }) {\n  return (\n    <>\n      <HelpContentCaption helpContent={helpContent} />\n      <SlateFormattedText text={helpContent.articleContent} />\n    </>\n  );\n}\n\nArticleItemContent.propTypes = {\n  helpContent: helpContentShape.isRequired,\n};\n"],"names":["ArticleItemContent","helpContent","_jsxs","_jsx","articleContent","propTypes","helpContentShape","isRequired"],"mappings":";;;;;;;;;AAKO,SAASA,kBAAT,OAA6C;AAAA,MAAfC,WAAe,QAAfA,WAAe;AAClD,sBACEC;AAAA,4BACEC,IAAC,kBAAD;AAAoB,MAAA,WAAW,EAAEF;AAAjC,MADF,eAEEE,IAAC,kBAAD;AAAoB,MAAA,IAAI,EAAEF,WAAW,CAACG;AAAtC,MAFF;AAAA,IADF;AAMD;AAEDJ,kBAAkB,CAACK,SAAnB,GAA+B;AAC7BJ,EAAAA,WAAW,EAAEK,gBAAgB,CAACC;AADD,CAA/B;;;;"}

package/components/HelpCenter/ItemContent/ItemContent.js

@@ -1 +1,37 @@
-import t from"prop-types";import{Box as e}from"@material-ui/core";import{ATTACMENT_METADATA_TYPE as n}from"../../../constants/helpCenter.js";import{helpContentShape as r}from"../shapes/index.js";import{ArticleItemContent as o}from"./ArticleItemContent.js";import{VideoItemContent as i}from"./VideoItemContent.js";import{AttachmentList as m}from"../Attachments/AttachmentList.js";import{jsxs as p,jsx as a}from"react/jsx-runtime";var c=function(t){return t.filter((function(t){return t.type===n.file}))};function s(t){var n=t.helpContent,r=t.onAttachmentClick,s=n.articleContent?o:i;return p(e,{width:"982px",mb:3,children:[a(s,{helpContent:n}),a(m,{onAttachmentClick:r,attachments:c(n.attachmentMetadata)})]})}s.propTypes={helpContent:r.isRequired,onAttachmentClick:t.func.isRequired};export{s as ItemContent,c as getFileAttachments};
+import { ATTACMENT_METADATA_TYPE } from '../../../constants/helpCenter.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Box } from '@material-ui/core';
+import PropTypes from 'prop-types';
+import { helpContentShape } from '../shapes/index.js';
+import { ArticleItemContent } from './ArticleItemContent.js';
+import { VideoItemContent } from './VideoItemContent.js';
+import { AttachmentList } from '../Attachments/AttachmentList.js';
+
+var getFileAttachments = function getFileAttachments(attachmentMetadata) {
+  return attachmentMetadata.filter(function (_ref) {
+    var type = _ref.type;
+    return type === ATTACMENT_METADATA_TYPE.file;
+  });
+};
+function ItemContent(_ref2) {
+  var helpContent = _ref2.helpContent,
+      onAttachmentClick = _ref2.onAttachmentClick;
+  var ContentComponent = helpContent.articleContent ? ArticleItemContent : VideoItemContent;
+  return /*#__PURE__*/jsxs(Box, {
+    width: "982px",
+    mb: 3,
+    children: [/*#__PURE__*/jsx(ContentComponent, {
+      helpContent: helpContent
+    }), /*#__PURE__*/jsx(AttachmentList, {
+      onAttachmentClick: onAttachmentClick,
+      attachments: getFileAttachments(helpContent.attachmentMetadata)
+    })]
+  });
+}
+ItemContent.propTypes = {
+  helpContent: helpContentShape.isRequired,
+  onAttachmentClick: PropTypes.func.isRequired
+};
+
+export { ItemContent, getFileAttachments };
+//# sourceMappingURL=ItemContent.js.map

package/components/HelpCenter/ItemContent/ItemContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemContent.js","sources":["../../../../src/components/HelpCenter/ItemContent/ItemContent.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport { Box } from '@material-ui/core';\n\nimport { ATTACMENT_METADATA_TYPE } from '~/constants/helpCenter';\nimport { helpContentShape } from '../shapes';\n\nimport { ArticleItemContent } from './ArticleItemContent';\nimport { VideoItemContent } from './VideoItemContent';\nimport { AttachmentList } from '../Attachments/AttachmentList';\n\nexport const getFileAttachments = attachmentMetadata =>\n  attachmentMetadata.filter(({ type }) => type === ATTACMENT_METADATA_TYPE.file);\n\nexport function ItemContent({ helpContent, onAttachmentClick }) {\n  const ContentComponent = helpContent.articleContent ? ArticleItemContent : VideoItemContent;\n\n  return (\n    <Box width=\"982px\" mb={3}>\n      <ContentComponent helpContent={helpContent} />\n      <AttachmentList\n        onAttachmentClick={onAttachmentClick}\n        attachments={getFileAttachments(helpContent.attachmentMetadata)}\n      />\n    </Box>\n  );\n}\n\nItemContent.propTypes = {\n  helpContent: helpContentShape.isRequired,\n  onAttachmentClick: PropTypes.func.isRequired,\n};\n"],"names":["getFileAttachments","attachmentMetadata","filter","type","ATTACMENT_METADATA_TYPE","file","ItemContent","helpContent","onAttachmentClick","ContentComponent","articleContent","ArticleItemContent","VideoItemContent","_jsxs","_jsx","propTypes","helpContentShape","isRequired","PropTypes","func"],"mappings":";;;;;;;;;IAUaA,kBAAkB,GAAG,SAArBA,kBAAqB,CAAAC,kBAAkB;AAAA,SAClDA,kBAAkB,CAACC,MAAnB,CAA0B;AAAA,QAAGC,IAAH,QAAGA,IAAH;AAAA,WAAcA,IAAI,KAAKC,uBAAuB,CAACC,IAA/C;AAAA,GAA1B,CADkD;AAAA;AAG7C,SAASC,WAAT,QAAyD;AAAA,MAAlCC,WAAkC,SAAlCA,WAAkC;AAAA,MAArBC,iBAAqB,SAArBA,iBAAqB;AAC9D,MAAMC,gBAAgB,GAAGF,WAAW,CAACG,cAAZ,GAA6BC,kBAA7B,GAAkDC,gBAA3E;AAEA,sBACEC,KAAC,GAAD;AAAK,IAAA,KAAK,EAAC,OAAX;AAAmB,IAAA,EAAE,EAAE,CAAvB;AAAA,4BACEC,IAAC,gBAAD;AAAkB,MAAA,WAAW,EAAEP;AAA/B,MADF,eAEEO,IAAC,cAAD;AACE,MAAA,iBAAiB,EAAEN,iBADrB;AAEE,MAAA,WAAW,EAAER,kBAAkB,CAACO,WAAW,CAACN,kBAAb;AAFjC,MAFF;AAAA,IADF;AASD;AAEDK,WAAW,CAACS,SAAZ,GAAwB;AACtBR,EAAAA,WAAW,EAAES,gBAAgB,CAACC,UADR;AAEtBT,EAAAA,iBAAiB,EAAEU,SAAS,CAACC,IAAV,CAAeF;AAFZ,CAAxB;;;;"}

package/components/HelpCenter/ItemContent/VideoItemContent.js

@@ -1 +1,87 @@
-import{makeStyles as e}from"@material-ui/core";import{helpContentShape as t}from"../shapes/index.js";import{VIDEO_SOURCES as i}from"../../../constants/video.js";import{ATTACMENT_METADATA_TYPE as o}from"../../../constants/helpCenter.js";import{getVideoSourceAndIdByUrl as r}from"../../../utils/video.js";import{HelpContentCaption as n}from"../HelpCenterDialog/components/HelpContentCaption.js";import{jsxs as a,Fragment as d,jsx as l}from"react/jsx-runtime";var c=e((function(e){return{videoContainer:{width:"100%",minHeight:507,marginBottom:16},video:{width:"100%"},youtubeVideoContainer:{height:507},description:{width:"100%",color:e.palette.primary.contrastText,fontSize:16,lineHeight:"22px"}}})),s=function(e){var t,i;return null===(t=e.attachmentMetadata)||void 0===t||null===(i=t.find((function(e){return e.type===o.video})))||void 0===i?void 0:i.cdn_url};function m(e){var t=e.helpContent,o=c(),m=r(t.url),p=m.source,u=m.id,h=p===i.YOUTUBE;return a(d,{children:[a("div",{className:o.videoContainer,children:[h&&l("div",{className:o.youtubeVideoContainer,children:l("iframe",{width:"100%",height:"100%",src:"https://www.youtube.com/embed/".concat(u),title:t.title,frameBorder:0,allow:"picture-in-picture",allowFullScreen:!0})}),!h&&l("video",{controls:!0,preload:"metadata",className:o.video,children:l("source",{src:s(t)})})]}),l(n,{helpContent:t}),l("div",{className:o.description,children:t.description})]})}m.propTypes={helpContent:t.isRequired};export{m as VideoItemContent};
+import { ATTACMENT_METADATA_TYPE } from '../../../constants/helpCenter.js';
+import { VIDEO_SOURCES } from '../../../constants/video.js';
+import { getVideoSourceAndIdByUrl } from '../../../utils/video.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { makeStyles } from '@material-ui/core';
+import { helpContentShape } from '../shapes/index.js';
+import { HelpContentCaption } from '../HelpCenterDialog/components/HelpContentCaption.js';
+
+var useStyles = makeStyles(function (theme) {
+  return {
+    videoContainer: {
+      width: '100%',
+      minHeight: 507,
+      marginBottom: 16
+    },
+    video: {
+      width: '100%'
+    },
+    youtubeVideoContainer: {
+      height: 507
+    },
+    description: {
+      width: '100%',
+      color: theme.palette.primary.contrastText,
+      fontSize: 16,
+      lineHeight: '22px'
+    }
+  };
+});
+
+var getVideoUrl = function getVideoUrl(helpContent) {
+  var _helpContent$attachme, _helpContent$attachme2;
+
+  return (_helpContent$attachme = helpContent.attachmentMetadata) === null || _helpContent$attachme === void 0 ? void 0 : (_helpContent$attachme2 = _helpContent$attachme.find(function (_ref) {
+    var type = _ref.type;
+    return type === ATTACMENT_METADATA_TYPE.video;
+  })) === null || _helpContent$attachme2 === void 0 ? void 0 : _helpContent$attachme2.cdn_url;
+};
+
+function VideoItemContent(_ref2) {
+  var helpContent = _ref2.helpContent;
+  var styles = useStyles();
+
+  var _getVideoSourceAndIdB = getVideoSourceAndIdByUrl(helpContent.url),
+      source = _getVideoSourceAndIdB.source,
+      id = _getVideoSourceAndIdB.id;
+
+  var isYoutubeUrl = source === VIDEO_SOURCES.YOUTUBE;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsxs("div", {
+      className: styles.videoContainer,
+      children: [isYoutubeUrl && /*#__PURE__*/jsx("div", {
+        className: styles.youtubeVideoContainer,
+        children: /*#__PURE__*/jsx("iframe", {
+          width: "100%",
+          height: "100%",
+          src: "https://www.youtube.com/embed/".concat(id),
+          title: helpContent.title,
+          frameBorder: 0,
+          allow: "picture-in-picture",
+          allowFullScreen: true
+        })
+      }), !isYoutubeUrl &&
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/media-has-caption
+      jsx("video", {
+        controls: true,
+        preload: "metadata",
+        className: styles.video,
+        children: /*#__PURE__*/jsx("source", {
+          src: getVideoUrl(helpContent)
+        })
+      })]
+    }), /*#__PURE__*/jsx(HelpContentCaption, {
+      helpContent: helpContent
+    }), /*#__PURE__*/jsx("div", {
+      className: styles.description,
+      children: helpContent.description
+    })]
+  });
+}
+VideoItemContent.propTypes = {
+  helpContent: helpContentShape.isRequired
+};
+
+export { VideoItemContent };
+//# sourceMappingURL=VideoItemContent.js.map

package/components/HelpCenter/ItemContent/VideoItemContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoItemContent.js","sources":["../../../../src/components/HelpCenter/ItemContent/VideoItemContent.js"],"sourcesContent":["import { makeStyles } from '@material-ui/core';\n\nimport { helpContentShape } from '../shapes';\nimport { VIDEO_SOURCES } from '~/constants/video';\nimport { ATTACMENT_METADATA_TYPE } from '~/constants/helpCenter';\nimport { getVideoSourceAndIdByUrl } from '~/utils/video';\nimport { HelpContentCaption } from '../HelpCenterDialog/components/HelpContentCaption';\n\nconst useStyles = makeStyles(theme => ({\n  videoContainer: {\n    width: '100%',\n    minHeight: 507,\n    marginBottom: 16,\n  },\n  video: {\n    width: '100%',\n  },\n  youtubeVideoContainer: {\n    height: 507,\n  },\n  description: {\n    width: '100%',\n    color: theme.palette.primary.contrastText,\n    fontSize: 16,\n    lineHeight: '22px',\n  },\n}));\n\nconst getVideoUrl = helpContent =>\n  helpContent.attachmentMetadata?.find(({ type }) => type === ATTACMENT_METADATA_TYPE.video)\n    ?.cdn_url;\n\nexport function VideoItemContent({ helpContent }) {\n  const styles = useStyles();\n\n  const { source, id } = getVideoSourceAndIdByUrl(helpContent.url);\n  const isYoutubeUrl = source === VIDEO_SOURCES.YOUTUBE;\n\n  return (\n    <>\n      <div className={styles.videoContainer}>\n        {isYoutubeUrl && (\n          <div className={styles.youtubeVideoContainer}>\n            <iframe\n              width=\"100%\"\n              height=\"100%\"\n              src={`https://www.youtube.com/embed/${id}`}\n              title={helpContent.title}\n              frameBorder={0}\n              allow=\"picture-in-picture\"\n              allowFullScreen\n            />\n          </div>\n        )}\n        {!isYoutubeUrl && (\n          // eslint-disable-next-line jsx-a11y/media-has-caption\n          <video controls preload=\"metadata\" className={styles.video}>\n            <source src={getVideoUrl(helpContent)} />\n          </video>\n        )}\n      </div>\n\n      <HelpContentCaption helpContent={helpContent}/>\n\n      <div className={styles.description}>{helpContent.description}</div>\n    </>\n  );\n}\n\nVideoItemContent.propTypes = {\n  helpContent: helpContentShape.isRequired,\n};\n"],"names":["useStyles","makeStyles","theme","videoContainer","width","minHeight","marginBottom","video","youtubeVideoContainer","height","description","color","palette","primary","contrastText","fontSize","lineHeight","getVideoUrl","helpContent","attachmentMetadata","find","type","ATTACMENT_METADATA_TYPE","cdn_url","VideoItemContent","styles","getVideoSourceAndIdByUrl","url","source","id","isYoutubeUrl","VIDEO_SOURCES","YOUTUBE","_jsxs","_jsx","title","propTypes","helpContentShape","isRequired"],"mappings":";;;;;;;;AAQA,IAAMA,SAAS,GAAGC,UAAU,CAAC,UAAAC,KAAK;AAAA,SAAK;AACrCC,IAAAA,cAAc,EAAE;AACdC,MAAAA,KAAK,EAAE,MADO;AAEdC,MAAAA,SAAS,EAAE,GAFG;AAGdC,MAAAA,YAAY,EAAE;AAHA,KADqB;AAMrCC,IAAAA,KAAK,EAAE;AACLH,MAAAA,KAAK,EAAE;AADF,KAN8B;AASrCI,IAAAA,qBAAqB,EAAE;AACrBC,MAAAA,MAAM,EAAE;AADa,KATc;AAYrCC,IAAAA,WAAW,EAAE;AACXN,MAAAA,KAAK,EAAE,MADI;AAEXO,MAAAA,KAAK,EAAET,KAAK,CAACU,OAAN,CAAcC,OAAd,CAAsBC,YAFlB;AAGXC,MAAAA,QAAQ,EAAE,EAHC;AAIXC,MAAAA,UAAU,EAAE;AAJD;AAZwB,GAAL;AAAA,CAAN,CAA5B;;AAoBA,IAAMC,WAAW,GAAG,SAAdA,WAAc,CAAAC,WAAW;AAAA;;AAAA,kCAC7BA,WAAW,CAACC,kBADiB,oFAC7B,sBAAgCC,IAAhC,CAAqC;AAAA,QAAGC,IAAH,QAAGA,IAAH;AAAA,WAAcA,IAAI,KAAKC,uBAAuB,CAACf,KAA/C;AAAA,GAArC,CAD6B,2DAC7B,uBACIgB,OAFyB;AAAA,CAA/B;;AAIO,SAASC,gBAAT,QAA2C;AAAA,MAAfN,WAAe,SAAfA,WAAe;AAChD,MAAMO,MAAM,GAAGzB,SAAS,EAAxB;;AADgD,8BAGzB0B,wBAAwB,CAACR,WAAW,CAACS,GAAb,CAHC;AAAA,MAGxCC,MAHwC,yBAGxCA,MAHwC;AAAA,MAGhCC,EAHgC,yBAGhCA,EAHgC;;AAIhD,MAAMC,YAAY,GAAGF,MAAM,KAAKG,aAAa,CAACC,OAA9C;AAEA,sBACEC;AAAA,4BACEA;AAAK,MAAA,SAAS,EAAER,MAAM,CAACtB,cAAvB;AAAA,iBACG2B,YAAY,iBACXI;AAAK,QAAA,SAAS,EAAET,MAAM,CAACjB,qBAAvB;AAAA,+BACE0B;AACE,UAAA,KAAK,EAAC,MADR;AAEE,UAAA,MAAM,EAAC,MAFT;AAGE,UAAA,GAAG,0CAAmCL,EAAnC,CAHL;AAIE,UAAA,KAAK,EAAEX,WAAW,CAACiB,KAJrB;AAKE,UAAA,WAAW,EAAE,CALf;AAME,UAAA,KAAK,EAAC,oBANR;AAOE,UAAA,eAAe;AAPjB;AADF,QAFJ,EAcG,CAACL,YAAD;AAAA;AACC;AACA;AAAO,QAAA,QAAQ,MAAf;AAAgB,QAAA,OAAO,EAAC,UAAxB;AAAmC,QAAA,SAAS,EAAEL,MAAM,CAAClB,KAArD;AAAA,+BACE2B;AAAQ,UAAA,GAAG,EAAEjB,WAAW,CAACC,WAAD;AAAxB;AADF,QAhBJ;AAAA,MADF,eAuBEgB,IAAC,kBAAD;AAAoB,MAAA,WAAW,EAAEhB;AAAjC,MAvBF,eAyBEgB;AAAK,MAAA,SAAS,EAAET,MAAM,CAACf,WAAvB;AAAA,gBAAqCQ,WAAW,CAACR;AAAjD,MAzBF;AAAA,IADF;AA6BD;AAEDc,gBAAgB,CAACY,SAAjB,GAA6B;AAC3BlB,EAAAA,WAAW,EAAEmB,gBAAgB,CAACC;AADH,CAA7B;;;;"}