diff --git a/package.json b/package.json
index 287285a24841e3bd12a1d4e0ca9d69a4ff743783..4d74dd2564e009adab7030cd9637a5e6da22fb52 100644
--- a/package.json
+++ b/package.json
@@ -62,6 +62,7 @@
"d3": "^5.15.0",
"detect-browser": "^5.1.1",
"eslint-config-cozy-app": "4.2.0",
+ "file-saver": "^2.0.5",
"global": "^4.4.0",
"handlebars": "^4.7.7",
"handlebars-loader": "^1.7.1",
@@ -76,7 +77,8 @@
"react-redux": "^7.2.2",
"react-router-dom": "5.3.3",
"react-swipeable-views": "0.14.0",
- "redux-devtools-extension": "^2.13.8"
+ "redux-devtools-extension": "^2.13.8",
+ "xlsx": "^0.18.5"
},
"devDependencies": {
"@babel/preset-typescript": "^7.7.4",
@@ -84,6 +86,7 @@
"@types/classnames": "^2.2.10",
"@types/d3": "^5.7.2",
"@types/enzyme": "^3.10.8",
+ "@types/file-saver": "^2.0.5",
"@types/history": "^4.7.5",
"@types/jest": "^28.0.0",
"@types/lodash": "^4.14.149",
diff --git a/src/assets/icons/ico/download.svg b/src/assets/icons/ico/download.svg
new file mode 100644
index 0000000000000000000000000000000000000000..a2e8377d3d872781cec36c50a0db8695f5d4347c
--- /dev/null
+++ b/src/assets/icons/ico/download.svg
@@ -0,0 +1,5 @@
+<svg width="49" height="48" viewBox="0 0 49 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.5 24.5791L24.5 36.0002L37.5 24.5791" stroke="#E3B82A" stroke-width="6"/>
+<path d="M24.5 36V7.5" stroke="#E3B82A" stroke-width="6"/>
+<path d="M10.5 45L38.5 45" stroke="#E3B82A" stroke-width="3"/>
+</svg>
diff --git a/src/assets/icons/ico/export.svg b/src/assets/icons/ico/export.svg
new file mode 100644
index 0000000000000000000000000000000000000000..596e78e0a2698c0fd96b5e4bf78d457f73d47057
--- /dev/null
+++ b/src/assets/icons/ico/export.svg
@@ -0,0 +1,6 @@
+<svg width="40" height="38" viewBox="0 0 40 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M38.3692 18.5C38.3692 28.424 30.0181 36.5 19.6776 36.5C9.33703 36.5 0.985977 28.424 0.985977 18.5C0.985977 8.57601 9.33703 0.5 19.6776 0.5C30.0181 0.5 38.3692 8.57601 38.3692 18.5Z" stroke="white"/>
+<path d="M17.6589 26L17.6589 27.5L20.6589 27.5L20.6589 26L17.6589 26ZM20.6589 10C20.6589 9.17157 19.9873 8.5 19.1589 8.5C18.3304 8.5 17.6589 9.17157 17.6589 10L20.6589 10ZM20.6589 26L20.6589 10L17.6589 10L17.6589 26L20.6589 26Z" fill="white"/>
+<path d="M11.4346 26L11.4346 27.5L14.4346 27.5L14.4346 26L11.4346 26ZM14.4346 18C14.4346 17.1716 13.763 16.5 12.9346 16.5C12.1061 16.5 11.4346 17.1716 11.4346 18L14.4346 18ZM14.4346 26L14.4346 18L11.4346 18L11.4346 26L14.4346 26Z" fill="white"/>
+<path d="M23.8832 26L23.8832 27.5L26.8832 27.5L26.8832 26L23.8832 26ZM26.8832 14C26.8832 13.1716 26.2116 12.5 25.3832 12.5C24.5548 12.5 23.8832 13.1716 23.8832 14L26.8832 14ZM26.8832 26L26.8832 14L23.8832 14L23.8832 26L26.8832 26Z" fill="white"/>
+</svg>
diff --git a/src/assets/icons/ico/exportDone.svg b/src/assets/icons/ico/exportDone.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c32d4672690710b74414f435414696c1e83327ab
--- /dev/null
+++ b/src/assets/icons/ico/exportDone.svg
@@ -0,0 +1,3 @@
+<svg width="49" height="48" viewBox="0 0 49 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.5 26.4774L17.1633 37.1307L44.5 11" stroke="#E3B82A" stroke-width="6"/>
+</svg>
diff --git a/src/components/Export/__snapshots__/exportDoneModal.spec.tsx.snap b/src/components/Export/__snapshots__/exportDoneModal.spec.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..70ad61389e74a45d53df715e76902c98197a563e
--- /dev/null
+++ b/src/components/Export/__snapshots__/exportDoneModal.spec.tsx.snap
@@ -0,0 +1,1033 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`exportDoneModal component should be rendered correctly 1`] = `
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
+ }
+>
+ <ExportDoneModal
+ error={false}
+ handleCloseClick={[MockFunction]}
+ open={true}
+ >
+ <WithStyles(ForwardRef(Dialog))
+ aria-labelledby="accessibility-title"
+ classes={
+ Object {
+ "paper": "modal-paper",
+ "root": "modal-root",
+ }
+ }
+ onClose={[MockFunction]}
+ open={true}
+ >
+ <ForwardRef(Dialog)
+ aria-labelledby="accessibility-title"
+ classes={
+ Object {
+ "container": "MuiDialog-container",
+ "paper": "MuiDialog-paper modal-paper",
+ "paperFullScreen": "MuiDialog-paperFullScreen",
+ "paperFullWidth": "MuiDialog-paperFullWidth",
+ "paperScrollBody": "MuiDialog-paperScrollBody",
+ "paperScrollPaper": "MuiDialog-paperScrollPaper",
+ "paperWidthFalse": "MuiDialog-paperWidthFalse",
+ "paperWidthLg": "MuiDialog-paperWidthLg",
+ "paperWidthMd": "MuiDialog-paperWidthMd",
+ "paperWidthSm": "MuiDialog-paperWidthSm",
+ "paperWidthXl": "MuiDialog-paperWidthXl",
+ "paperWidthXs": "MuiDialog-paperWidthXs",
+ "root": "MuiDialog-root modal-root",
+ "scrollBody": "MuiDialog-scrollBody",
+ "scrollPaper": "MuiDialog-scrollPaper",
+ }
+ }
+ onClose={[MockFunction]}
+ open={true}
+ >
+ <ForwardRef(Modal)
+ BackdropComponent={
+ Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "Naked": Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "propTypes": Object {
+ "children": [Function],
+ "className": [Function],
+ "classes": [Function],
+ "invisible": [Function],
+ "open": [Function],
+ "transitionDuration": [Function],
+ },
+ "render": [Function],
+ },
+ "displayName": "WithStyles(ForwardRef(Backdrop))",
+ "options": Object {
+ "defaultTheme": Object {
+ "breakpoints": Object {
+ "between": [Function],
+ "down": [Function],
+ "keys": Array [
+ "xs",
+ "sm",
+ "md",
+ "lg",
+ "xl",
+ ],
+ "only": [Function],
+ "up": [Function],
+ "values": Object {
+ "lg": 1280,
+ "md": 960,
+ "sm": 600,
+ "xl": 1920,
+ "xs": 0,
+ },
+ "width": [Function],
+ },
+ "direction": "ltr",
+ "mixins": Object {
+ "gutters": [Function],
+ "toolbar": Object {
+ "@media (min-width:0px) and (orientation: landscape)": Object {
+ "minHeight": 48,
+ },
+ "@media (min-width:600px)": Object {
+ "minHeight": 64,
+ },
+ "minHeight": 56,
+ },
+ },
+ "overrides": Object {},
+ "palette": Object {
+ "action": Object {
+ "activatedOpacity": 0.12,
+ "active": "rgba(0, 0, 0, 0.54)",
+ "disabled": "rgba(0, 0, 0, 0.26)",
+ "disabledBackground": "rgba(0, 0, 0, 0.12)",
+ "disabledOpacity": 0.38,
+ "focus": "rgba(0, 0, 0, 0.12)",
+ "focusOpacity": 0.12,
+ "hover": "rgba(0, 0, 0, 0.04)",
+ "hoverOpacity": 0.04,
+ "selected": "rgba(0, 0, 0, 0.08)",
+ "selectedOpacity": 0.08,
+ },
+ "augmentColor": [Function],
+ "background": Object {
+ "default": "#fafafa",
+ "paper": "#fff",
+ },
+ "common": Object {
+ "black": "#000",
+ "white": "#fff",
+ },
+ "contrastThreshold": 3,
+ "divider": "rgba(0, 0, 0, 0.12)",
+ "error": Object {
+ "contrastText": "#fff",
+ "dark": "#d32f2f",
+ "light": "#e57373",
+ "main": "#f44336",
+ },
+ "getContrastText": [Function],
+ "grey": Object {
+ "100": "#f5f5f5",
+ "200": "#eeeeee",
+ "300": "#e0e0e0",
+ "400": "#bdbdbd",
+ "50": "#fafafa",
+ "500": "#9e9e9e",
+ "600": "#757575",
+ "700": "#616161",
+ "800": "#424242",
+ "900": "#212121",
+ "A100": "#d5d5d5",
+ "A200": "#aaaaaa",
+ "A400": "#303030",
+ "A700": "#616161",
+ },
+ "info": Object {
+ "contrastText": "#fff",
+ "dark": "#1976d2",
+ "light": "#64b5f6",
+ "main": "#2196f3",
+ },
+ "primary": Object {
+ "contrastText": "#fff",
+ "dark": "#303f9f",
+ "light": "#7986cb",
+ "main": "#3f51b5",
+ },
+ "secondary": Object {
+ "contrastText": "#fff",
+ "dark": "#c51162",
+ "light": "#ff4081",
+ "main": "#f50057",
+ },
+ "success": Object {
+ "contrastText": "rgba(0, 0, 0, 0.87)",
+ "dark": "#388e3c",
+ "light": "#81c784",
+ "main": "#4caf50",
+ },
+ "text": Object {
+ "disabled": "rgba(0, 0, 0, 0.38)",
+ "hint": "rgba(0, 0, 0, 0.38)",
+ "primary": "rgba(0, 0, 0, 0.87)",
+ "secondary": "rgba(0, 0, 0, 0.54)",
+ },
+ "tonalOffset": 0.2,
+ "type": "light",
+ "warning": Object {
+ "contrastText": "rgba(0, 0, 0, 0.87)",
+ "dark": "#f57c00",
+ "light": "#ffb74d",
+ "main": "#ff9800",
+ },
+ },
+ "props": Object {},
+ "shadows": Array [
+ "none",
+ "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
+ "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
+ "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
+ "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
+ "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
+ "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
+ "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
+ "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
+ "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
+ "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
+ "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
+ "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
+ "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
+ "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
+ "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
+ "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
+ "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
+ "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
+ "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
+ "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
+ "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
+ "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
+ "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
+ "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
+ ],
+ "shape": Object {
+ "borderRadius": 4,
+ },
+ "spacing": [Function],
+ "transitions": Object {
+ "create": [Function],
+ "duration": Object {
+ "complex": 375,
+ "enteringScreen": 225,
+ "leavingScreen": 195,
+ "short": 250,
+ "shorter": 200,
+ "shortest": 150,
+ "standard": 300,
+ },
+ "easing": Object {
+ "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
+ "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
+ "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
+ "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
+ },
+ "getAutoHeightDuration": [Function],
+ },
+ "typography": Object {
+ "body1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00938em",
+ "lineHeight": 1.5,
+ },
+ "body2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.01071em",
+ "lineHeight": 1.43,
+ },
+ "button": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.02857em",
+ "lineHeight": 1.75,
+ "textTransform": "uppercase",
+ },
+ "caption": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.75rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.03333em",
+ "lineHeight": 1.66,
+ },
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": 14,
+ "fontWeightBold": 700,
+ "fontWeightLight": 300,
+ "fontWeightMedium": 500,
+ "fontWeightRegular": 400,
+ "h1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "6rem",
+ "fontWeight": 300,
+ "letterSpacing": "-0.01562em",
+ "lineHeight": 1.167,
+ },
+ "h2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "3.75rem",
+ "fontWeight": 300,
+ "letterSpacing": "-0.00833em",
+ "lineHeight": 1.2,
+ },
+ "h3": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "3rem",
+ "fontWeight": 400,
+ "letterSpacing": "0em",
+ "lineHeight": 1.167,
+ },
+ "h4": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "2.125rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00735em",
+ "lineHeight": 1.235,
+ },
+ "h5": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1.5rem",
+ "fontWeight": 400,
+ "letterSpacing": "0em",
+ "lineHeight": 1.334,
+ },
+ "h6": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1.25rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.0075em",
+ "lineHeight": 1.6,
+ },
+ "htmlFontSize": 16,
+ "overline": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.75rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.08333em",
+ "lineHeight": 2.66,
+ "textTransform": "uppercase",
+ },
+ "pxToRem": [Function],
+ "round": [Function],
+ "subtitle1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00938em",
+ "lineHeight": 1.75,
+ },
+ "subtitle2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.00714em",
+ "lineHeight": 1.57,
+ },
+ },
+ "zIndex": Object {
+ "appBar": 1100,
+ "drawer": 1200,
+ "mobileStepper": 1000,
+ "modal": 1300,
+ "snackbar": 1400,
+ "speedDial": 1050,
+ "tooltip": 1500,
+ },
+ },
+ "name": "MuiBackdrop",
+ },
+ "propTypes": Object {
+ "classes": [Function],
+ "innerRef": [Function],
+ },
+ "render": [Function],
+ "useStyles": [Function],
+ }
+ }
+ BackdropProps={
+ Object {
+ "transitionDuration": Object {
+ "enter": 225,
+ "exit": 195,
+ },
+ }
+ }
+ className="MuiDialog-root modal-root"
+ closeAfterTransition={true}
+ disableEscapeKeyDown={false}
+ onClose={[MockFunction]}
+ open={true}
+ >
+ <ForwardRef(Portal)
+ disablePortal={false}
+ >
+ <Portal
+ containerInfo={
+ <body
+ style="padding-right: 0px; overflow: hidden;"
+ >
+ <div
+ class="MuiDialog-root modal-root"
+ role="presentation"
+ style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
+ >
+ <div
+ aria-hidden="true"
+ class="MuiBackdrop-root"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ />
+ <div
+ data-test="sentinelStart"
+ tabindex="0"
+ />
+ <div
+ class="MuiDialog-container MuiDialog-scrollPaper"
+ role="none presentation"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ tabindex="-1"
+ >
+ <div
+ aria-labelledby="accessibility-title"
+ class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
+ >
+ <div
+ id="accessibility-title"
+ >
+ export.modal_done.accessibility_title
+ </div>
+ <div
+ class="modal-done-root"
+ >
+ <div>
+ <button
+ aria-label="export.button_close"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
+ >
+ <svg
+ class="styles__icon___23x3R"
+ height="18"
+ width="18"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ <div
+ class="content"
+ >
+ <div
+ class="icon-main"
+ >
+ <svg
+ class="styles__icon___23x3R"
+ height="44"
+ width="44"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </div>
+ <div
+ class="text-16-bold text text1"
+ >
+ export.modal_done.text1
+ </div>
+ <div
+ class="text-16-normal text"
+ >
+ export.modal_done.text2
+ </div>
+ <button
+ aria-label="export.modal_done.button_close"
+ class="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
+ tabindex="0"
+ type="submit"
+ >
+ <span
+ class="MuiButton-label text-16-bold"
+ >
+ export.modal_done.button_close
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div
+ data-test="sentinelEnd"
+ tabindex="0"
+ />
+ </div>
+ </body>
+ }
+ >
+ <div
+ className="MuiDialog-root modal-root"
+ onKeyDown={[Function]}
+ role="presentation"
+ style={
+ Object {
+ "bottom": 0,
+ "left": 0,
+ "position": "fixed",
+ "right": 0,
+ "top": 0,
+ "zIndex": 1300,
+ }
+ }
+ >
+ <WithStyles(ForwardRef(Backdrop))
+ onClick={[Function]}
+ open={true}
+ transitionDuration={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ >
+ <ForwardRef(Backdrop)
+ classes={
+ Object {
+ "invisible": "MuiBackdrop-invisible",
+ "root": "MuiBackdrop-root",
+ }
+ }
+ onClick={[Function]}
+ open={true}
+ transitionDuration={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ >
+ <ForwardRef(Fade)
+ in={true}
+ onClick={[Function]}
+ timeout={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ >
+ <Transition
+ appear={true}
+ enter={true}
+ exit={true}
+ in={true}
+ mountOnEnter={false}
+ onClick={[Function]}
+ onEnter={[Function]}
+ onEntered={[Function]}
+ onEntering={[Function]}
+ onExit={[Function]}
+ onExited={[Function]}
+ onExiting={[Function]}
+ timeout={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ unmountOnExit={false}
+ >
+ <div
+ aria-hidden={true}
+ className="MuiBackdrop-root"
+ onClick={[Function]}
+ style={
+ Object {
+ "opacity": 1,
+ "visibility": undefined,
+ }
+ }
+ />
+ </Transition>
+ </ForwardRef(Fade)>
+ </ForwardRef(Backdrop)>
+ </WithStyles(ForwardRef(Backdrop))>
+ <Unstable_TrapFocus
+ disableAutoFocus={false}
+ disableEnforceFocus={false}
+ disableRestoreFocus={false}
+ getDoc={[Function]}
+ isEnabled={[Function]}
+ open={true}
+ >
+ <div
+ data-test="sentinelStart"
+ tabIndex={0}
+ />
+ <ForwardRef(Fade)
+ appear={true}
+ in={true}
+ onEnter={[Function]}
+ onExited={[Function]}
+ role="none presentation"
+ tabIndex="-1"
+ timeout={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ >
+ <Transition
+ appear={true}
+ enter={true}
+ exit={true}
+ in={true}
+ mountOnEnter={false}
+ onEnter={[Function]}
+ onEntered={[Function]}
+ onEntering={[Function]}
+ onExit={[Function]}
+ onExited={[Function]}
+ onExiting={[Function]}
+ role="none presentation"
+ tabIndex="-1"
+ timeout={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ unmountOnExit={false}
+ >
+ <div
+ className="MuiDialog-container MuiDialog-scrollPaper"
+ onMouseDown={[Function]}
+ onMouseUp={[Function]}
+ role="none presentation"
+ style={
+ Object {
+ "opacity": 1,
+ "visibility": undefined,
+ }
+ }
+ tabIndex="-1"
+ >
+ <WithStyles(ForwardRef(Paper))
+ aria-labelledby="accessibility-title"
+ className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
+ elevation={24}
+ role="dialog"
+ >
+ <ForwardRef(Paper)
+ aria-labelledby="accessibility-title"
+ className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
+ classes={
+ Object {
+ "elevation0": "MuiPaper-elevation0",
+ "elevation1": "MuiPaper-elevation1",
+ "elevation10": "MuiPaper-elevation10",
+ "elevation11": "MuiPaper-elevation11",
+ "elevation12": "MuiPaper-elevation12",
+ "elevation13": "MuiPaper-elevation13",
+ "elevation14": "MuiPaper-elevation14",
+ "elevation15": "MuiPaper-elevation15",
+ "elevation16": "MuiPaper-elevation16",
+ "elevation17": "MuiPaper-elevation17",
+ "elevation18": "MuiPaper-elevation18",
+ "elevation19": "MuiPaper-elevation19",
+ "elevation2": "MuiPaper-elevation2",
+ "elevation20": "MuiPaper-elevation20",
+ "elevation21": "MuiPaper-elevation21",
+ "elevation22": "MuiPaper-elevation22",
+ "elevation23": "MuiPaper-elevation23",
+ "elevation24": "MuiPaper-elevation24",
+ "elevation3": "MuiPaper-elevation3",
+ "elevation4": "MuiPaper-elevation4",
+ "elevation5": "MuiPaper-elevation5",
+ "elevation6": "MuiPaper-elevation6",
+ "elevation7": "MuiPaper-elevation7",
+ "elevation8": "MuiPaper-elevation8",
+ "elevation9": "MuiPaper-elevation9",
+ "outlined": "MuiPaper-outlined",
+ "root": "MuiPaper-root",
+ "rounded": "MuiPaper-rounded",
+ }
+ }
+ elevation={24}
+ role="dialog"
+ >
+ <div
+ aria-labelledby="accessibility-title"
+ className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
+ >
+ <div
+ id="accessibility-title"
+ >
+ export.modal_done.accessibility_title
+ </div>
+ <div
+ className="modal-done-root"
+ >
+ <div
+ onClick={[MockFunction]}
+ >
+ <WithStyles(ForwardRef(IconButton))
+ aria-label="export.button_close"
+ className="modal-paper-close-button"
+ onClick={[MockFunction]}
+ >
+ <ForwardRef(IconButton)
+ aria-label="export.button_close"
+ className="modal-paper-close-button"
+ classes={
+ Object {
+ "colorInherit": "MuiIconButton-colorInherit",
+ "colorPrimary": "MuiIconButton-colorPrimary",
+ "colorSecondary": "MuiIconButton-colorSecondary",
+ "disabled": "Mui-disabled",
+ "edgeEnd": "MuiIconButton-edgeEnd",
+ "edgeStart": "MuiIconButton-edgeStart",
+ "label": "MuiIconButton-label",
+ "root": "MuiIconButton-root",
+ "sizeSmall": "MuiIconButton-sizeSmall",
+ }
+ }
+ onClick={[MockFunction]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-label="export.button_close"
+ centerRipple={true}
+ className="MuiIconButton-root modal-paper-close-button"
+ disabled={false}
+ focusRipple={true}
+ onClick={[MockFunction]}
+ >
+ <ForwardRef(ButtonBase)
+ aria-label="export.button_close"
+ centerRipple={true}
+ className="MuiIconButton-root modal-paper-close-button"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ disabled={false}
+ focusRipple={true}
+ onClick={[MockFunction]}
+ >
+ <button
+ aria-label="export.button_close"
+ className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+ disabled={false}
+ onBlur={[Function]}
+ onClick={[MockFunction]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
+ tabIndex={0}
+ type="button"
+ >
+ <span
+ className="MuiIconButton-label"
+ >
+ <Icon
+ icon="test-file-stub"
+ size={18}
+ spin={false}
+ >
+ <Component
+ className="styles__icon___23x3R"
+ height={18}
+ style={Object {}}
+ width={18}
+ >
+ <svg
+ className="styles__icon___23x3R"
+ height={18}
+ style={Object {}}
+ width={18}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </span>
+ <WithStyles(memo)
+ center={true}
+ >
+ <ForwardRef(TouchRipple)
+ center={true}
+ classes={
+ Object {
+ "child": "MuiTouchRipple-child",
+ "childLeaving": "MuiTouchRipple-childLeaving",
+ "childPulsate": "MuiTouchRipple-childPulsate",
+ "ripple": "MuiTouchRipple-ripple",
+ "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+ "rippleVisible": "MuiTouchRipple-rippleVisible",
+ "root": "MuiTouchRipple-root",
+ }
+ }
+ >
+ <span
+ className="MuiTouchRipple-root"
+ >
+ <TransitionGroup
+ childFactory={[Function]}
+ component={null}
+ exit={true}
+ />
+ </span>
+ </ForwardRef(TouchRipple)>
+ </WithStyles(memo)>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(IconButton)>
+ </WithStyles(ForwardRef(IconButton))>
+ </div>
+ <div
+ className="content"
+ >
+ <div
+ className="icon-main"
+ >
+ <Icon
+ icon="test-file-stub"
+ size={44}
+ spin={false}
+ >
+ <Component
+ className="styles__icon___23x3R"
+ height={44}
+ style={Object {}}
+ width={44}
+ >
+ <svg
+ className="styles__icon___23x3R"
+ height={44}
+ style={Object {}}
+ width={44}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </div>
+ <div
+ className="text-16-bold text text1"
+ >
+ export.modal_done.text1
+ </div>
+ <div
+ className="text-16-normal text"
+ >
+ export.modal_done.text2
+ </div>
+ <WithStyles(ForwardRef(Button))
+ aria-label="export.modal_done.button_close"
+ classes={
+ Object {
+ "label": "text-16-bold",
+ "root": "btn-highlight",
+ }
+ }
+ onClick={[MockFunction]}
+ type="submit"
+ >
+ <ForwardRef(Button)
+ aria-label="export.modal_done.button_close"
+ classes={
+ Object {
+ "colorInherit": "MuiButton-colorInherit",
+ "contained": "MuiButton-contained",
+ "containedPrimary": "MuiButton-containedPrimary",
+ "containedSecondary": "MuiButton-containedSecondary",
+ "containedSizeLarge": "MuiButton-containedSizeLarge",
+ "containedSizeSmall": "MuiButton-containedSizeSmall",
+ "disableElevation": "MuiButton-disableElevation",
+ "disabled": "Mui-disabled",
+ "endIcon": "MuiButton-endIcon",
+ "focusVisible": "Mui-focusVisible",
+ "fullWidth": "MuiButton-fullWidth",
+ "iconSizeLarge": "MuiButton-iconSizeLarge",
+ "iconSizeMedium": "MuiButton-iconSizeMedium",
+ "iconSizeSmall": "MuiButton-iconSizeSmall",
+ "label": "MuiButton-label text-16-bold",
+ "outlined": "MuiButton-outlined",
+ "outlinedPrimary": "MuiButton-outlinedPrimary",
+ "outlinedSecondary": "MuiButton-outlinedSecondary",
+ "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
+ "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
+ "root": "MuiButton-root btn-highlight",
+ "sizeLarge": "MuiButton-sizeLarge",
+ "sizeSmall": "MuiButton-sizeSmall",
+ "startIcon": "MuiButton-startIcon",
+ "text": "MuiButton-text",
+ "textPrimary": "MuiButton-textPrimary",
+ "textSecondary": "MuiButton-textSecondary",
+ "textSizeLarge": "MuiButton-textSizeLarge",
+ "textSizeSmall": "MuiButton-textSizeSmall",
+ }
+ }
+ onClick={[MockFunction]}
+ type="submit"
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-label="export.modal_done.button_close"
+ className="MuiButton-root btn-highlight MuiButton-text"
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[MockFunction]}
+ type="submit"
+ >
+ <ForwardRef(ButtonBase)
+ aria-label="export.modal_done.button_close"
+ className="MuiButton-root btn-highlight MuiButton-text"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[MockFunction]}
+ type="submit"
+ >
+ <button
+ aria-label="export.modal_done.button_close"
+ className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
+ disabled={false}
+ onBlur={[Function]}
+ onClick={[MockFunction]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
+ tabIndex={0}
+ type="submit"
+ >
+ <span
+ className="MuiButton-label text-16-bold"
+ >
+ export.modal_done.button_close
+ </span>
+ <WithStyles(memo)
+ center={false}
+ >
+ <ForwardRef(TouchRipple)
+ center={false}
+ classes={
+ Object {
+ "child": "MuiTouchRipple-child",
+ "childLeaving": "MuiTouchRipple-childLeaving",
+ "childPulsate": "MuiTouchRipple-childPulsate",
+ "ripple": "MuiTouchRipple-ripple",
+ "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+ "rippleVisible": "MuiTouchRipple-rippleVisible",
+ "root": "MuiTouchRipple-root",
+ }
+ }
+ >
+ <span
+ className="MuiTouchRipple-root"
+ >
+ <TransitionGroup
+ childFactory={[Function]}
+ component={null}
+ exit={true}
+ />
+ </span>
+ </ForwardRef(TouchRipple)>
+ </WithStyles(memo)>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(Button)>
+ </WithStyles(ForwardRef(Button))>
+ </div>
+ </div>
+ </div>
+ </ForwardRef(Paper)>
+ </WithStyles(ForwardRef(Paper))>
+ </div>
+ </Transition>
+ </ForwardRef(Fade)>
+ <div
+ data-test="sentinelEnd"
+ tabIndex={0}
+ />
+ </Unstable_TrapFocus>
+ </div>
+ </Portal>
+ </ForwardRef(Portal)>
+ </ForwardRef(Modal)>
+ </ForwardRef(Dialog)>
+ </WithStyles(ForwardRef(Dialog))>
+ </ExportDoneModal>
+</Provider>
+`;
diff --git a/src/components/Export/__snapshots__/exportLoadingModal.spec.tsx.snap b/src/components/Export/__snapshots__/exportLoadingModal.spec.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..5b1167923e73347c5600caa96a685ddd7cfaa6c5
--- /dev/null
+++ b/src/components/Export/__snapshots__/exportLoadingModal.spec.tsx.snap
@@ -0,0 +1,5191 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ExportLoadingModal component should be rendered correctly 1`] = `
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
+ }
+>
+ <ExportLoadingModal
+ handleCloseClick={[MockFunction]}
+ handleDone={[MockFunction]}
+ open={true}
+ selectedFluids={
+ Array [
+ 0,
+ 1,
+ 2,
+ ]
+ }
+ >
+ <WithStyles(ForwardRef(Dialog))
+ aria-labelledby="accessibility-title"
+ classes={
+ Object {
+ "paper": "modal-paper",
+ "root": "modal-root",
+ }
+ }
+ onClose={[Function]}
+ open={true}
+ >
+ <ForwardRef(Dialog)
+ aria-labelledby="accessibility-title"
+ classes={
+ Object {
+ "container": "MuiDialog-container",
+ "paper": "MuiDialog-paper modal-paper",
+ "paperFullScreen": "MuiDialog-paperFullScreen",
+ "paperFullWidth": "MuiDialog-paperFullWidth",
+ "paperScrollBody": "MuiDialog-paperScrollBody",
+ "paperScrollPaper": "MuiDialog-paperScrollPaper",
+ "paperWidthFalse": "MuiDialog-paperWidthFalse",
+ "paperWidthLg": "MuiDialog-paperWidthLg",
+ "paperWidthMd": "MuiDialog-paperWidthMd",
+ "paperWidthSm": "MuiDialog-paperWidthSm",
+ "paperWidthXl": "MuiDialog-paperWidthXl",
+ "paperWidthXs": "MuiDialog-paperWidthXs",
+ "root": "MuiDialog-root modal-root",
+ "scrollBody": "MuiDialog-scrollBody",
+ "scrollPaper": "MuiDialog-scrollPaper",
+ }
+ }
+ onClose={[Function]}
+ open={true}
+ >
+ <ForwardRef(Modal)
+ BackdropComponent={
+ Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "Naked": Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "propTypes": Object {
+ "children": [Function],
+ "className": [Function],
+ "classes": [Function],
+ "invisible": [Function],
+ "open": [Function],
+ "transitionDuration": [Function],
+ },
+ "render": [Function],
+ },
+ "displayName": "WithStyles(ForwardRef(Backdrop))",
+ "options": Object {
+ "defaultTheme": Object {
+ "breakpoints": Object {
+ "between": [Function],
+ "down": [Function],
+ "keys": Array [
+ "xs",
+ "sm",
+ "md",
+ "lg",
+ "xl",
+ ],
+ "only": [Function],
+ "up": [Function],
+ "values": Object {
+ "lg": 1280,
+ "md": 960,
+ "sm": 600,
+ "xl": 1920,
+ "xs": 0,
+ },
+ "width": [Function],
+ },
+ "direction": "ltr",
+ "mixins": Object {
+ "gutters": [Function],
+ "toolbar": Object {
+ "@media (min-width:0px) and (orientation: landscape)": Object {
+ "minHeight": 48,
+ },
+ "@media (min-width:600px)": Object {
+ "minHeight": 64,
+ },
+ "minHeight": 56,
+ },
+ },
+ "overrides": Object {},
+ "palette": Object {
+ "action": Object {
+ "activatedOpacity": 0.12,
+ "active": "rgba(0, 0, 0, 0.54)",
+ "disabled": "rgba(0, 0, 0, 0.26)",
+ "disabledBackground": "rgba(0, 0, 0, 0.12)",
+ "disabledOpacity": 0.38,
+ "focus": "rgba(0, 0, 0, 0.12)",
+ "focusOpacity": 0.12,
+ "hover": "rgba(0, 0, 0, 0.04)",
+ "hoverOpacity": 0.04,
+ "selected": "rgba(0, 0, 0, 0.08)",
+ "selectedOpacity": 0.08,
+ },
+ "augmentColor": [Function],
+ "background": Object {
+ "default": "#fafafa",
+ "paper": "#fff",
+ },
+ "common": Object {
+ "black": "#000",
+ "white": "#fff",
+ },
+ "contrastThreshold": 3,
+ "divider": "rgba(0, 0, 0, 0.12)",
+ "error": Object {
+ "contrastText": "#fff",
+ "dark": "#d32f2f",
+ "light": "#e57373",
+ "main": "#f44336",
+ },
+ "getContrastText": [Function],
+ "grey": Object {
+ "100": "#f5f5f5",
+ "200": "#eeeeee",
+ "300": "#e0e0e0",
+ "400": "#bdbdbd",
+ "50": "#fafafa",
+ "500": "#9e9e9e",
+ "600": "#757575",
+ "700": "#616161",
+ "800": "#424242",
+ "900": "#212121",
+ "A100": "#d5d5d5",
+ "A200": "#aaaaaa",
+ "A400": "#303030",
+ "A700": "#616161",
+ },
+ "info": Object {
+ "contrastText": "#fff",
+ "dark": "#1976d2",
+ "light": "#64b5f6",
+ "main": "#2196f3",
+ },
+ "primary": Object {
+ "contrastText": "#fff",
+ "dark": "#303f9f",
+ "light": "#7986cb",
+ "main": "#3f51b5",
+ },
+ "secondary": Object {
+ "contrastText": "#fff",
+ "dark": "#c51162",
+ "light": "#ff4081",
+ "main": "#f50057",
+ },
+ "success": Object {
+ "contrastText": "rgba(0, 0, 0, 0.87)",
+ "dark": "#388e3c",
+ "light": "#81c784",
+ "main": "#4caf50",
+ },
+ "text": Object {
+ "disabled": "rgba(0, 0, 0, 0.38)",
+ "hint": "rgba(0, 0, 0, 0.38)",
+ "primary": "rgba(0, 0, 0, 0.87)",
+ "secondary": "rgba(0, 0, 0, 0.54)",
+ },
+ "tonalOffset": 0.2,
+ "type": "light",
+ "warning": Object {
+ "contrastText": "rgba(0, 0, 0, 0.87)",
+ "dark": "#f57c00",
+ "light": "#ffb74d",
+ "main": "#ff9800",
+ },
+ },
+ "props": Object {},
+ "shadows": Array [
+ "none",
+ "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
+ "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
+ "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
+ "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
+ "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
+ "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
+ "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
+ "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
+ "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
+ "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
+ "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
+ "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
+ "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
+ "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
+ "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
+ "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
+ "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
+ "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
+ "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
+ "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
+ "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
+ "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
+ "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
+ "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
+ ],
+ "shape": Object {
+ "borderRadius": 4,
+ },
+ "spacing": [Function],
+ "transitions": Object {
+ "create": [Function],
+ "duration": Object {
+ "complex": 375,
+ "enteringScreen": 225,
+ "leavingScreen": 195,
+ "short": 250,
+ "shorter": 200,
+ "shortest": 150,
+ "standard": 300,
+ },
+ "easing": Object {
+ "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
+ "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
+ "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
+ "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
+ },
+ "getAutoHeightDuration": [Function],
+ },
+ "typography": Object {
+ "body1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00938em",
+ "lineHeight": 1.5,
+ },
+ "body2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.01071em",
+ "lineHeight": 1.43,
+ },
+ "button": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.02857em",
+ "lineHeight": 1.75,
+ "textTransform": "uppercase",
+ },
+ "caption": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.75rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.03333em",
+ "lineHeight": 1.66,
+ },
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": 14,
+ "fontWeightBold": 700,
+ "fontWeightLight": 300,
+ "fontWeightMedium": 500,
+ "fontWeightRegular": 400,
+ "h1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "6rem",
+ "fontWeight": 300,
+ "letterSpacing": "-0.01562em",
+ "lineHeight": 1.167,
+ },
+ "h2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "3.75rem",
+ "fontWeight": 300,
+ "letterSpacing": "-0.00833em",
+ "lineHeight": 1.2,
+ },
+ "h3": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "3rem",
+ "fontWeight": 400,
+ "letterSpacing": "0em",
+ "lineHeight": 1.167,
+ },
+ "h4": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "2.125rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00735em",
+ "lineHeight": 1.235,
+ },
+ "h5": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1.5rem",
+ "fontWeight": 400,
+ "letterSpacing": "0em",
+ "lineHeight": 1.334,
+ },
+ "h6": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1.25rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.0075em",
+ "lineHeight": 1.6,
+ },
+ "htmlFontSize": 16,
+ "overline": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.75rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.08333em",
+ "lineHeight": 2.66,
+ "textTransform": "uppercase",
+ },
+ "pxToRem": [Function],
+ "round": [Function],
+ "subtitle1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00938em",
+ "lineHeight": 1.75,
+ },
+ "subtitle2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.00714em",
+ "lineHeight": 1.57,
+ },
+ },
+ "zIndex": Object {
+ "appBar": 1100,
+ "drawer": 1200,
+ "mobileStepper": 1000,
+ "modal": 1300,
+ "snackbar": 1400,
+ "speedDial": 1050,
+ "tooltip": 1500,
+ },
+ },
+ "name": "MuiBackdrop",
+ },
+ "propTypes": Object {
+ "classes": [Function],
+ "innerRef": [Function],
+ },
+ "render": [Function],
+ "useStyles": [Function],
+ }
+ }
+ BackdropProps={
+ Object {
+ "transitionDuration": Object {
+ "enter": 225,
+ "exit": 195,
+ },
+ }
+ }
+ className="MuiDialog-root modal-root"
+ closeAfterTransition={true}
+ disableEscapeKeyDown={false}
+ onClose={[Function]}
+ open={true}
+ >
+ <ForwardRef(Portal)
+ disablePortal={false}
+ >
+ <Portal
+ containerInfo={
+ <body
+ style="padding-right: 0px; overflow: hidden;"
+ >
+ <div
+ class="MuiDialog-root modal-root"
+ role="presentation"
+ style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
+ >
+ <div
+ aria-hidden="true"
+ class="MuiBackdrop-root"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ />
+ <div
+ data-test="sentinelStart"
+ tabindex="0"
+ />
+ <div
+ class="MuiDialog-container MuiDialog-scrollPaper"
+ role="none presentation"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ tabindex="-1"
+ >
+ <div
+ aria-labelledby="accessibility-title"
+ class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
+ >
+ <div
+ id="accessibility-title"
+ >
+ export.modal_loading.accessibility_title
+ </div>
+ <div
+ class="modal-loading-root"
+ >
+ <div>
+ <button
+ aria-label="export.button_close"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
+ >
+ <svg
+ class="styles__icon___23x3R"
+ height="18"
+ width="18"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ <div
+ class="content"
+ >
+ <div
+ class="icon-main"
+ >
+ <div
+ aria-label="animation"
+ role="button"
+ style="width: 38px; height: 38px; overflow: hidden; margin: 0px auto; outline: none;"
+ tabindex="0"
+ title=""
+ >
+ <svg
+ height="128"
+ preserveAspectRatio="xMidYMid slice"
+ style="width: 100%; height: 100%; transform: translate3d(0,0,0);"
+ viewBox="0 0 128 128"
+ width="128"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <defs>
+ <clippath
+ id="__lottie_element_2"
+ >
+ <rect
+ height="128"
+ width="128"
+ x="0"
+ y="0"
+ />
+ </clippath>
+ </defs>
+ <g
+ clip-path="url(#__lottie_element_2)"
+ >
+ <g
+ opacity="1"
+ style="display: block;"
+ transform="matrix(1,0,0,1,22.5,64)"
+ >
+ <path
+ d=" M10,29.25 C10,29.25 10,45 10,45 C10,47.76100158691406 7.761000156402588,50 5,50 C5,50 -5,50 -5,50 C-7.761000156402588,50 -10,47.76100158691406 -10,45 C-10,45 -10,29.25 -10,29.25 C-10,26.48900032043457 -7.761000156402588,24.25 -5,24.25 C-5,24.25 5,24.25 5,24.25 C7.761000156402588,24.25 10,26.48900032043457 10,29.25z"
+ fill="rgb(227,184,42)"
+ fill-opacity="1"
+ />
+ </g>
+ <g
+ opacity="1"
+ style="display: block;"
+ transform="matrix(1,0,0,1,62.5,64)"
+ >
+ <path
+ d=" M10,-33 C10,-33 10,45 10,45 C10,47.76100158691406 7.761000156402588,50 5,50 C5,50 -5,50 -5,50 C-7.761000156402588,50 -10,47.76100158691406 -10,45 C-10,45 -10,-33 -10,-33 C-10,-35.76100158691406 -7.761000156402588,-38 -5,-38 C-5,-38 5,-38 5,-38 C7.761000156402588,-38 10,-35.76100158691406 10,-33z"
+ fill="rgb(227,184,42)"
+ fill-opacity="1"
+ />
+ </g>
+ <g
+ opacity="1"
+ style="display: block;"
+ transform="matrix(1,0,0,1,102.5,64)"
+ >
+ <path
+ d=" M10,-8.75 C10,-8.75 10,45 10,45 C10,47.76100158691406 7.761000156402588,50 5,50 C5,50 -5,50 -5,50 C-7.761000156402588,50 -10,47.76100158691406 -10,45 C-10,45 -10,-8.75 -10,-8.75 C-10,-11.51099967956543 -7.761000156402588,-13.75 -5,-13.75 C-5,-13.75 5,-13.75 5,-13.75 C7.761000156402588,-13.75 10,-11.51099967956543 10,-8.75z"
+ fill="rgb(227,184,42)"
+ fill-opacity="1"
+ />
+ </g>
+ </g>
+ </svg>
+ </div>
+ </div>
+ <div
+ class="text-16-bold text text1"
+ >
+ export.modal_loading.text1
+ </div>
+ <div
+ class="text-16-normal text"
+ >
+ export.modal_loading.text2
+ </div>
+ <button
+ aria-label="export.modal_loading.button_cancel"
+ class="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
+ tabindex="0"
+ type="submit"
+ >
+ <span
+ class="MuiButton-label text-16-bold"
+ >
+ export.modal_loading.button_cancel
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div
+ data-test="sentinelEnd"
+ tabindex="0"
+ />
+ </div>
+ </body>
+ }
+ >
+ <div
+ className="MuiDialog-root modal-root"
+ onKeyDown={[Function]}
+ role="presentation"
+ style={
+ Object {
+ "bottom": 0,
+ "left": 0,
+ "position": "fixed",
+ "right": 0,
+ "top": 0,
+ "zIndex": 1300,
+ }
+ }
+ >
+ <WithStyles(ForwardRef(Backdrop))
+ onClick={[Function]}
+ open={true}
+ transitionDuration={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ >
+ <ForwardRef(Backdrop)
+ classes={
+ Object {
+ "invisible": "MuiBackdrop-invisible",
+ "root": "MuiBackdrop-root",
+ }
+ }
+ onClick={[Function]}
+ open={true}
+ transitionDuration={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ >
+ <ForwardRef(Fade)
+ in={true}
+ onClick={[Function]}
+ timeout={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ >
+ <Transition
+ appear={true}
+ enter={true}
+ exit={true}
+ in={true}
+ mountOnEnter={false}
+ onClick={[Function]}
+ onEnter={[Function]}
+ onEntered={[Function]}
+ onEntering={[Function]}
+ onExit={[Function]}
+ onExited={[Function]}
+ onExiting={[Function]}
+ timeout={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ unmountOnExit={false}
+ >
+ <div
+ aria-hidden={true}
+ className="MuiBackdrop-root"
+ onClick={[Function]}
+ style={
+ Object {
+ "opacity": 1,
+ "visibility": undefined,
+ }
+ }
+ />
+ </Transition>
+ </ForwardRef(Fade)>
+ </ForwardRef(Backdrop)>
+ </WithStyles(ForwardRef(Backdrop))>
+ <Unstable_TrapFocus
+ disableAutoFocus={false}
+ disableEnforceFocus={false}
+ disableRestoreFocus={false}
+ getDoc={[Function]}
+ isEnabled={[Function]}
+ open={true}
+ >
+ <div
+ data-test="sentinelStart"
+ tabIndex={0}
+ />
+ <ForwardRef(Fade)
+ appear={true}
+ in={true}
+ onEnter={[Function]}
+ onExited={[Function]}
+ role="none presentation"
+ tabIndex="-1"
+ timeout={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ >
+ <Transition
+ appear={true}
+ enter={true}
+ exit={true}
+ in={true}
+ mountOnEnter={false}
+ onEnter={[Function]}
+ onEntered={[Function]}
+ onEntering={[Function]}
+ onExit={[Function]}
+ onExited={[Function]}
+ onExiting={[Function]}
+ role="none presentation"
+ tabIndex="-1"
+ timeout={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ unmountOnExit={false}
+ >
+ <div
+ className="MuiDialog-container MuiDialog-scrollPaper"
+ onMouseDown={[Function]}
+ onMouseUp={[Function]}
+ role="none presentation"
+ style={
+ Object {
+ "opacity": 1,
+ "visibility": undefined,
+ }
+ }
+ tabIndex="-1"
+ >
+ <WithStyles(ForwardRef(Paper))
+ aria-labelledby="accessibility-title"
+ className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
+ elevation={24}
+ role="dialog"
+ >
+ <ForwardRef(Paper)
+ aria-labelledby="accessibility-title"
+ className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
+ classes={
+ Object {
+ "elevation0": "MuiPaper-elevation0",
+ "elevation1": "MuiPaper-elevation1",
+ "elevation10": "MuiPaper-elevation10",
+ "elevation11": "MuiPaper-elevation11",
+ "elevation12": "MuiPaper-elevation12",
+ "elevation13": "MuiPaper-elevation13",
+ "elevation14": "MuiPaper-elevation14",
+ "elevation15": "MuiPaper-elevation15",
+ "elevation16": "MuiPaper-elevation16",
+ "elevation17": "MuiPaper-elevation17",
+ "elevation18": "MuiPaper-elevation18",
+ "elevation19": "MuiPaper-elevation19",
+ "elevation2": "MuiPaper-elevation2",
+ "elevation20": "MuiPaper-elevation20",
+ "elevation21": "MuiPaper-elevation21",
+ "elevation22": "MuiPaper-elevation22",
+ "elevation23": "MuiPaper-elevation23",
+ "elevation24": "MuiPaper-elevation24",
+ "elevation3": "MuiPaper-elevation3",
+ "elevation4": "MuiPaper-elevation4",
+ "elevation5": "MuiPaper-elevation5",
+ "elevation6": "MuiPaper-elevation6",
+ "elevation7": "MuiPaper-elevation7",
+ "elevation8": "MuiPaper-elevation8",
+ "elevation9": "MuiPaper-elevation9",
+ "outlined": "MuiPaper-outlined",
+ "root": "MuiPaper-root",
+ "rounded": "MuiPaper-rounded",
+ }
+ }
+ elevation={24}
+ role="dialog"
+ >
+ <div
+ aria-labelledby="accessibility-title"
+ className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
+ >
+ <div
+ id="accessibility-title"
+ >
+ export.modal_loading.accessibility_title
+ </div>
+ <div
+ className="modal-loading-root"
+ >
+ <div
+ onClick={[MockFunction]}
+ >
+ <WithStyles(ForwardRef(IconButton))
+ aria-label="export.button_close"
+ className="modal-paper-close-button"
+ onClick={[MockFunction]}
+ >
+ <ForwardRef(IconButton)
+ aria-label="export.button_close"
+ className="modal-paper-close-button"
+ classes={
+ Object {
+ "colorInherit": "MuiIconButton-colorInherit",
+ "colorPrimary": "MuiIconButton-colorPrimary",
+ "colorSecondary": "MuiIconButton-colorSecondary",
+ "disabled": "Mui-disabled",
+ "edgeEnd": "MuiIconButton-edgeEnd",
+ "edgeStart": "MuiIconButton-edgeStart",
+ "label": "MuiIconButton-label",
+ "root": "MuiIconButton-root",
+ "sizeSmall": "MuiIconButton-sizeSmall",
+ }
+ }
+ onClick={[MockFunction]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-label="export.button_close"
+ centerRipple={true}
+ className="MuiIconButton-root modal-paper-close-button"
+ disabled={false}
+ focusRipple={true}
+ onClick={[MockFunction]}
+ >
+ <ForwardRef(ButtonBase)
+ aria-label="export.button_close"
+ centerRipple={true}
+ className="MuiIconButton-root modal-paper-close-button"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ disabled={false}
+ focusRipple={true}
+ onClick={[MockFunction]}
+ >
+ <button
+ aria-label="export.button_close"
+ className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+ disabled={false}
+ onBlur={[Function]}
+ onClick={[MockFunction]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
+ tabIndex={0}
+ type="button"
+ >
+ <span
+ className="MuiIconButton-label"
+ >
+ <Icon
+ icon="test-file-stub"
+ size={18}
+ spin={false}
+ >
+ <Component
+ className="styles__icon___23x3R"
+ height={18}
+ style={Object {}}
+ width={18}
+ >
+ <svg
+ className="styles__icon___23x3R"
+ height={18}
+ style={Object {}}
+ width={18}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </span>
+ <WithStyles(memo)
+ center={true}
+ >
+ <ForwardRef(TouchRipple)
+ center={true}
+ classes={
+ Object {
+ "child": "MuiTouchRipple-child",
+ "childLeaving": "MuiTouchRipple-childLeaving",
+ "childPulsate": "MuiTouchRipple-childPulsate",
+ "ripple": "MuiTouchRipple-ripple",
+ "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+ "rippleVisible": "MuiTouchRipple-rippleVisible",
+ "root": "MuiTouchRipple-root",
+ }
+ }
+ >
+ <span
+ className="MuiTouchRipple-root"
+ >
+ <TransitionGroup
+ childFactory={[Function]}
+ component={null}
+ exit={true}
+ />
+ </span>
+ </ForwardRef(TouchRipple)>
+ </WithStyles(memo)>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(IconButton)>
+ </WithStyles(ForwardRef(IconButton))>
+ </div>
+ <div
+ className="content"
+ >
+ <div
+ className="icon-main"
+ >
+ <Lottie
+ ariaLabel="animation"
+ ariaRole="button"
+ eventListeners={Array []}
+ height={38}
+ isClickToPauseDisabled={false}
+ isPaused={false}
+ isStopped={false}
+ options={
+ Object {
+ "animationData": Object {
+ "__complete": true,
+ "assets": Array [],
+ "ddd": 0,
+ "default": Object {
+ "assets": Array [],
+ "ddd": 0,
+ "fr": 30,
+ "h": 128,
+ "ip": 0,
+ "layers": Array [
+ Object {
+ "ao": 0,
+ "bm": 0,
+ "completed": true,
+ "ddd": 0,
+ "ind": 1,
+ "ip": 0,
+ "ks": Object {
+ "a": Object {
+ "a": 0,
+ "ix": 1,
+ "k": Array [
+ 0,
+ 50,
+ 0,
+ ],
+ },
+ "o": Object {
+ "a": 0,
+ "ix": 11,
+ "k": 100,
+ },
+ "p": Object {
+ "a": 0,
+ "ix": 2,
+ "k": Array [
+ 102.5,
+ 114,
+ 0,
+ ],
+ },
+ "r": Object {
+ "a": 0,
+ "ix": 10,
+ "k": 0,
+ },
+ "s": Object {
+ "a": 0,
+ "ix": 6,
+ "k": Array [
+ 100,
+ 100,
+ 100,
+ ],
+ },
+ },
+ "nm": "Shape Layer 2",
+ "op": 61,
+ "shapes": Array [
+ Object {
+ "_render": true,
+ "hd": false,
+ "ind": 0,
+ "ix": 1,
+ "ks": Object {
+ "a": 1,
+ "ix": 2,
+ "k": Array [
+ Object {
+ "i": Object {
+ "x": 0.665,
+ "y": 1,
+ },
+ "o": Object {
+ "x": 0.088,
+ "y": 0,
+ },
+ "s": Array [
+ Object {
+ "c": true,
+ "i": Array [
+ Array [
+ 10,
+ -11.511,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 7.761,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 47.761,
+ ],
+ Array [
+ -10,
+ -8.75,
+ ],
+ Array [
+ -7.761,
+ -13.75,
+ ],
+ Array [
+ 5,
+ -13.75,
+ ],
+ ],
+ "o": Array [
+ Array [
+ 10,
+ -8.75,
+ ],
+ Array [
+ 10,
+ 47.761,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -7.761,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ -11.511,
+ ],
+ Array [
+ -5,
+ -13.75,
+ ],
+ Array [
+ 7.761,
+ -13.75,
+ ],
+ ],
+ "v": Array [
+ Array [
+ 10,
+ -8.75,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ -8.75,
+ ],
+ Array [
+ -5,
+ -13.75,
+ ],
+ Array [
+ 5,
+ -13.75,
+ ],
+ ],
+ },
+ ],
+ "t": 0,
+ },
+ Object {
+ "i": Object {
+ "x": 0.888,
+ "y": 0.992,
+ },
+ "o": Object {
+ "x": 0.315,
+ "y": 0,
+ },
+ "s": Array [
+ Object {
+ "c": true,
+ "i": Array [
+ Array [
+ 10,
+ -32.261,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 7.761,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 47.761,
+ ],
+ Array [
+ -10,
+ -29.5,
+ ],
+ Array [
+ -7.761,
+ -34.5,
+ ],
+ Array [
+ 5,
+ -34.5,
+ ],
+ ],
+ "o": Array [
+ Array [
+ 10,
+ -29.5,
+ ],
+ Array [
+ 10,
+ 47.761,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -7.761,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ -32.261,
+ ],
+ Array [
+ -5,
+ -34.5,
+ ],
+ Array [
+ 7.761,
+ -34.5,
+ ],
+ ],
+ "v": Array [
+ Array [
+ 10,
+ -29.5,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ -29.5,
+ ],
+ Array [
+ -5,
+ -34.5,
+ ],
+ Array [
+ 5,
+ -34.5,
+ ],
+ ],
+ },
+ ],
+ "t": 15,
+ },
+ Object {
+ "i": Object {
+ "x": 0.777,
+ "y": 1,
+ },
+ "o": Object {
+ "x": 0.117,
+ "y": 0.013,
+ },
+ "s": Array [
+ Object {
+ "c": true,
+ "i": Array [
+ Array [
+ 10,
+ -11.511,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 7.761,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 47.761,
+ ],
+ Array [
+ -10,
+ -8.75,
+ ],
+ Array [
+ -7.761,
+ -13.75,
+ ],
+ Array [
+ 5,
+ -13.75,
+ ],
+ ],
+ "o": Array [
+ Array [
+ 10,
+ -8.75,
+ ],
+ Array [
+ 10,
+ 47.761,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -7.761,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ -11.511,
+ ],
+ Array [
+ -5,
+ -13.75,
+ ],
+ Array [
+ 7.761,
+ -13.75,
+ ],
+ ],
+ "v": Array [
+ Array [
+ 10,
+ -8.75,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ -8.75,
+ ],
+ Array [
+ -5,
+ -13.75,
+ ],
+ Array [
+ 5,
+ -13.75,
+ ],
+ ],
+ },
+ ],
+ "t": 30,
+ },
+ Object {
+ "i": Object {
+ "x": 0.853,
+ "y": 1,
+ },
+ "o": Object {
+ "x": 0.098,
+ "y": 0,
+ },
+ "s": Array [
+ Object {
+ "c": true,
+ "i": Array [
+ Array [
+ 10,
+ 15.989,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 7.761,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 47.761,
+ ],
+ Array [
+ -10,
+ 18.75,
+ ],
+ Array [
+ -7.761,
+ 13.75,
+ ],
+ Array [
+ 5,
+ 13.75,
+ ],
+ ],
+ "o": Array [
+ Array [
+ 10,
+ 18.75,
+ ],
+ Array [
+ 10,
+ 47.761,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -7.761,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ 15.989,
+ ],
+ Array [
+ -5,
+ 13.75,
+ ],
+ Array [
+ 7.761,
+ 13.75,
+ ],
+ ],
+ "v": Array [
+ Array [
+ 10,
+ 18.75,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ 18.75,
+ ],
+ Array [
+ -5,
+ 13.75,
+ ],
+ Array [
+ 5,
+ 13.75,
+ ],
+ ],
+ },
+ ],
+ "t": 46,
+ },
+ Object {
+ "s": Array [
+ Object {
+ "c": true,
+ "i": Array [
+ Array [
+ 10,
+ -11.511,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 7.761,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 47.761,
+ ],
+ Array [
+ -10,
+ -8.75,
+ ],
+ Array [
+ -7.761,
+ -13.75,
+ ],
+ Array [
+ 5,
+ -13.75,
+ ],
+ ],
+ "o": Array [
+ Array [
+ 10,
+ -8.75,
+ ],
+ Array [
+ 10,
+ 47.761,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -7.761,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ -11.511,
+ ],
+ Array [
+ -5,
+ -13.75,
+ ],
+ Array [
+ 7.761,
+ -13.75,
+ ],
+ ],
+ "v": Array [
+ Array [
+ 10,
+ -8.75,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ -8.75,
+ ],
+ Array [
+ -5,
+ -13.75,
+ ],
+ Array [
+ 5,
+ -13.75,
+ ],
+ ],
+ },
+ ],
+ "t": 60,
+ },
+ ],
+ },
+ "mn": "ADBE Vector Shape - Group",
+ "nm": "Path 1",
+ "ty": "sh",
+ },
+ Object {
+ "_render": true,
+ "bm": 0,
+ "c": Object {
+ "a": 0,
+ "ix": 4,
+ "k": Array [
+ 0.8901960784313725,
+ 0.7215686274509804,
+ 0.16470588235294117,
+ 1,
+ ],
+ },
+ "hd": false,
+ "mn": "ADBE Vector Graphic - Fill",
+ "nm": "Fill 1",
+ "o": Object {
+ "a": 0,
+ "ix": 5,
+ "k": 100,
+ },
+ "r": 1,
+ "ty": "fl",
+ },
+ ],
+ "sr": 1,
+ "st": 0,
+ "ty": 4,
+ },
+ Object {
+ "ao": 0,
+ "bm": 0,
+ "completed": true,
+ "ddd": 0,
+ "ind": 2,
+ "ip": 0,
+ "ks": Object {
+ "a": Object {
+ "a": 0,
+ "ix": 1,
+ "k": Array [
+ 0,
+ 50,
+ 0,
+ ],
+ },
+ "o": Object {
+ "a": 0,
+ "ix": 11,
+ "k": 100,
+ },
+ "p": Object {
+ "a": 0,
+ "ix": 2,
+ "k": Array [
+ 62.5,
+ 114,
+ 0,
+ ],
+ },
+ "r": Object {
+ "a": 0,
+ "ix": 10,
+ "k": 0,
+ },
+ "s": Object {
+ "a": 0,
+ "ix": 6,
+ "k": Array [
+ 100,
+ 100,
+ 100,
+ ],
+ },
+ },
+ "nm": "Shape Layer 3",
+ "op": 61,
+ "shapes": Array [
+ Object {
+ "_render": true,
+ "hd": false,
+ "ind": 0,
+ "ix": 1,
+ "ks": Object {
+ "a": 1,
+ "ix": 2,
+ "k": Array [
+ Object {
+ "i": Object {
+ "x": 0.631,
+ "y": 1,
+ },
+ "o": Object {
+ "x": 0.167,
+ "y": 0,
+ },
+ "s": Array [
+ Object {
+ "c": true,
+ "i": Array [
+ Array [
+ 10,
+ -35.761,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 7.761,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 47.761,
+ ],
+ Array [
+ -10,
+ -33,
+ ],
+ Array [
+ -7.761,
+ -38,
+ ],
+ Array [
+ 5,
+ -38,
+ ],
+ ],
+ "o": Array [
+ Array [
+ 10,
+ -33,
+ ],
+ Array [
+ 10,
+ 47.761,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -7.761,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ -35.761,
+ ],
+ Array [
+ -5,
+ -38,
+ ],
+ Array [
+ 7.761,
+ -38,
+ ],
+ ],
+ "v": Array [
+ Array [
+ 10,
+ -33,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ -33,
+ ],
+ Array [
+ -5,
+ -38,
+ ],
+ Array [
+ 5,
+ -38,
+ ],
+ ],
+ },
+ ],
+ "t": 0,
+ },
+ Object {
+ "i": Object {
+ "x": 0.667,
+ "y": 1,
+ },
+ "o": Object {
+ "x": 0.391,
+ "y": 0,
+ },
+ "s": Array [
+ Object {
+ "c": true,
+ "i": Array [
+ Array [
+ 10,
+ 1.2389999999999999,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 7.761,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 47.761,
+ ],
+ Array [
+ -10,
+ 4,
+ ],
+ Array [
+ -7.761,
+ -1,
+ ],
+ Array [
+ 5,
+ -1,
+ ],
+ ],
+ "o": Array [
+ Array [
+ 10,
+ 4,
+ ],
+ Array [
+ 10,
+ 47.761,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -7.761,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ 1.2389999999999999,
+ ],
+ Array [
+ -5,
+ -1,
+ ],
+ Array [
+ 7.761,
+ -1,
+ ],
+ ],
+ "v": Array [
+ Array [
+ 10,
+ 4,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ 4,
+ ],
+ Array [
+ -5,
+ -1,
+ ],
+ Array [
+ 5,
+ -1,
+ ],
+ ],
+ },
+ ],
+ "t": 13.846,
+ },
+ Object {
+ "i": Object {
+ "x": 0.88,
+ "y": 1,
+ },
+ "o": Object {
+ "x": 0.093,
+ "y": 0,
+ },
+ "s": Array [
+ Object {
+ "c": true,
+ "i": Array [
+ Array [
+ 10,
+ -35.761,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 7.761,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 47.761,
+ ],
+ Array [
+ -10,
+ -33,
+ ],
+ Array [
+ -7.761,
+ -38,
+ ],
+ Array [
+ 5,
+ -38,
+ ],
+ ],
+ "o": Array [
+ Array [
+ 10,
+ -33,
+ ],
+ Array [
+ 10,
+ 47.761,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -7.761,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ -35.761,
+ ],
+ Array [
+ -5,
+ -38,
+ ],
+ Array [
+ 7.761,
+ -38,
+ ],
+ ],
+ "v": Array [
+ Array [
+ 10,
+ -33,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ -33,
+ ],
+ Array [
+ -5,
+ -38,
+ ],
+ Array [
+ 5,
+ -38,
+ ],
+ ],
+ },
+ ],
+ "t": 27,
+ },
+ Object {
+ "i": Object {
+ "x": 0.873,
+ "y": 1,
+ },
+ "o": Object {
+ "x": 0.165,
+ "y": 0,
+ },
+ "s": Array [
+ Object {
+ "c": true,
+ "i": Array [
+ Array [
+ 10,
+ 9.114,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 7.761,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 47.761,
+ ],
+ Array [
+ -10,
+ 11.875,
+ ],
+ Array [
+ -7.761,
+ 6.875,
+ ],
+ Array [
+ 5,
+ 6.875,
+ ],
+ ],
+ "o": Array [
+ Array [
+ 10,
+ 11.875,
+ ],
+ Array [
+ 10,
+ 47.761,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -7.761,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ 9.114,
+ ],
+ Array [
+ -5,
+ 6.875,
+ ],
+ Array [
+ 7.761,
+ 6.875,
+ ],
+ ],
+ "v": Array [
+ Array [
+ 10,
+ 11.875,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ 11.875,
+ ],
+ Array [
+ -5,
+ 6.875,
+ ],
+ Array [
+ 5,
+ 6.875,
+ ],
+ ],
+ },
+ ],
+ "t": 45,
+ },
+ Object {
+ "s": Array [
+ Object {
+ "c": true,
+ "i": Array [
+ Array [
+ 10,
+ -35.761,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 7.761,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 47.761,
+ ],
+ Array [
+ -10,
+ -33,
+ ],
+ Array [
+ -7.761,
+ -38,
+ ],
+ Array [
+ 5,
+ -38,
+ ],
+ ],
+ "o": Array [
+ Array [
+ 10,
+ -33,
+ ],
+ Array [
+ 10,
+ 47.761,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -7.761,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ -35.761,
+ ],
+ Array [
+ -5,
+ -38,
+ ],
+ Array [
+ 7.761,
+ -38,
+ ],
+ ],
+ "v": Array [
+ Array [
+ 10,
+ -33,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ -33,
+ ],
+ Array [
+ -5,
+ -38,
+ ],
+ Array [
+ 5,
+ -38,
+ ],
+ ],
+ },
+ ],
+ "t": 60,
+ },
+ ],
+ },
+ "mn": "ADBE Vector Shape - Group",
+ "nm": "Path 1",
+ "ty": "sh",
+ },
+ Object {
+ "_render": true,
+ "bm": 0,
+ "c": Object {
+ "a": 0,
+ "ix": 4,
+ "k": Array [
+ 0.8901960784313725,
+ 0.7215686274509804,
+ 0.16470588235294117,
+ 1,
+ ],
+ },
+ "hd": false,
+ "mn": "ADBE Vector Graphic - Fill",
+ "nm": "Fill 1",
+ "o": Object {
+ "a": 0,
+ "ix": 5,
+ "k": 100,
+ },
+ "r": 1,
+ "ty": "fl",
+ },
+ ],
+ "sr": 1,
+ "st": 0,
+ "ty": 4,
+ },
+ Object {
+ "ao": 0,
+ "bm": 0,
+ "completed": true,
+ "ddd": 0,
+ "ind": 3,
+ "ip": 0,
+ "ks": Object {
+ "a": Object {
+ "a": 0,
+ "ix": 1,
+ "k": Array [
+ 0,
+ 50,
+ 0,
+ ],
+ },
+ "o": Object {
+ "a": 0,
+ "ix": 11,
+ "k": 100,
+ },
+ "p": Object {
+ "a": 0,
+ "ix": 2,
+ "k": Array [
+ 22.5,
+ 114,
+ 0,
+ ],
+ },
+ "r": Object {
+ "a": 0,
+ "ix": 10,
+ "k": 0,
+ },
+ "s": Object {
+ "a": 0,
+ "ix": 6,
+ "k": Array [
+ 100,
+ 100,
+ 100,
+ ],
+ },
+ },
+ "nm": "Shape Layer 4",
+ "op": 61,
+ "shapes": Array [
+ Object {
+ "_render": true,
+ "hd": false,
+ "ind": 0,
+ "ix": 1,
+ "ks": Object {
+ "a": 1,
+ "ix": 2,
+ "k": Array [
+ Object {
+ "i": Object {
+ "x": 0.562,
+ "y": 1,
+ },
+ "o": Object {
+ "x": 0.46,
+ "y": 0,
+ },
+ "s": Array [
+ Object {
+ "c": true,
+ "i": Array [
+ Array [
+ 10,
+ 26.489,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 7.761,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 47.761,
+ ],
+ Array [
+ -10,
+ 29.25,
+ ],
+ Array [
+ -7.761,
+ 24.25,
+ ],
+ Array [
+ 5,
+ 24.25,
+ ],
+ ],
+ "o": Array [
+ Array [
+ 10,
+ 29.25,
+ ],
+ Array [
+ 10,
+ 47.761,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -7.761,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ 26.489,
+ ],
+ Array [
+ -5,
+ 24.25,
+ ],
+ Array [
+ 7.761,
+ 24.25,
+ ],
+ ],
+ "v": Array [
+ Array [
+ 10,
+ 29.25,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ 29.25,
+ ],
+ Array [
+ -5,
+ 24.25,
+ ],
+ Array [
+ 5,
+ 24.25,
+ ],
+ ],
+ },
+ ],
+ "t": 0,
+ },
+ Object {
+ "i": Object {
+ "x": 0.505,
+ "y": 1,
+ },
+ "o": Object {
+ "x": 0.402,
+ "y": 0,
+ },
+ "s": Array [
+ Object {
+ "c": true,
+ "i": Array [
+ Array [
+ 10,
+ 10.239,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 7.761,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 47.761,
+ ],
+ Array [
+ -10,
+ 13,
+ ],
+ Array [
+ -7.761,
+ 8,
+ ],
+ Array [
+ 5,
+ 8,
+ ],
+ ],
+ "o": Array [
+ Array [
+ 10,
+ 13,
+ ],
+ Array [
+ 10,
+ 47.761,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -7.761,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ 10.239,
+ ],
+ Array [
+ -5,
+ 8,
+ ],
+ Array [
+ 7.761,
+ 8,
+ ],
+ ],
+ "v": Array [
+ Array [
+ 10,
+ 13,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ 13,
+ ],
+ Array [
+ -5,
+ 8,
+ ],
+ Array [
+ 5,
+ 8,
+ ],
+ ],
+ },
+ ],
+ "t": 15,
+ },
+ Object {
+ "i": Object {
+ "x": 0.407,
+ "y": 1,
+ },
+ "o": Object {
+ "x": 0.167,
+ "y": 0,
+ },
+ "s": Array [
+ Object {
+ "c": true,
+ "i": Array [
+ Array [
+ 10,
+ 26.489,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 7.761,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 47.761,
+ ],
+ Array [
+ -10,
+ 29.25,
+ ],
+ Array [
+ -7.761,
+ 24.25,
+ ],
+ Array [
+ 5,
+ 24.25,
+ ],
+ ],
+ "o": Array [
+ Array [
+ 10,
+ 29.25,
+ ],
+ Array [
+ 10,
+ 47.761,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -7.761,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ 26.489,
+ ],
+ Array [
+ -5,
+ 24.25,
+ ],
+ Array [
+ 7.761,
+ 24.25,
+ ],
+ ],
+ "v": Array [
+ Array [
+ 10,
+ 29.25,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ 29.25,
+ ],
+ Array [
+ -5,
+ 24.25,
+ ],
+ Array [
+ 5,
+ 24.25,
+ ],
+ ],
+ },
+ ],
+ "t": 32,
+ },
+ Object {
+ "i": Object {
+ "x": 0.599,
+ "y": 1,
+ },
+ "o": Object {
+ "x": 0.526,
+ "y": 0,
+ },
+ "s": Array [
+ Object {
+ "c": true,
+ "i": Array [
+ Array [
+ 10,
+ 0.23899999999999988,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 7.761,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 47.761,
+ ],
+ Array [
+ -10,
+ 3,
+ ],
+ Array [
+ -7.761,
+ -2,
+ ],
+ Array [
+ 5,
+ -2,
+ ],
+ ],
+ "o": Array [
+ Array [
+ 10,
+ 3,
+ ],
+ Array [
+ 10,
+ 47.761,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -7.761,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ 0.23899999999999988,
+ ],
+ Array [
+ -5,
+ -2,
+ ],
+ Array [
+ 7.761,
+ -2,
+ ],
+ ],
+ "v": Array [
+ Array [
+ 10,
+ 3,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ 3,
+ ],
+ Array [
+ -5,
+ -2,
+ ],
+ Array [
+ 5,
+ -2,
+ ],
+ ],
+ },
+ ],
+ "t": 47,
+ },
+ Object {
+ "s": Array [
+ Object {
+ "c": true,
+ "i": Array [
+ Array [
+ 10,
+ 26.489,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 7.761,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 47.761,
+ ],
+ Array [
+ -10,
+ 29.25,
+ ],
+ Array [
+ -7.761,
+ 24.25,
+ ],
+ Array [
+ 5,
+ 24.25,
+ ],
+ ],
+ "o": Array [
+ Array [
+ 10,
+ 29.25,
+ ],
+ Array [
+ 10,
+ 47.761,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -7.761,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ 26.489,
+ ],
+ Array [
+ -5,
+ 24.25,
+ ],
+ Array [
+ 7.761,
+ 24.25,
+ ],
+ ],
+ "v": Array [
+ Array [
+ 10,
+ 29.25,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ 29.25,
+ ],
+ Array [
+ -5,
+ 24.25,
+ ],
+ Array [
+ 5,
+ 24.25,
+ ],
+ ],
+ },
+ ],
+ "t": 60,
+ },
+ ],
+ },
+ "mn": "ADBE Vector Shape - Group",
+ "nm": "Path 1",
+ "ty": "sh",
+ },
+ Object {
+ "_render": true,
+ "bm": 0,
+ "c": Object {
+ "a": 0,
+ "ix": 4,
+ "k": Array [
+ 0.8901960784313725,
+ 0.7215686274509804,
+ 0.16470588235294117,
+ 1,
+ ],
+ },
+ "hd": false,
+ "mn": "ADBE Vector Graphic - Fill",
+ "nm": "Fill 1",
+ "o": Object {
+ "a": 0,
+ "ix": 5,
+ "k": 100,
+ },
+ "r": 1,
+ "ty": "fl",
+ },
+ ],
+ "sr": 1,
+ "st": 0,
+ "ty": 4,
+ },
+ ],
+ "markers": Array [],
+ "nm": "Comp 1",
+ "op": 60,
+ "v": "5.5.8",
+ "w": 128,
+ },
+ "fr": 30,
+ "h": 128,
+ "ip": 0,
+ "layers": Array [
+ Object {
+ "ao": 0,
+ "bm": 0,
+ "completed": true,
+ "ddd": 0,
+ "ind": 1,
+ "ip": 0,
+ "ks": Object {
+ "a": Object {
+ "a": 0,
+ "ix": 1,
+ "k": Array [
+ 0,
+ 50,
+ 0,
+ ],
+ },
+ "o": Object {
+ "a": 0,
+ "ix": 11,
+ "k": 100,
+ },
+ "p": Object {
+ "a": 0,
+ "ix": 2,
+ "k": Array [
+ 102.5,
+ 114,
+ 0,
+ ],
+ },
+ "r": Object {
+ "a": 0,
+ "ix": 10,
+ "k": 0,
+ },
+ "s": Object {
+ "a": 0,
+ "ix": 6,
+ "k": Array [
+ 100,
+ 100,
+ 100,
+ ],
+ },
+ },
+ "nm": "Shape Layer 2",
+ "op": 61,
+ "shapes": Array [
+ Object {
+ "_render": true,
+ "hd": false,
+ "ind": 0,
+ "ix": 1,
+ "ks": Object {
+ "a": 1,
+ "ix": 2,
+ "k": Array [
+ Object {
+ "i": Object {
+ "x": 0.665,
+ "y": 1,
+ },
+ "o": Object {
+ "x": 0.088,
+ "y": 0,
+ },
+ "s": Array [
+ Object {
+ "c": true,
+ "i": Array [
+ Array [
+ 10,
+ -11.511,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 7.761,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 47.761,
+ ],
+ Array [
+ -10,
+ -8.75,
+ ],
+ Array [
+ -7.761,
+ -13.75,
+ ],
+ Array [
+ 5,
+ -13.75,
+ ],
+ ],
+ "o": Array [
+ Array [
+ 10,
+ -8.75,
+ ],
+ Array [
+ 10,
+ 47.761,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -7.761,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ -11.511,
+ ],
+ Array [
+ -5,
+ -13.75,
+ ],
+ Array [
+ 7.761,
+ -13.75,
+ ],
+ ],
+ "v": Array [
+ Array [
+ 10,
+ -8.75,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ -8.75,
+ ],
+ Array [
+ -5,
+ -13.75,
+ ],
+ Array [
+ 5,
+ -13.75,
+ ],
+ ],
+ },
+ ],
+ "t": 0,
+ },
+ Object {
+ "i": Object {
+ "x": 0.888,
+ "y": 0.992,
+ },
+ "o": Object {
+ "x": 0.315,
+ "y": 0,
+ },
+ "s": Array [
+ Object {
+ "c": true,
+ "i": Array [
+ Array [
+ 10,
+ -32.261,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 7.761,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 47.761,
+ ],
+ Array [
+ -10,
+ -29.5,
+ ],
+ Array [
+ -7.761,
+ -34.5,
+ ],
+ Array [
+ 5,
+ -34.5,
+ ],
+ ],
+ "o": Array [
+ Array [
+ 10,
+ -29.5,
+ ],
+ Array [
+ 10,
+ 47.761,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -7.761,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ -32.261,
+ ],
+ Array [
+ -5,
+ -34.5,
+ ],
+ Array [
+ 7.761,
+ -34.5,
+ ],
+ ],
+ "v": Array [
+ Array [
+ 10,
+ -29.5,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ -29.5,
+ ],
+ Array [
+ -5,
+ -34.5,
+ ],
+ Array [
+ 5,
+ -34.5,
+ ],
+ ],
+ },
+ ],
+ "t": 15,
+ },
+ Object {
+ "i": Object {
+ "x": 0.777,
+ "y": 1,
+ },
+ "o": Object {
+ "x": 0.117,
+ "y": 0.013,
+ },
+ "s": Array [
+ Object {
+ "c": true,
+ "i": Array [
+ Array [
+ 10,
+ -11.511,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 7.761,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 47.761,
+ ],
+ Array [
+ -10,
+ -8.75,
+ ],
+ Array [
+ -7.761,
+ -13.75,
+ ],
+ Array [
+ 5,
+ -13.75,
+ ],
+ ],
+ "o": Array [
+ Array [
+ 10,
+ -8.75,
+ ],
+ Array [
+ 10,
+ 47.761,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -7.761,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ -11.511,
+ ],
+ Array [
+ -5,
+ -13.75,
+ ],
+ Array [
+ 7.761,
+ -13.75,
+ ],
+ ],
+ "v": Array [
+ Array [
+ 10,
+ -8.75,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ -8.75,
+ ],
+ Array [
+ -5,
+ -13.75,
+ ],
+ Array [
+ 5,
+ -13.75,
+ ],
+ ],
+ },
+ ],
+ "t": 30,
+ },
+ Object {
+ "i": Object {
+ "x": 0.853,
+ "y": 1,
+ },
+ "o": Object {
+ "x": 0.098,
+ "y": 0,
+ },
+ "s": Array [
+ Object {
+ "c": true,
+ "i": Array [
+ Array [
+ 10,
+ 15.989,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 7.761,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 47.761,
+ ],
+ Array [
+ -10,
+ 18.75,
+ ],
+ Array [
+ -7.761,
+ 13.75,
+ ],
+ Array [
+ 5,
+ 13.75,
+ ],
+ ],
+ "o": Array [
+ Array [
+ 10,
+ 18.75,
+ ],
+ Array [
+ 10,
+ 47.761,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -7.761,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ 15.989,
+ ],
+ Array [
+ -5,
+ 13.75,
+ ],
+ Array [
+ 7.761,
+ 13.75,
+ ],
+ ],
+ "v": Array [
+ Array [
+ 10,
+ 18.75,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ 18.75,
+ ],
+ Array [
+ -5,
+ 13.75,
+ ],
+ Array [
+ 5,
+ 13.75,
+ ],
+ ],
+ },
+ ],
+ "t": 46,
+ },
+ Object {
+ "s": Array [
+ Object {
+ "c": true,
+ "i": Array [
+ Array [
+ 10,
+ -11.511,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 7.761,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 47.761,
+ ],
+ Array [
+ -10,
+ -8.75,
+ ],
+ Array [
+ -7.761,
+ -13.75,
+ ],
+ Array [
+ 5,
+ -13.75,
+ ],
+ ],
+ "o": Array [
+ Array [
+ 10,
+ -8.75,
+ ],
+ Array [
+ 10,
+ 47.761,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -7.761,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ -11.511,
+ ],
+ Array [
+ -5,
+ -13.75,
+ ],
+ Array [
+ 7.761,
+ -13.75,
+ ],
+ ],
+ "v": Array [
+ Array [
+ 10,
+ -8.75,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ -8.75,
+ ],
+ Array [
+ -5,
+ -13.75,
+ ],
+ Array [
+ 5,
+ -13.75,
+ ],
+ ],
+ },
+ ],
+ "t": 60,
+ },
+ ],
+ },
+ "mn": "ADBE Vector Shape - Group",
+ "nm": "Path 1",
+ "ty": "sh",
+ },
+ Object {
+ "_render": true,
+ "bm": 0,
+ "c": Object {
+ "a": 0,
+ "ix": 4,
+ "k": Array [
+ 0.8901960784313725,
+ 0.7215686274509804,
+ 0.16470588235294117,
+ 1,
+ ],
+ },
+ "hd": false,
+ "mn": "ADBE Vector Graphic - Fill",
+ "nm": "Fill 1",
+ "o": Object {
+ "a": 0,
+ "ix": 5,
+ "k": 100,
+ },
+ "r": 1,
+ "ty": "fl",
+ },
+ ],
+ "sr": 1,
+ "st": 0,
+ "ty": 4,
+ },
+ Object {
+ "ao": 0,
+ "bm": 0,
+ "completed": true,
+ "ddd": 0,
+ "ind": 2,
+ "ip": 0,
+ "ks": Object {
+ "a": Object {
+ "a": 0,
+ "ix": 1,
+ "k": Array [
+ 0,
+ 50,
+ 0,
+ ],
+ },
+ "o": Object {
+ "a": 0,
+ "ix": 11,
+ "k": 100,
+ },
+ "p": Object {
+ "a": 0,
+ "ix": 2,
+ "k": Array [
+ 62.5,
+ 114,
+ 0,
+ ],
+ },
+ "r": Object {
+ "a": 0,
+ "ix": 10,
+ "k": 0,
+ },
+ "s": Object {
+ "a": 0,
+ "ix": 6,
+ "k": Array [
+ 100,
+ 100,
+ 100,
+ ],
+ },
+ },
+ "nm": "Shape Layer 3",
+ "op": 61,
+ "shapes": Array [
+ Object {
+ "_render": true,
+ "hd": false,
+ "ind": 0,
+ "ix": 1,
+ "ks": Object {
+ "a": 1,
+ "ix": 2,
+ "k": Array [
+ Object {
+ "i": Object {
+ "x": 0.631,
+ "y": 1,
+ },
+ "o": Object {
+ "x": 0.167,
+ "y": 0,
+ },
+ "s": Array [
+ Object {
+ "c": true,
+ "i": Array [
+ Array [
+ 10,
+ -35.761,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 7.761,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 47.761,
+ ],
+ Array [
+ -10,
+ -33,
+ ],
+ Array [
+ -7.761,
+ -38,
+ ],
+ Array [
+ 5,
+ -38,
+ ],
+ ],
+ "o": Array [
+ Array [
+ 10,
+ -33,
+ ],
+ Array [
+ 10,
+ 47.761,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -7.761,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ -35.761,
+ ],
+ Array [
+ -5,
+ -38,
+ ],
+ Array [
+ 7.761,
+ -38,
+ ],
+ ],
+ "v": Array [
+ Array [
+ 10,
+ -33,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ -33,
+ ],
+ Array [
+ -5,
+ -38,
+ ],
+ Array [
+ 5,
+ -38,
+ ],
+ ],
+ },
+ ],
+ "t": 0,
+ },
+ Object {
+ "i": Object {
+ "x": 0.667,
+ "y": 1,
+ },
+ "o": Object {
+ "x": 0.391,
+ "y": 0,
+ },
+ "s": Array [
+ Object {
+ "c": true,
+ "i": Array [
+ Array [
+ 10,
+ 1.2389999999999999,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 7.761,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 47.761,
+ ],
+ Array [
+ -10,
+ 4,
+ ],
+ Array [
+ -7.761,
+ -1,
+ ],
+ Array [
+ 5,
+ -1,
+ ],
+ ],
+ "o": Array [
+ Array [
+ 10,
+ 4,
+ ],
+ Array [
+ 10,
+ 47.761,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -7.761,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ 1.2389999999999999,
+ ],
+ Array [
+ -5,
+ -1,
+ ],
+ Array [
+ 7.761,
+ -1,
+ ],
+ ],
+ "v": Array [
+ Array [
+ 10,
+ 4,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ 4,
+ ],
+ Array [
+ -5,
+ -1,
+ ],
+ Array [
+ 5,
+ -1,
+ ],
+ ],
+ },
+ ],
+ "t": 13.846,
+ },
+ Object {
+ "i": Object {
+ "x": 0.88,
+ "y": 1,
+ },
+ "o": Object {
+ "x": 0.093,
+ "y": 0,
+ },
+ "s": Array [
+ Object {
+ "c": true,
+ "i": Array [
+ Array [
+ 10,
+ -35.761,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 7.761,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 47.761,
+ ],
+ Array [
+ -10,
+ -33,
+ ],
+ Array [
+ -7.761,
+ -38,
+ ],
+ Array [
+ 5,
+ -38,
+ ],
+ ],
+ "o": Array [
+ Array [
+ 10,
+ -33,
+ ],
+ Array [
+ 10,
+ 47.761,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -7.761,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ -35.761,
+ ],
+ Array [
+ -5,
+ -38,
+ ],
+ Array [
+ 7.761,
+ -38,
+ ],
+ ],
+ "v": Array [
+ Array [
+ 10,
+ -33,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ -33,
+ ],
+ Array [
+ -5,
+ -38,
+ ],
+ Array [
+ 5,
+ -38,
+ ],
+ ],
+ },
+ ],
+ "t": 27,
+ },
+ Object {
+ "i": Object {
+ "x": 0.873,
+ "y": 1,
+ },
+ "o": Object {
+ "x": 0.165,
+ "y": 0,
+ },
+ "s": Array [
+ Object {
+ "c": true,
+ "i": Array [
+ Array [
+ 10,
+ 9.114,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 7.761,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 47.761,
+ ],
+ Array [
+ -10,
+ 11.875,
+ ],
+ Array [
+ -7.761,
+ 6.875,
+ ],
+ Array [
+ 5,
+ 6.875,
+ ],
+ ],
+ "o": Array [
+ Array [
+ 10,
+ 11.875,
+ ],
+ Array [
+ 10,
+ 47.761,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -7.761,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ 9.114,
+ ],
+ Array [
+ -5,
+ 6.875,
+ ],
+ Array [
+ 7.761,
+ 6.875,
+ ],
+ ],
+ "v": Array [
+ Array [
+ 10,
+ 11.875,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ 11.875,
+ ],
+ Array [
+ -5,
+ 6.875,
+ ],
+ Array [
+ 5,
+ 6.875,
+ ],
+ ],
+ },
+ ],
+ "t": 45,
+ },
+ Object {
+ "s": Array [
+ Object {
+ "c": true,
+ "i": Array [
+ Array [
+ 10,
+ -35.761,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 7.761,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 47.761,
+ ],
+ Array [
+ -10,
+ -33,
+ ],
+ Array [
+ -7.761,
+ -38,
+ ],
+ Array [
+ 5,
+ -38,
+ ],
+ ],
+ "o": Array [
+ Array [
+ 10,
+ -33,
+ ],
+ Array [
+ 10,
+ 47.761,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -7.761,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ -35.761,
+ ],
+ Array [
+ -5,
+ -38,
+ ],
+ Array [
+ 7.761,
+ -38,
+ ],
+ ],
+ "v": Array [
+ Array [
+ 10,
+ -33,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ -33,
+ ],
+ Array [
+ -5,
+ -38,
+ ],
+ Array [
+ 5,
+ -38,
+ ],
+ ],
+ },
+ ],
+ "t": 60,
+ },
+ ],
+ },
+ "mn": "ADBE Vector Shape - Group",
+ "nm": "Path 1",
+ "ty": "sh",
+ },
+ Object {
+ "_render": true,
+ "bm": 0,
+ "c": Object {
+ "a": 0,
+ "ix": 4,
+ "k": Array [
+ 0.8901960784313725,
+ 0.7215686274509804,
+ 0.16470588235294117,
+ 1,
+ ],
+ },
+ "hd": false,
+ "mn": "ADBE Vector Graphic - Fill",
+ "nm": "Fill 1",
+ "o": Object {
+ "a": 0,
+ "ix": 5,
+ "k": 100,
+ },
+ "r": 1,
+ "ty": "fl",
+ },
+ ],
+ "sr": 1,
+ "st": 0,
+ "ty": 4,
+ },
+ Object {
+ "ao": 0,
+ "bm": 0,
+ "completed": true,
+ "ddd": 0,
+ "ind": 3,
+ "ip": 0,
+ "ks": Object {
+ "a": Object {
+ "a": 0,
+ "ix": 1,
+ "k": Array [
+ 0,
+ 50,
+ 0,
+ ],
+ },
+ "o": Object {
+ "a": 0,
+ "ix": 11,
+ "k": 100,
+ },
+ "p": Object {
+ "a": 0,
+ "ix": 2,
+ "k": Array [
+ 22.5,
+ 114,
+ 0,
+ ],
+ },
+ "r": Object {
+ "a": 0,
+ "ix": 10,
+ "k": 0,
+ },
+ "s": Object {
+ "a": 0,
+ "ix": 6,
+ "k": Array [
+ 100,
+ 100,
+ 100,
+ ],
+ },
+ },
+ "nm": "Shape Layer 4",
+ "op": 61,
+ "shapes": Array [
+ Object {
+ "_render": true,
+ "hd": false,
+ "ind": 0,
+ "ix": 1,
+ "ks": Object {
+ "a": 1,
+ "ix": 2,
+ "k": Array [
+ Object {
+ "i": Object {
+ "x": 0.562,
+ "y": 1,
+ },
+ "o": Object {
+ "x": 0.46,
+ "y": 0,
+ },
+ "s": Array [
+ Object {
+ "c": true,
+ "i": Array [
+ Array [
+ 10,
+ 26.489,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 7.761,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 47.761,
+ ],
+ Array [
+ -10,
+ 29.25,
+ ],
+ Array [
+ -7.761,
+ 24.25,
+ ],
+ Array [
+ 5,
+ 24.25,
+ ],
+ ],
+ "o": Array [
+ Array [
+ 10,
+ 29.25,
+ ],
+ Array [
+ 10,
+ 47.761,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -7.761,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ 26.489,
+ ],
+ Array [
+ -5,
+ 24.25,
+ ],
+ Array [
+ 7.761,
+ 24.25,
+ ],
+ ],
+ "v": Array [
+ Array [
+ 10,
+ 29.25,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ 29.25,
+ ],
+ Array [
+ -5,
+ 24.25,
+ ],
+ Array [
+ 5,
+ 24.25,
+ ],
+ ],
+ },
+ ],
+ "t": 0,
+ },
+ Object {
+ "i": Object {
+ "x": 0.505,
+ "y": 1,
+ },
+ "o": Object {
+ "x": 0.402,
+ "y": 0,
+ },
+ "s": Array [
+ Object {
+ "c": true,
+ "i": Array [
+ Array [
+ 10,
+ 10.239,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 7.761,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 47.761,
+ ],
+ Array [
+ -10,
+ 13,
+ ],
+ Array [
+ -7.761,
+ 8,
+ ],
+ Array [
+ 5,
+ 8,
+ ],
+ ],
+ "o": Array [
+ Array [
+ 10,
+ 13,
+ ],
+ Array [
+ 10,
+ 47.761,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -7.761,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ 10.239,
+ ],
+ Array [
+ -5,
+ 8,
+ ],
+ Array [
+ 7.761,
+ 8,
+ ],
+ ],
+ "v": Array [
+ Array [
+ 10,
+ 13,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ 13,
+ ],
+ Array [
+ -5,
+ 8,
+ ],
+ Array [
+ 5,
+ 8,
+ ],
+ ],
+ },
+ ],
+ "t": 15,
+ },
+ Object {
+ "i": Object {
+ "x": 0.407,
+ "y": 1,
+ },
+ "o": Object {
+ "x": 0.167,
+ "y": 0,
+ },
+ "s": Array [
+ Object {
+ "c": true,
+ "i": Array [
+ Array [
+ 10,
+ 26.489,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 7.761,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 47.761,
+ ],
+ Array [
+ -10,
+ 29.25,
+ ],
+ Array [
+ -7.761,
+ 24.25,
+ ],
+ Array [
+ 5,
+ 24.25,
+ ],
+ ],
+ "o": Array [
+ Array [
+ 10,
+ 29.25,
+ ],
+ Array [
+ 10,
+ 47.761,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -7.761,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ 26.489,
+ ],
+ Array [
+ -5,
+ 24.25,
+ ],
+ Array [
+ 7.761,
+ 24.25,
+ ],
+ ],
+ "v": Array [
+ Array [
+ 10,
+ 29.25,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ 29.25,
+ ],
+ Array [
+ -5,
+ 24.25,
+ ],
+ Array [
+ 5,
+ 24.25,
+ ],
+ ],
+ },
+ ],
+ "t": 32,
+ },
+ Object {
+ "i": Object {
+ "x": 0.599,
+ "y": 1,
+ },
+ "o": Object {
+ "x": 0.526,
+ "y": 0,
+ },
+ "s": Array [
+ Object {
+ "c": true,
+ "i": Array [
+ Array [
+ 10,
+ 0.23899999999999988,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 7.761,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 47.761,
+ ],
+ Array [
+ -10,
+ 3,
+ ],
+ Array [
+ -7.761,
+ -2,
+ ],
+ Array [
+ 5,
+ -2,
+ ],
+ ],
+ "o": Array [
+ Array [
+ 10,
+ 3,
+ ],
+ Array [
+ 10,
+ 47.761,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -7.761,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ 0.23899999999999988,
+ ],
+ Array [
+ -5,
+ -2,
+ ],
+ Array [
+ 7.761,
+ -2,
+ ],
+ ],
+ "v": Array [
+ Array [
+ 10,
+ 3,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ 3,
+ ],
+ Array [
+ -5,
+ -2,
+ ],
+ Array [
+ 5,
+ -2,
+ ],
+ ],
+ },
+ ],
+ "t": 47,
+ },
+ Object {
+ "s": Array [
+ Object {
+ "c": true,
+ "i": Array [
+ Array [
+ 10,
+ 26.489,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 7.761,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 47.761,
+ ],
+ Array [
+ -10,
+ 29.25,
+ ],
+ Array [
+ -7.761,
+ 24.25,
+ ],
+ Array [
+ 5,
+ 24.25,
+ ],
+ ],
+ "o": Array [
+ Array [
+ 10,
+ 29.25,
+ ],
+ Array [
+ 10,
+ 47.761,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -7.761,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ 26.489,
+ ],
+ Array [
+ -5,
+ 24.25,
+ ],
+ Array [
+ 7.761,
+ 24.25,
+ ],
+ ],
+ "v": Array [
+ Array [
+ 10,
+ 29.25,
+ ],
+ Array [
+ 10,
+ 45,
+ ],
+ Array [
+ 5,
+ 50,
+ ],
+ Array [
+ -5,
+ 50,
+ ],
+ Array [
+ -10,
+ 45,
+ ],
+ Array [
+ -10,
+ 29.25,
+ ],
+ Array [
+ -5,
+ 24.25,
+ ],
+ Array [
+ 5,
+ 24.25,
+ ],
+ ],
+ },
+ ],
+ "t": 60,
+ },
+ ],
+ },
+ "mn": "ADBE Vector Shape - Group",
+ "nm": "Path 1",
+ "ty": "sh",
+ },
+ Object {
+ "_render": true,
+ "bm": 0,
+ "c": Object {
+ "a": 0,
+ "ix": 4,
+ "k": Array [
+ 0.8901960784313725,
+ 0.7215686274509804,
+ 0.16470588235294117,
+ 1,
+ ],
+ },
+ "hd": false,
+ "mn": "ADBE Vector Graphic - Fill",
+ "nm": "Fill 1",
+ "o": Object {
+ "a": 0,
+ "ix": 5,
+ "k": 100,
+ },
+ "r": 1,
+ "ty": "fl",
+ },
+ ],
+ "sr": 1,
+ "st": 0,
+ "ty": 4,
+ },
+ ],
+ "markers": Array [],
+ "nm": "Comp 1",
+ "op": 60,
+ "v": "5.5.8",
+ "w": 128,
+ },
+ "autoplay": true,
+ "loop": true,
+ "rendererSettings": Object {
+ "preserveAspectRatio": "xMidYMid slice",
+ },
+ }
+ }
+ speed={1}
+ title=""
+ width={38}
+ >
+ <div
+ aria-label="animation"
+ onClick={[Function]}
+ role="button"
+ style={
+ Object {
+ "height": "38px",
+ "margin": "0 auto",
+ "outline": "none",
+ "overflow": "hidden",
+ "width": "38px",
+ }
+ }
+ tabIndex="0"
+ title=""
+ />
+ </Lottie>
+ </div>
+ <div
+ className="text-16-bold text text1"
+ >
+ export.modal_loading.text1
+ </div>
+ <div
+ className="text-16-normal text"
+ >
+ export.modal_loading.text2
+ </div>
+ <WithStyles(ForwardRef(Button))
+ aria-label="export.modal_loading.button_cancel"
+ classes={
+ Object {
+ "label": "text-16-bold",
+ "root": "btn-secondary-negative",
+ }
+ }
+ onClick={[Function]}
+ type="submit"
+ >
+ <ForwardRef(Button)
+ aria-label="export.modal_loading.button_cancel"
+ classes={
+ Object {
+ "colorInherit": "MuiButton-colorInherit",
+ "contained": "MuiButton-contained",
+ "containedPrimary": "MuiButton-containedPrimary",
+ "containedSecondary": "MuiButton-containedSecondary",
+ "containedSizeLarge": "MuiButton-containedSizeLarge",
+ "containedSizeSmall": "MuiButton-containedSizeSmall",
+ "disableElevation": "MuiButton-disableElevation",
+ "disabled": "Mui-disabled",
+ "endIcon": "MuiButton-endIcon",
+ "focusVisible": "Mui-focusVisible",
+ "fullWidth": "MuiButton-fullWidth",
+ "iconSizeLarge": "MuiButton-iconSizeLarge",
+ "iconSizeMedium": "MuiButton-iconSizeMedium",
+ "iconSizeSmall": "MuiButton-iconSizeSmall",
+ "label": "MuiButton-label text-16-bold",
+ "outlined": "MuiButton-outlined",
+ "outlinedPrimary": "MuiButton-outlinedPrimary",
+ "outlinedSecondary": "MuiButton-outlinedSecondary",
+ "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
+ "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
+ "root": "MuiButton-root btn-secondary-negative",
+ "sizeLarge": "MuiButton-sizeLarge",
+ "sizeSmall": "MuiButton-sizeSmall",
+ "startIcon": "MuiButton-startIcon",
+ "text": "MuiButton-text",
+ "textPrimary": "MuiButton-textPrimary",
+ "textSecondary": "MuiButton-textSecondary",
+ "textSizeLarge": "MuiButton-textSizeLarge",
+ "textSizeSmall": "MuiButton-textSizeSmall",
+ }
+ }
+ onClick={[Function]}
+ type="submit"
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-label="export.modal_loading.button_cancel"
+ className="MuiButton-root btn-secondary-negative MuiButton-text"
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ type="submit"
+ >
+ <ForwardRef(ButtonBase)
+ aria-label="export.modal_loading.button_cancel"
+ className="MuiButton-root btn-secondary-negative MuiButton-text"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ type="submit"
+ >
+ <button
+ aria-label="export.modal_loading.button_cancel"
+ className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
+ disabled={false}
+ onBlur={[Function]}
+ onClick={[Function]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
+ tabIndex={0}
+ type="submit"
+ >
+ <span
+ className="MuiButton-label text-16-bold"
+ >
+ export.modal_loading.button_cancel
+ </span>
+ <WithStyles(memo)
+ center={false}
+ >
+ <ForwardRef(TouchRipple)
+ center={false}
+ classes={
+ Object {
+ "child": "MuiTouchRipple-child",
+ "childLeaving": "MuiTouchRipple-childLeaving",
+ "childPulsate": "MuiTouchRipple-childPulsate",
+ "ripple": "MuiTouchRipple-ripple",
+ "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+ "rippleVisible": "MuiTouchRipple-rippleVisible",
+ "root": "MuiTouchRipple-root",
+ }
+ }
+ >
+ <span
+ className="MuiTouchRipple-root"
+ >
+ <TransitionGroup
+ childFactory={[Function]}
+ component={null}
+ exit={true}
+ />
+ </span>
+ </ForwardRef(TouchRipple)>
+ </WithStyles(memo)>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(Button)>
+ </WithStyles(ForwardRef(Button))>
+ </div>
+ </div>
+ </div>
+ </ForwardRef(Paper)>
+ </WithStyles(ForwardRef(Paper))>
+ </div>
+ </Transition>
+ </ForwardRef(Fade)>
+ <div
+ data-test="sentinelEnd"
+ tabIndex={0}
+ />
+ </Unstable_TrapFocus>
+ </div>
+ </Portal>
+ </ForwardRef(Portal)>
+ </ForwardRef(Modal)>
+ </ForwardRef(Dialog)>
+ </WithStyles(ForwardRef(Dialog))>
+ </ExportLoadingModal>
+</Provider>
+`;
diff --git a/src/components/Export/__snapshots__/exportStartModal.spec.tsx.snap b/src/components/Export/__snapshots__/exportStartModal.spec.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..543ec790c3bae74ee027b6467aec960754a79ed3
--- /dev/null
+++ b/src/components/Export/__snapshots__/exportStartModal.spec.tsx.snap
@@ -0,0 +1,1193 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`exportStartModal component should be rendered correctly 1`] = `
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
+ }
+>
+ <ExportStartModal
+ handleCloseClick={[MockFunction]}
+ handleDownloadClick={[MockFunction]}
+ open={true}
+ >
+ <WithStyles(ForwardRef(Dialog))
+ aria-labelledby="accessibility_title"
+ classes={
+ Object {
+ "paper": "modal-paper",
+ "root": "modal-root",
+ }
+ }
+ onClose={[MockFunction]}
+ open={true}
+ >
+ <ForwardRef(Dialog)
+ aria-labelledby="accessibility_title"
+ classes={
+ Object {
+ "container": "MuiDialog-container",
+ "paper": "MuiDialog-paper modal-paper",
+ "paperFullScreen": "MuiDialog-paperFullScreen",
+ "paperFullWidth": "MuiDialog-paperFullWidth",
+ "paperScrollBody": "MuiDialog-paperScrollBody",
+ "paperScrollPaper": "MuiDialog-paperScrollPaper",
+ "paperWidthFalse": "MuiDialog-paperWidthFalse",
+ "paperWidthLg": "MuiDialog-paperWidthLg",
+ "paperWidthMd": "MuiDialog-paperWidthMd",
+ "paperWidthSm": "MuiDialog-paperWidthSm",
+ "paperWidthXl": "MuiDialog-paperWidthXl",
+ "paperWidthXs": "MuiDialog-paperWidthXs",
+ "root": "MuiDialog-root modal-root",
+ "scrollBody": "MuiDialog-scrollBody",
+ "scrollPaper": "MuiDialog-scrollPaper",
+ }
+ }
+ onClose={[MockFunction]}
+ open={true}
+ >
+ <ForwardRef(Modal)
+ BackdropComponent={
+ Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "Naked": Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "propTypes": Object {
+ "children": [Function],
+ "className": [Function],
+ "classes": [Function],
+ "invisible": [Function],
+ "open": [Function],
+ "transitionDuration": [Function],
+ },
+ "render": [Function],
+ },
+ "displayName": "WithStyles(ForwardRef(Backdrop))",
+ "options": Object {
+ "defaultTheme": Object {
+ "breakpoints": Object {
+ "between": [Function],
+ "down": [Function],
+ "keys": Array [
+ "xs",
+ "sm",
+ "md",
+ "lg",
+ "xl",
+ ],
+ "only": [Function],
+ "up": [Function],
+ "values": Object {
+ "lg": 1280,
+ "md": 960,
+ "sm": 600,
+ "xl": 1920,
+ "xs": 0,
+ },
+ "width": [Function],
+ },
+ "direction": "ltr",
+ "mixins": Object {
+ "gutters": [Function],
+ "toolbar": Object {
+ "@media (min-width:0px) and (orientation: landscape)": Object {
+ "minHeight": 48,
+ },
+ "@media (min-width:600px)": Object {
+ "minHeight": 64,
+ },
+ "minHeight": 56,
+ },
+ },
+ "overrides": Object {},
+ "palette": Object {
+ "action": Object {
+ "activatedOpacity": 0.12,
+ "active": "rgba(0, 0, 0, 0.54)",
+ "disabled": "rgba(0, 0, 0, 0.26)",
+ "disabledBackground": "rgba(0, 0, 0, 0.12)",
+ "disabledOpacity": 0.38,
+ "focus": "rgba(0, 0, 0, 0.12)",
+ "focusOpacity": 0.12,
+ "hover": "rgba(0, 0, 0, 0.04)",
+ "hoverOpacity": 0.04,
+ "selected": "rgba(0, 0, 0, 0.08)",
+ "selectedOpacity": 0.08,
+ },
+ "augmentColor": [Function],
+ "background": Object {
+ "default": "#fafafa",
+ "paper": "#fff",
+ },
+ "common": Object {
+ "black": "#000",
+ "white": "#fff",
+ },
+ "contrastThreshold": 3,
+ "divider": "rgba(0, 0, 0, 0.12)",
+ "error": Object {
+ "contrastText": "#fff",
+ "dark": "#d32f2f",
+ "light": "#e57373",
+ "main": "#f44336",
+ },
+ "getContrastText": [Function],
+ "grey": Object {
+ "100": "#f5f5f5",
+ "200": "#eeeeee",
+ "300": "#e0e0e0",
+ "400": "#bdbdbd",
+ "50": "#fafafa",
+ "500": "#9e9e9e",
+ "600": "#757575",
+ "700": "#616161",
+ "800": "#424242",
+ "900": "#212121",
+ "A100": "#d5d5d5",
+ "A200": "#aaaaaa",
+ "A400": "#303030",
+ "A700": "#616161",
+ },
+ "info": Object {
+ "contrastText": "#fff",
+ "dark": "#1976d2",
+ "light": "#64b5f6",
+ "main": "#2196f3",
+ },
+ "primary": Object {
+ "contrastText": "#fff",
+ "dark": "#303f9f",
+ "light": "#7986cb",
+ "main": "#3f51b5",
+ },
+ "secondary": Object {
+ "contrastText": "#fff",
+ "dark": "#c51162",
+ "light": "#ff4081",
+ "main": "#f50057",
+ },
+ "success": Object {
+ "contrastText": "rgba(0, 0, 0, 0.87)",
+ "dark": "#388e3c",
+ "light": "#81c784",
+ "main": "#4caf50",
+ },
+ "text": Object {
+ "disabled": "rgba(0, 0, 0, 0.38)",
+ "hint": "rgba(0, 0, 0, 0.38)",
+ "primary": "rgba(0, 0, 0, 0.87)",
+ "secondary": "rgba(0, 0, 0, 0.54)",
+ },
+ "tonalOffset": 0.2,
+ "type": "light",
+ "warning": Object {
+ "contrastText": "rgba(0, 0, 0, 0.87)",
+ "dark": "#f57c00",
+ "light": "#ffb74d",
+ "main": "#ff9800",
+ },
+ },
+ "props": Object {},
+ "shadows": Array [
+ "none",
+ "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
+ "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
+ "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
+ "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
+ "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
+ "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
+ "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
+ "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
+ "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
+ "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
+ "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
+ "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
+ "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
+ "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
+ "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
+ "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
+ "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
+ "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
+ "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
+ "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
+ "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
+ "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
+ "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
+ "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
+ ],
+ "shape": Object {
+ "borderRadius": 4,
+ },
+ "spacing": [Function],
+ "transitions": Object {
+ "create": [Function],
+ "duration": Object {
+ "complex": 375,
+ "enteringScreen": 225,
+ "leavingScreen": 195,
+ "short": 250,
+ "shorter": 200,
+ "shortest": 150,
+ "standard": 300,
+ },
+ "easing": Object {
+ "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
+ "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
+ "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
+ "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
+ },
+ "getAutoHeightDuration": [Function],
+ },
+ "typography": Object {
+ "body1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00938em",
+ "lineHeight": 1.5,
+ },
+ "body2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.01071em",
+ "lineHeight": 1.43,
+ },
+ "button": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.02857em",
+ "lineHeight": 1.75,
+ "textTransform": "uppercase",
+ },
+ "caption": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.75rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.03333em",
+ "lineHeight": 1.66,
+ },
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": 14,
+ "fontWeightBold": 700,
+ "fontWeightLight": 300,
+ "fontWeightMedium": 500,
+ "fontWeightRegular": 400,
+ "h1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "6rem",
+ "fontWeight": 300,
+ "letterSpacing": "-0.01562em",
+ "lineHeight": 1.167,
+ },
+ "h2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "3.75rem",
+ "fontWeight": 300,
+ "letterSpacing": "-0.00833em",
+ "lineHeight": 1.2,
+ },
+ "h3": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "3rem",
+ "fontWeight": 400,
+ "letterSpacing": "0em",
+ "lineHeight": 1.167,
+ },
+ "h4": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "2.125rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00735em",
+ "lineHeight": 1.235,
+ },
+ "h5": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1.5rem",
+ "fontWeight": 400,
+ "letterSpacing": "0em",
+ "lineHeight": 1.334,
+ },
+ "h6": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1.25rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.0075em",
+ "lineHeight": 1.6,
+ },
+ "htmlFontSize": 16,
+ "overline": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.75rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.08333em",
+ "lineHeight": 2.66,
+ "textTransform": "uppercase",
+ },
+ "pxToRem": [Function],
+ "round": [Function],
+ "subtitle1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00938em",
+ "lineHeight": 1.75,
+ },
+ "subtitle2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.00714em",
+ "lineHeight": 1.57,
+ },
+ },
+ "zIndex": Object {
+ "appBar": 1100,
+ "drawer": 1200,
+ "mobileStepper": 1000,
+ "modal": 1300,
+ "snackbar": 1400,
+ "speedDial": 1050,
+ "tooltip": 1500,
+ },
+ },
+ "name": "MuiBackdrop",
+ },
+ "propTypes": Object {
+ "classes": [Function],
+ "innerRef": [Function],
+ },
+ "render": [Function],
+ "useStyles": [Function],
+ }
+ }
+ BackdropProps={
+ Object {
+ "transitionDuration": Object {
+ "enter": 225,
+ "exit": 195,
+ },
+ }
+ }
+ className="MuiDialog-root modal-root"
+ closeAfterTransition={true}
+ disableEscapeKeyDown={false}
+ onClose={[MockFunction]}
+ open={true}
+ >
+ <ForwardRef(Portal)
+ disablePortal={false}
+ >
+ <Portal
+ containerInfo={
+ <body
+ style="padding-right: 0px; overflow: hidden;"
+ >
+ <div
+ class="MuiDialog-root modal-root"
+ role="presentation"
+ style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
+ >
+ <div
+ aria-hidden="true"
+ class="MuiBackdrop-root"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ />
+ <div
+ data-test="sentinelStart"
+ tabindex="0"
+ />
+ <div
+ class="MuiDialog-container MuiDialog-scrollPaper"
+ role="none presentation"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ tabindex="-1"
+ >
+ <div
+ aria-labelledby="accessibility_title"
+ class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
+ >
+ <div
+ id="accessibility-title"
+ >
+ export.modal_start.accessibility_title
+ </div>
+ <div
+ class="modal-start-root"
+ >
+ <div>
+ <button
+ aria-label="export.button_close"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
+ >
+ <svg
+ class="styles__icon___23x3R"
+ height="18"
+ width="18"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ <div
+ class="content"
+ >
+ <div
+ class="icon-main"
+ >
+ <svg
+ class="styles__icon___23x3R"
+ height="48"
+ width="48"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </div>
+ <div
+ class="text-16-bold text text1"
+ >
+ export.modal_start.text1
+ </div>
+ <div
+ class="text-16-normal text"
+ >
+ export.modal_start.text2
+ <br />
+ export.modal_start.text3
+ </div>
+ <div
+ class="buttons"
+ >
+ <button
+ aria-label="export.modal_start.button_cancel"
+ class="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
+ tabindex="0"
+ type="submit"
+ >
+ <span
+ class="MuiButton-label text-16-bold"
+ >
+ export.modal_start.button_cancel
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
+ aria-label="export.button_download"
+ class="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
+ tabindex="0"
+ type="submit"
+ >
+ <span
+ class="MuiButton-label text-16-bold"
+ >
+ export.button_download
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div
+ data-test="sentinelEnd"
+ tabindex="0"
+ />
+ </div>
+ </body>
+ }
+ >
+ <div
+ className="MuiDialog-root modal-root"
+ onKeyDown={[Function]}
+ role="presentation"
+ style={
+ Object {
+ "bottom": 0,
+ "left": 0,
+ "position": "fixed",
+ "right": 0,
+ "top": 0,
+ "zIndex": 1300,
+ }
+ }
+ >
+ <WithStyles(ForwardRef(Backdrop))
+ onClick={[Function]}
+ open={true}
+ transitionDuration={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ >
+ <ForwardRef(Backdrop)
+ classes={
+ Object {
+ "invisible": "MuiBackdrop-invisible",
+ "root": "MuiBackdrop-root",
+ }
+ }
+ onClick={[Function]}
+ open={true}
+ transitionDuration={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ >
+ <ForwardRef(Fade)
+ in={true}
+ onClick={[Function]}
+ timeout={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ >
+ <Transition
+ appear={true}
+ enter={true}
+ exit={true}
+ in={true}
+ mountOnEnter={false}
+ onClick={[Function]}
+ onEnter={[Function]}
+ onEntered={[Function]}
+ onEntering={[Function]}
+ onExit={[Function]}
+ onExited={[Function]}
+ onExiting={[Function]}
+ timeout={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ unmountOnExit={false}
+ >
+ <div
+ aria-hidden={true}
+ className="MuiBackdrop-root"
+ onClick={[Function]}
+ style={
+ Object {
+ "opacity": 1,
+ "visibility": undefined,
+ }
+ }
+ />
+ </Transition>
+ </ForwardRef(Fade)>
+ </ForwardRef(Backdrop)>
+ </WithStyles(ForwardRef(Backdrop))>
+ <Unstable_TrapFocus
+ disableAutoFocus={false}
+ disableEnforceFocus={false}
+ disableRestoreFocus={false}
+ getDoc={[Function]}
+ isEnabled={[Function]}
+ open={true}
+ >
+ <div
+ data-test="sentinelStart"
+ tabIndex={0}
+ />
+ <ForwardRef(Fade)
+ appear={true}
+ in={true}
+ onEnter={[Function]}
+ onExited={[Function]}
+ role="none presentation"
+ tabIndex="-1"
+ timeout={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ >
+ <Transition
+ appear={true}
+ enter={true}
+ exit={true}
+ in={true}
+ mountOnEnter={false}
+ onEnter={[Function]}
+ onEntered={[Function]}
+ onEntering={[Function]}
+ onExit={[Function]}
+ onExited={[Function]}
+ onExiting={[Function]}
+ role="none presentation"
+ tabIndex="-1"
+ timeout={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ unmountOnExit={false}
+ >
+ <div
+ className="MuiDialog-container MuiDialog-scrollPaper"
+ onMouseDown={[Function]}
+ onMouseUp={[Function]}
+ role="none presentation"
+ style={
+ Object {
+ "opacity": 1,
+ "visibility": undefined,
+ }
+ }
+ tabIndex="-1"
+ >
+ <WithStyles(ForwardRef(Paper))
+ aria-labelledby="accessibility_title"
+ className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
+ elevation={24}
+ role="dialog"
+ >
+ <ForwardRef(Paper)
+ aria-labelledby="accessibility_title"
+ className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
+ classes={
+ Object {
+ "elevation0": "MuiPaper-elevation0",
+ "elevation1": "MuiPaper-elevation1",
+ "elevation10": "MuiPaper-elevation10",
+ "elevation11": "MuiPaper-elevation11",
+ "elevation12": "MuiPaper-elevation12",
+ "elevation13": "MuiPaper-elevation13",
+ "elevation14": "MuiPaper-elevation14",
+ "elevation15": "MuiPaper-elevation15",
+ "elevation16": "MuiPaper-elevation16",
+ "elevation17": "MuiPaper-elevation17",
+ "elevation18": "MuiPaper-elevation18",
+ "elevation19": "MuiPaper-elevation19",
+ "elevation2": "MuiPaper-elevation2",
+ "elevation20": "MuiPaper-elevation20",
+ "elevation21": "MuiPaper-elevation21",
+ "elevation22": "MuiPaper-elevation22",
+ "elevation23": "MuiPaper-elevation23",
+ "elevation24": "MuiPaper-elevation24",
+ "elevation3": "MuiPaper-elevation3",
+ "elevation4": "MuiPaper-elevation4",
+ "elevation5": "MuiPaper-elevation5",
+ "elevation6": "MuiPaper-elevation6",
+ "elevation7": "MuiPaper-elevation7",
+ "elevation8": "MuiPaper-elevation8",
+ "elevation9": "MuiPaper-elevation9",
+ "outlined": "MuiPaper-outlined",
+ "root": "MuiPaper-root",
+ "rounded": "MuiPaper-rounded",
+ }
+ }
+ elevation={24}
+ role="dialog"
+ >
+ <div
+ aria-labelledby="accessibility_title"
+ className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
+ >
+ <div
+ id="accessibility-title"
+ >
+ export.modal_start.accessibility_title
+ </div>
+ <div
+ className="modal-start-root"
+ >
+ <div
+ onClick={[MockFunction]}
+ >
+ <WithStyles(ForwardRef(IconButton))
+ aria-label="export.button_close"
+ className="modal-paper-close-button"
+ onClick={[MockFunction]}
+ >
+ <ForwardRef(IconButton)
+ aria-label="export.button_close"
+ className="modal-paper-close-button"
+ classes={
+ Object {
+ "colorInherit": "MuiIconButton-colorInherit",
+ "colorPrimary": "MuiIconButton-colorPrimary",
+ "colorSecondary": "MuiIconButton-colorSecondary",
+ "disabled": "Mui-disabled",
+ "edgeEnd": "MuiIconButton-edgeEnd",
+ "edgeStart": "MuiIconButton-edgeStart",
+ "label": "MuiIconButton-label",
+ "root": "MuiIconButton-root",
+ "sizeSmall": "MuiIconButton-sizeSmall",
+ }
+ }
+ onClick={[MockFunction]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-label="export.button_close"
+ centerRipple={true}
+ className="MuiIconButton-root modal-paper-close-button"
+ disabled={false}
+ focusRipple={true}
+ onClick={[MockFunction]}
+ >
+ <ForwardRef(ButtonBase)
+ aria-label="export.button_close"
+ centerRipple={true}
+ className="MuiIconButton-root modal-paper-close-button"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ disabled={false}
+ focusRipple={true}
+ onClick={[MockFunction]}
+ >
+ <button
+ aria-label="export.button_close"
+ className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+ disabled={false}
+ onBlur={[Function]}
+ onClick={[MockFunction]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
+ tabIndex={0}
+ type="button"
+ >
+ <span
+ className="MuiIconButton-label"
+ >
+ <Icon
+ icon="test-file-stub"
+ size={18}
+ spin={false}
+ >
+ <Component
+ className="styles__icon___23x3R"
+ height={18}
+ style={Object {}}
+ width={18}
+ >
+ <svg
+ className="styles__icon___23x3R"
+ height={18}
+ style={Object {}}
+ width={18}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </span>
+ <WithStyles(memo)
+ center={true}
+ >
+ <ForwardRef(TouchRipple)
+ center={true}
+ classes={
+ Object {
+ "child": "MuiTouchRipple-child",
+ "childLeaving": "MuiTouchRipple-childLeaving",
+ "childPulsate": "MuiTouchRipple-childPulsate",
+ "ripple": "MuiTouchRipple-ripple",
+ "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+ "rippleVisible": "MuiTouchRipple-rippleVisible",
+ "root": "MuiTouchRipple-root",
+ }
+ }
+ >
+ <span
+ className="MuiTouchRipple-root"
+ >
+ <TransitionGroup
+ childFactory={[Function]}
+ component={null}
+ exit={true}
+ />
+ </span>
+ </ForwardRef(TouchRipple)>
+ </WithStyles(memo)>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(IconButton)>
+ </WithStyles(ForwardRef(IconButton))>
+ </div>
+ <div
+ className="content"
+ >
+ <div
+ className="icon-main"
+ >
+ <Icon
+ icon="test-file-stub"
+ size={48}
+ spin={false}
+ >
+ <Component
+ className="styles__icon___23x3R"
+ height={48}
+ style={Object {}}
+ width={48}
+ >
+ <svg
+ className="styles__icon___23x3R"
+ height={48}
+ style={Object {}}
+ width={48}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </div>
+ <div
+ className="text-16-bold text text1"
+ >
+ export.modal_start.text1
+ </div>
+ <div
+ className="text-16-normal text"
+ >
+ export.modal_start.text2
+ <br />
+ export.modal_start.text3
+ </div>
+ <div
+ className="buttons"
+ >
+ <WithStyles(ForwardRef(Button))
+ aria-label="export.modal_start.button_cancel"
+ classes={
+ Object {
+ "label": "text-16-bold",
+ "root": "btn-secondary-negative",
+ }
+ }
+ onClick={[MockFunction]}
+ type="submit"
+ >
+ <ForwardRef(Button)
+ aria-label="export.modal_start.button_cancel"
+ classes={
+ Object {
+ "colorInherit": "MuiButton-colorInherit",
+ "contained": "MuiButton-contained",
+ "containedPrimary": "MuiButton-containedPrimary",
+ "containedSecondary": "MuiButton-containedSecondary",
+ "containedSizeLarge": "MuiButton-containedSizeLarge",
+ "containedSizeSmall": "MuiButton-containedSizeSmall",
+ "disableElevation": "MuiButton-disableElevation",
+ "disabled": "Mui-disabled",
+ "endIcon": "MuiButton-endIcon",
+ "focusVisible": "Mui-focusVisible",
+ "fullWidth": "MuiButton-fullWidth",
+ "iconSizeLarge": "MuiButton-iconSizeLarge",
+ "iconSizeMedium": "MuiButton-iconSizeMedium",
+ "iconSizeSmall": "MuiButton-iconSizeSmall",
+ "label": "MuiButton-label text-16-bold",
+ "outlined": "MuiButton-outlined",
+ "outlinedPrimary": "MuiButton-outlinedPrimary",
+ "outlinedSecondary": "MuiButton-outlinedSecondary",
+ "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
+ "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
+ "root": "MuiButton-root btn-secondary-negative",
+ "sizeLarge": "MuiButton-sizeLarge",
+ "sizeSmall": "MuiButton-sizeSmall",
+ "startIcon": "MuiButton-startIcon",
+ "text": "MuiButton-text",
+ "textPrimary": "MuiButton-textPrimary",
+ "textSecondary": "MuiButton-textSecondary",
+ "textSizeLarge": "MuiButton-textSizeLarge",
+ "textSizeSmall": "MuiButton-textSizeSmall",
+ }
+ }
+ onClick={[MockFunction]}
+ type="submit"
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-label="export.modal_start.button_cancel"
+ className="MuiButton-root btn-secondary-negative MuiButton-text"
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[MockFunction]}
+ type="submit"
+ >
+ <ForwardRef(ButtonBase)
+ aria-label="export.modal_start.button_cancel"
+ className="MuiButton-root btn-secondary-negative MuiButton-text"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[MockFunction]}
+ type="submit"
+ >
+ <button
+ aria-label="export.modal_start.button_cancel"
+ className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
+ disabled={false}
+ onBlur={[Function]}
+ onClick={[MockFunction]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
+ tabIndex={0}
+ type="submit"
+ >
+ <span
+ className="MuiButton-label text-16-bold"
+ >
+ export.modal_start.button_cancel
+ </span>
+ <WithStyles(memo)
+ center={false}
+ >
+ <ForwardRef(TouchRipple)
+ center={false}
+ classes={
+ Object {
+ "child": "MuiTouchRipple-child",
+ "childLeaving": "MuiTouchRipple-childLeaving",
+ "childPulsate": "MuiTouchRipple-childPulsate",
+ "ripple": "MuiTouchRipple-ripple",
+ "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+ "rippleVisible": "MuiTouchRipple-rippleVisible",
+ "root": "MuiTouchRipple-root",
+ }
+ }
+ >
+ <span
+ className="MuiTouchRipple-root"
+ >
+ <TransitionGroup
+ childFactory={[Function]}
+ component={null}
+ exit={true}
+ />
+ </span>
+ </ForwardRef(TouchRipple)>
+ </WithStyles(memo)>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(Button)>
+ </WithStyles(ForwardRef(Button))>
+ <WithStyles(ForwardRef(Button))
+ aria-label="export.button_download"
+ classes={
+ Object {
+ "label": "text-16-bold",
+ "root": "btn-highlight",
+ }
+ }
+ onClick={[MockFunction]}
+ type="submit"
+ >
+ <ForwardRef(Button)
+ aria-label="export.button_download"
+ classes={
+ Object {
+ "colorInherit": "MuiButton-colorInherit",
+ "contained": "MuiButton-contained",
+ "containedPrimary": "MuiButton-containedPrimary",
+ "containedSecondary": "MuiButton-containedSecondary",
+ "containedSizeLarge": "MuiButton-containedSizeLarge",
+ "containedSizeSmall": "MuiButton-containedSizeSmall",
+ "disableElevation": "MuiButton-disableElevation",
+ "disabled": "Mui-disabled",
+ "endIcon": "MuiButton-endIcon",
+ "focusVisible": "Mui-focusVisible",
+ "fullWidth": "MuiButton-fullWidth",
+ "iconSizeLarge": "MuiButton-iconSizeLarge",
+ "iconSizeMedium": "MuiButton-iconSizeMedium",
+ "iconSizeSmall": "MuiButton-iconSizeSmall",
+ "label": "MuiButton-label text-16-bold",
+ "outlined": "MuiButton-outlined",
+ "outlinedPrimary": "MuiButton-outlinedPrimary",
+ "outlinedSecondary": "MuiButton-outlinedSecondary",
+ "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
+ "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
+ "root": "MuiButton-root btn-highlight",
+ "sizeLarge": "MuiButton-sizeLarge",
+ "sizeSmall": "MuiButton-sizeSmall",
+ "startIcon": "MuiButton-startIcon",
+ "text": "MuiButton-text",
+ "textPrimary": "MuiButton-textPrimary",
+ "textSecondary": "MuiButton-textSecondary",
+ "textSizeLarge": "MuiButton-textSizeLarge",
+ "textSizeSmall": "MuiButton-textSizeSmall",
+ }
+ }
+ onClick={[MockFunction]}
+ type="submit"
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-label="export.button_download"
+ className="MuiButton-root btn-highlight MuiButton-text"
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[MockFunction]}
+ type="submit"
+ >
+ <ForwardRef(ButtonBase)
+ aria-label="export.button_download"
+ className="MuiButton-root btn-highlight MuiButton-text"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[MockFunction]}
+ type="submit"
+ >
+ <button
+ aria-label="export.button_download"
+ className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
+ disabled={false}
+ onBlur={[Function]}
+ onClick={[MockFunction]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
+ tabIndex={0}
+ type="submit"
+ >
+ <span
+ className="MuiButton-label text-16-bold"
+ >
+ export.button_download
+ </span>
+ <WithStyles(memo)
+ center={false}
+ >
+ <ForwardRef(TouchRipple)
+ center={false}
+ classes={
+ Object {
+ "child": "MuiTouchRipple-child",
+ "childLeaving": "MuiTouchRipple-childLeaving",
+ "childPulsate": "MuiTouchRipple-childPulsate",
+ "ripple": "MuiTouchRipple-ripple",
+ "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+ "rippleVisible": "MuiTouchRipple-rippleVisible",
+ "root": "MuiTouchRipple-root",
+ }
+ }
+ >
+ <span
+ className="MuiTouchRipple-root"
+ >
+ <TransitionGroup
+ childFactory={[Function]}
+ component={null}
+ exit={true}
+ />
+ </span>
+ </ForwardRef(TouchRipple)>
+ </WithStyles(memo)>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(Button)>
+ </WithStyles(ForwardRef(Button))>
+ </div>
+ </div>
+ </div>
+ </div>
+ </ForwardRef(Paper)>
+ </WithStyles(ForwardRef(Paper))>
+ </div>
+ </Transition>
+ </ForwardRef(Fade)>
+ <div
+ data-test="sentinelEnd"
+ tabIndex={0}
+ />
+ </Unstable_TrapFocus>
+ </div>
+ </Portal>
+ </ForwardRef(Portal)>
+ </ForwardRef(Modal)>
+ </ForwardRef(Dialog)>
+ </WithStyles(ForwardRef(Dialog))>
+ </ExportStartModal>
+</Provider>
+`;
diff --git a/src/components/Export/exportDoneModal.scss b/src/components/Export/exportDoneModal.scss
new file mode 100644
index 0000000000000000000000000000000000000000..10ed1cd2819fc8d64d6c5a3c661a306feace376e
--- /dev/null
+++ b/src/components/Export/exportDoneModal.scss
@@ -0,0 +1,22 @@
+@import 'src/styles/base/color';
+
+.modal-done-root {
+ .content {
+ text-align: center;
+ padding-top: 2rem;
+ .text {
+ margin: 2rem 0 0;
+ color: $grey-bright;
+ }
+ .text1 {
+ margin-bottom: 2rem;
+ color: $gold-shadow;
+ }
+ .error1 {
+ color: $red-primary;
+ }
+ button {
+ height: 40px;
+ }
+ }
+}
diff --git a/src/components/Export/exportDoneModal.spec.tsx b/src/components/Export/exportDoneModal.spec.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3cedb4649cc8a0e35800b3d50fad817fab7b45a6
--- /dev/null
+++ b/src/components/Export/exportDoneModal.spec.tsx
@@ -0,0 +1,68 @@
+import React from 'react'
+import { Provider } from 'react-redux'
+import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
+import {
+ createMockStore,
+ mockInitialEcolyoState,
+} from '../../../tests/__mocks__/store'
+import { Button } from '@material-ui/core'
+import ExportDoneModal from 'components/Export/exportDoneModal'
+
+jest.mock('cozy-ui/transpiled/react/I18n', () => {
+ return {
+ useI18n: jest.fn(() => {
+ return {
+ t: (str: string) => str,
+ }
+ }),
+ }
+})
+
+const mockHandleClose = jest.fn()
+
+describe('exportDoneModal component', () => {
+ let store: any
+ beforeEach(() => {
+ store = createMockStore(mockInitialEcolyoState)
+ })
+
+ it('should be rendered correctly', () => {
+ const wrapper = mount(
+ <Provider store={store}>
+ <ExportDoneModal
+ open={true}
+ error={false}
+ handleCloseClick={mockHandleClose}
+ />
+ </Provider>
+ )
+ expect(toJson(wrapper)).toMatchSnapshot()
+ })
+
+ it('should display error message', () => {
+ const wrapper = mount(
+ <Provider store={store}>
+ <ExportDoneModal
+ open={true}
+ error={true}
+ handleCloseClick={mockHandleClose}
+ />
+ </Provider>
+ )
+ })
+
+ it('should close modal ', () => {
+ const wrapper = mount(
+ <Provider store={store}>
+ <ExportDoneModal
+ open={true}
+ error={false}
+ handleCloseClick={mockHandleClose}
+ />
+ </Provider>
+ )
+ wrapper.find(Button).first().simulate('click')
+ expect(mockHandleClose).toHaveBeenCalledTimes(1)
+ })
+})
diff --git a/src/components/Export/exportDoneModal.tsx b/src/components/Export/exportDoneModal.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..94c27041689b8cbddc2eb00e279605f42d2870bf
--- /dev/null
+++ b/src/components/Export/exportDoneModal.tsx
@@ -0,0 +1,96 @@
+import React from 'react'
+import './exportDoneModal.scss'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Dialog from '@material-ui/core/Dialog'
+import CloseIcon from 'assets/icons/ico/close.svg'
+import { Button, IconButton } from '@material-ui/core'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import exportDone from 'assets/icons/ico/exportDone.svg'
+import warnCross from 'assets/icons/ico/warn-cross.svg'
+
+interface ExportDoneModalProps {
+ open: boolean
+ error: boolean
+ handleCloseClick: () => void
+}
+
+const ExportDoneModal: React.FC<ExportDoneModalProps> = ({
+ open,
+ error,
+ handleCloseClick,
+}: ExportDoneModalProps) => {
+ const { t } = useI18n()
+
+ return (
+ <Dialog
+ open={open}
+ onClose={handleCloseClick}
+ aria-labelledby={'accessibility-title'}
+ classes={{
+ root: 'modal-root',
+ paper: 'modal-paper',
+ }}
+ >
+ <div id={'accessibility-title'}>
+ {t('export.modal_done.accessibility_title')}
+ </div>
+
+ <div className="modal-done-root">
+ <div onClick={handleCloseClick}>
+ <IconButton
+ aria-label={t('export.button_close')}
+ className="modal-paper-close-button"
+ onClick={handleCloseClick}
+ >
+ <Icon icon={CloseIcon} size={18} />
+ </IconButton>
+ </div>
+
+ <div className="content">
+ <div className="icon-main">
+ <Icon icon={error ? warnCross : exportDone} size={44} />
+ </div>
+ {!error && (
+ <>
+ <div className="text-16-bold text text1">
+ {t('export.modal_done.text1')}
+ </div>
+ <div className="text-16-normal text">
+ {t('export.modal_done.text2')}
+ </div>
+ </>
+ )}
+ {error && (
+ <>
+ <div className="text-20-bold text error1">
+ {t('export.modal_done.error1')}
+ </div>
+ <div className="text-16-bold text">
+ {t('export.modal_done.error2')}
+ </div>
+ <div className="text-16-normal text">
+ {t('export.modal_done.error3')}
+ </div>
+ </>
+ )}
+
+ <Button
+ aria-label={t('export.modal_done.button_close')}
+ onClick={handleCloseClick}
+ classes={{
+ root: 'btn-highlight',
+ label: 'text-16-bold',
+ }}
+ type="submit"
+ >
+ {error
+ ? t('export.modal_done.button_close_error')
+ : t('export.modal_done.button_close')}
+ </Button>
+ </div>
+ </div>
+ </Dialog>
+ )
+}
+
+export default ExportDoneModal
diff --git a/src/components/Export/exportLoadingModal.scss b/src/components/Export/exportLoadingModal.scss
new file mode 100644
index 0000000000000000000000000000000000000000..69f583deeb76530f18b82cb2fe4816e2394947ab
--- /dev/null
+++ b/src/components/Export/exportLoadingModal.scss
@@ -0,0 +1,18 @@
+@import 'src/styles/base/color';
+
+.modal-loading-root {
+ .content {
+ text-align: center;
+ padding-top: 2rem;
+ .text {
+ color: $grey-bright;
+ }
+ .text1 {
+ margin: 2rem 0;
+ color: $gold-shadow;
+ }
+ button {
+ height: 40px;
+ }
+ }
+}
diff --git a/src/components/Export/exportLoadingModal.spec.tsx b/src/components/Export/exportLoadingModal.spec.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..904424ba61d16904d6c788a2fe0770ead1462b56
--- /dev/null
+++ b/src/components/Export/exportLoadingModal.spec.tsx
@@ -0,0 +1,60 @@
+import React from 'react'
+import { Provider } from 'react-redux'
+import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
+import {
+ createMockStore,
+ mockInitialEcolyoState,
+} from '../../../tests/__mocks__/store'
+import { Button } from '@material-ui/core'
+import ExportLoadingModal from 'components/Export/exportLoadingModal'
+
+jest.mock('cozy-ui/transpiled/react/I18n', () => {
+ return {
+ useI18n: jest.fn(() => {
+ return {
+ t: (str: string) => str,
+ }
+ }),
+ }
+})
+
+const mockHandleClose = jest.fn()
+const mockHandleDone = jest.fn()
+const mockSelectedFluids: Array<any> = [0, 1, 2]
+
+describe('ExportLoadingModal component', () => {
+ let store: any
+ beforeEach(() => {
+ store = createMockStore(mockInitialEcolyoState)
+ })
+
+ it('should be rendered correctly', () => {
+ const wrapper = mount(
+ <Provider store={store}>
+ <ExportLoadingModal
+ open={true}
+ handleCloseClick={mockHandleClose}
+ handleDone={mockHandleDone}
+ selectedFluids={mockSelectedFluids}
+ />
+ </Provider>
+ )
+ expect(toJson(wrapper)).toMatchSnapshot()
+ })
+
+ it('should cancel download ', () => {
+ const wrapper = mount(
+ <Provider store={store}>
+ <ExportLoadingModal
+ open={true}
+ handleCloseClick={mockHandleClose}
+ handleDone={mockHandleDone}
+ selectedFluids={mockSelectedFluids}
+ />
+ </Provider>
+ )
+ wrapper.find(Button).first().simulate('click')
+ expect(mockHandleClose).toHaveBeenCalledTimes(1)
+ })
+})
diff --git a/src/components/Export/exportLoadingModal.tsx b/src/components/Export/exportLoadingModal.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5c0d71217cbb38bce97f9953bad5ed4688bf469b
--- /dev/null
+++ b/src/components/Export/exportLoadingModal.tsx
@@ -0,0 +1,199 @@
+import React, { useCallback, useEffect } from 'react'
+import './exportLoadingModal.scss'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Lottie from 'react-lottie'
+import Dialog from '@material-ui/core/Dialog'
+import CloseIcon from 'assets/icons/ico/close.svg'
+import * as FileSaver from 'file-saver'
+import * as XLSX from 'xlsx'
+import { Datachart, TimePeriod } from 'models'
+import ConsumptionDataManager from 'services/consumption.service'
+import { useClient } from 'cozy-client'
+import { TimeStep } from 'enum/timeStep.enum'
+import { FluidType } from 'enum/fluid.enum'
+import { Button, IconButton } from '@material-ui/core'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import * as bounceLoading from 'assets/anims/bounceloading.json'
+
+const loadingOptions = {
+ loop: true,
+ autoplay: true,
+ animationData: bounceLoading,
+ rendererSettings: {
+ preserveAspectRatio: 'xMidYMid slice',
+ },
+}
+interface ExportLoadingModalProps {
+ open: boolean
+ handleCloseClick: () => void
+ handleDone: (e?: any) => void
+ selectedFluids: FluidType[]
+}
+
+const ExportLoadingModal: React.FC<ExportLoadingModalProps> = ({
+ open,
+ handleCloseClick,
+ handleDone,
+ selectedFluids,
+}: ExportLoadingModalProps) => {
+ const { t } = useI18n()
+ const client = useClient()
+
+ const fileType =
+ 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'
+ const fileExtension = '.xlsx'
+
+ const exportToXlsx = (exportDataSheets: any, fileName: string) => {
+ const wb = XLSX.utils.book_new()
+ for (const dataSheet of exportDataSheets) {
+ const ws = XLSX.utils.json_to_sheet(dataSheet.data)
+ XLSX.utils.book_append_sheet(wb, ws, dataSheet.fluidName)
+ }
+ const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' })
+ const data = new Blob([excelBuffer], { type: fileType })
+ FileSaver.saveAs(data, fileName + fileExtension)
+ }
+
+ const getExportDataFluid = useCallback(
+ async (fluidType: FluidType): Promise<any> => {
+ const consumptionService = new ConsumptionDataManager(client)
+ const firstDataDate = await consumptionService.fetchAllFirstDateData([
+ fluidType,
+ ])
+ const lastDataDate = await consumptionService.fetchAllLastDateData([
+ fluidType,
+ ])
+ if (!firstDataDate[0] || !lastDataDate[0]) return null
+
+ const timePeriod: TimePeriod = {
+ startDate: firstDataDate[0],
+ endDate: lastDataDate[0],
+ }
+
+ const dataLoad: Datachart | null = await consumptionService.getGraphData(
+ timePeriod,
+ TimeStep.MONTH,
+ [fluidType],
+ undefined,
+ undefined,
+ false
+ )
+ if (dataLoad && dataLoad.actualData) {
+ const exportDataFluid: any = {}
+ exportDataFluid.fluidName = t(
+ 'FLUID.' + FluidType[fluidType] + '.LABEL'
+ )
+ exportDataFluid.data = []
+
+ for (const data of dataLoad.actualData) {
+ if (data.value != -1) {
+ const dataRow: any = {}
+ dataRow[t('export.month')] = data.date.month
+ .toString()
+ .padStart(2, '0')
+ dataRow[t('export.year')] = data.date.year
+ dataRow[
+ `${t('export.consumption')} (${t(
+ 'FLUID.' + FluidType[fluidType] + '.UNIT'
+ )})`
+ ] = data.value
+ exportDataFluid.data.push(dataRow)
+ }
+ }
+ return exportDataFluid
+ }
+ return null
+ },
+ [client, t]
+ )
+
+ useEffect(() => {
+ let subscribed = true
+ const date = new Date()
+
+ async function exportData(): Promise<void> {
+ try {
+ const exportDataSheets: any[] = []
+ for (const fluidType of selectedFluids) {
+ const exportDataFluid = await getExportDataFluid(fluidType)
+ if (exportDataFluid) exportDataSheets.push(exportDataFluid)
+ }
+ await new Promise(r => setTimeout(r, 2000))
+ if (subscribed) {
+ exportToXlsx(
+ exportDataSheets,
+ 'ecolyo_data_' + date.toLocaleDateString()
+ )
+ handleDone()
+ }
+ } catch (e) {
+ handleDone(e)
+ }
+ }
+
+ if (subscribed) {
+ exportData()
+ }
+ return () => {
+ subscribed = false
+ }
+ }, [client, getExportDataFluid, handleDone, selectedFluids, t])
+
+ return (
+ <Dialog
+ open={open}
+ onClose={(event, reason) => {
+ if (reason !== 'backdropClick' && reason !== 'escapeKeyDown') {
+ handleCloseClick()
+ }
+ }}
+ aria-labelledby={'accessibility-title'}
+ classes={{
+ root: 'modal-root',
+ paper: 'modal-paper',
+ }}
+ >
+ <div id={'accessibility-title'}>
+ {t('export.modal_loading.accessibility_title')}
+ </div>
+
+ <div className="modal-loading-root">
+ <div onClick={handleCloseClick}>
+ <IconButton
+ aria-label={t('export.button_close')}
+ className="modal-paper-close-button"
+ onClick={handleCloseClick}
+ >
+ <Icon icon={CloseIcon} size={18} />
+ </IconButton>
+ </div>
+ <div className="content">
+ <div className="icon-main">
+ <Lottie options={loadingOptions} height={38} width={38} />
+ </div>
+ <div className="text-16-bold text text1">
+ {t('export.modal_loading.text1')}
+ </div>
+ <div className="text-16-normal text">
+ {t('export.modal_loading.text2')}
+ </div>
+ <Button
+ aria-label={t('export.modal_loading.button_cancel')}
+ onClick={() => {
+ handleCloseClick()
+ }}
+ classes={{
+ root: 'btn-secondary-negative',
+ label: 'text-16-bold',
+ }}
+ type="submit"
+ >
+ {t('export.modal_loading.button_cancel')}
+ </Button>
+ </div>
+ </div>
+ </Dialog>
+ )
+}
+
+export default ExportLoadingModal
diff --git a/src/components/Export/exportStartModal.scss b/src/components/Export/exportStartModal.scss
new file mode 100644
index 0000000000000000000000000000000000000000..9f481c116266658ae05958a024366871e2632eaa
--- /dev/null
+++ b/src/components/Export/exportStartModal.scss
@@ -0,0 +1,22 @@
+@import 'src/styles/base/color';
+
+.modal-start-root {
+ .content {
+ text-align: center;
+ padding-top: 2rem;
+ .text {
+ margin: 2rem 0 0;
+ color: $grey-bright;
+ }
+ .text1 {
+ color: $gold-shadow;
+ }
+ .buttons {
+ display: flex;
+ gap: 1rem;
+ button {
+ height: 40px;
+ }
+ }
+ }
+}
diff --git a/src/components/Export/exportStartModal.spec.tsx b/src/components/Export/exportStartModal.spec.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c6cd58838d44a1c580f721e0db276f69e8e520d1
--- /dev/null
+++ b/src/components/Export/exportStartModal.spec.tsx
@@ -0,0 +1,57 @@
+import React from 'react'
+import { Provider } from 'react-redux'
+import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
+import {
+ createMockStore,
+ mockInitialEcolyoState,
+} from '../../../tests/__mocks__/store'
+import { Button } from '@material-ui/core'
+import ExportStartModal from 'components/Export/exportStartModal'
+
+jest.mock('cozy-ui/transpiled/react/I18n', () => {
+ return {
+ useI18n: jest.fn(() => {
+ return {
+ t: (str: string) => str,
+ }
+ }),
+ }
+})
+
+const mockHandleClose = jest.fn()
+const mockHandleDownloadClick = jest.fn()
+
+describe('exportStartModal component', () => {
+ let store: any
+ beforeEach(() => {
+ store = createMockStore(mockInitialEcolyoState)
+ })
+
+ it('should be rendered correctly', () => {
+ const wrapper = mount(
+ <Provider store={store}>
+ <ExportStartModal
+ open={true}
+ handleCloseClick={mockHandleClose}
+ handleDownloadClick={mockHandleDownloadClick}
+ />
+ </Provider>
+ )
+ expect(toJson(wrapper)).toMatchSnapshot()
+ })
+
+ it('should close modal ', () => {
+ const wrapper = mount(
+ <Provider store={store}>
+ <ExportStartModal
+ open={true}
+ handleCloseClick={mockHandleClose}
+ handleDownloadClick={mockHandleDownloadClick}
+ />
+ </Provider>
+ )
+ wrapper.find(Button).first().simulate('click')
+ expect(mockHandleClose).toHaveBeenCalledTimes(1)
+ })
+})
diff --git a/src/components/Export/exportStartModal.tsx b/src/components/Export/exportStartModal.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..58fd7a5954fe66606239bd09f0df3a4f70390948
--- /dev/null
+++ b/src/components/Export/exportStartModal.tsx
@@ -0,0 +1,88 @@
+import React from 'react'
+import './exportStartModal.scss'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Dialog from '@material-ui/core/Dialog'
+import CloseIcon from 'assets/icons/ico/close.svg'
+import { Button, IconButton } from '@material-ui/core'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import download from 'assets/icons/ico/download.svg'
+
+interface ExportStartModalProps {
+ open: boolean
+ handleCloseClick: () => void
+ handleDownloadClick: () => void
+}
+
+const ExportStartModal: React.FC<ExportStartModalProps> = ({
+ open,
+ handleCloseClick,
+ handleDownloadClick,
+}: ExportStartModalProps) => {
+ const { t } = useI18n()
+
+ return (
+ <Dialog
+ open={open}
+ onClose={handleCloseClick}
+ aria-labelledby={'accessibility_title'}
+ classes={{
+ root: 'modal-root',
+ paper: 'modal-paper',
+ }}
+ >
+ <div id={'accessibility-title'}>
+ {t('export.modal_start.accessibility_title')}
+ </div>
+ <div className="modal-start-root">
+ <div onClick={handleCloseClick}>
+ <IconButton
+ aria-label={t('export.button_close')}
+ className="modal-paper-close-button"
+ onClick={handleCloseClick}
+ >
+ <Icon icon={CloseIcon} size={18} />
+ </IconButton>
+ </div>
+ <div className="content">
+ <div className="icon-main">
+ <Icon icon={download} size={48} />
+ </div>
+ <div className="text-16-bold text text1">
+ {t('export.modal_start.text1')}
+ </div>
+ <div className="text-16-normal text">
+ {t('export.modal_start.text2')}
+ <br />
+ {t('export.modal_start.text3')}
+ </div>
+ <div className="buttons">
+ <Button
+ aria-label={t('export.modal_start.button_cancel')}
+ onClick={handleCloseClick}
+ classes={{
+ root: 'btn-secondary-negative',
+ label: 'text-16-bold',
+ }}
+ type="submit"
+ >
+ {t('export.modal_start.button_cancel')}
+ </Button>
+ <Button
+ aria-label={t('export.button_download')}
+ onClick={handleDownloadClick}
+ classes={{
+ root: 'btn-highlight',
+ label: 'text-16-bold',
+ }}
+ type="submit"
+ >
+ {t('export.button_download')}
+ </Button>
+ </div>
+ </div>
+ </div>
+ </Dialog>
+ )
+}
+
+export default ExportStartModal
diff --git a/src/components/Options/OptionsView.tsx b/src/components/Options/OptionsView.tsx
index 906e5c209d0978b3b12c1675201476e4b29c103b..6d757880660925c68a700276234f36339ca771eb 100644
--- a/src/components/Options/OptionsView.tsx
+++ b/src/components/Options/OptionsView.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react'
import CozyBar from 'components/Header/CozyBar'
import Header from 'components/Header/Header'
import Content from 'components/Content/Content'
+import ExportOptions from 'components/Options/exportOptions'
import ReportOptions from 'components/Options/ReportOptions'
import FAQLink from 'components/FAQ/FAQLink'
import LegalNoticeLink from 'components/LegalNotice/LegalNoticeLink'
@@ -26,6 +27,7 @@ const OptionsView: React.FC = () => {
></Header>
<Content height={headerHeight}>
<ProfileTypeOptions />
+ <ExportOptions />
<ReportOptions />
<FAQLink />
<LegalNoticeLink />
diff --git a/src/components/Options/ProfileTypeOptions.tsx b/src/components/Options/ProfileTypeOptions.tsx
index 639467f227a40ea43aeef30f4959f982ee1b093c..003cadb6181ba568e477c6ce532a38ddbbcac189 100644
--- a/src/components/Options/ProfileTypeOptions.tsx
+++ b/src/components/Options/ProfileTypeOptions.tsx
@@ -69,7 +69,8 @@ const ProfileTypeOptions: React.FC = () => {
content: 'expansion-panel-content',
}}
>
- <div className="text-18-normal">
+ <Icon className="profile-icon" icon={profileIcon} size={38} />
+ <div className="text-16-normal profile-title">
{t('profile_type.your_profile')}
</div>
</AccordionSummary>
diff --git a/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap b/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap
index 3cdb93ecb9ac5e5207444fe7bc45111e528e874e..8889596f229dbeef4341f3f654f6cb9502b91401 100644
--- a/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap
+++ b/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap
@@ -13,6 +13,7 @@ exports[`OptionsView component should be rendered correctly 1`] = `
height={0}
>
<ProfileTypeOptions />
+ <ExportOptions />
<ReportOptions />
<FAQLink />
<LegalNoticeLink />
diff --git a/src/components/Options/__snapshots__/exportOptions.spec.tsx.snap b/src/components/Options/__snapshots__/exportOptions.spec.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..dbfa6739f19219a3cedc42d0b6223edfe3208825
--- /dev/null
+++ b/src/components/Options/__snapshots__/exportOptions.spec.tsx.snap
@@ -0,0 +1,1292 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`exportOptions component should be rendered correctly 1`] = `
+<ExportOptions>
+ <div
+ className="export-option-root"
+ >
+ <div
+ className="export-option-content"
+ >
+ <WithStyles(ForwardRef(Accordion))
+ classes={
+ Object {
+ "root": "expansion-panel-root",
+ }
+ }
+ expanded={false}
+ onChange={[Function]}
+ >
+ <ForwardRef(Accordion)
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "expanded": "Mui-expanded",
+ "root": "MuiAccordion-root expansion-panel-root",
+ "rounded": "MuiAccordion-rounded",
+ }
+ }
+ expanded={false}
+ onChange={[Function]}
+ >
+ <WithStyles(ForwardRef(Paper))
+ className="MuiAccordion-root expansion-panel-root MuiAccordion-rounded"
+ square={false}
+ >
+ <ForwardRef(Paper)
+ className="MuiAccordion-root expansion-panel-root MuiAccordion-rounded"
+ classes={
+ Object {
+ "elevation0": "MuiPaper-elevation0",
+ "elevation1": "MuiPaper-elevation1",
+ "elevation10": "MuiPaper-elevation10",
+ "elevation11": "MuiPaper-elevation11",
+ "elevation12": "MuiPaper-elevation12",
+ "elevation13": "MuiPaper-elevation13",
+ "elevation14": "MuiPaper-elevation14",
+ "elevation15": "MuiPaper-elevation15",
+ "elevation16": "MuiPaper-elevation16",
+ "elevation17": "MuiPaper-elevation17",
+ "elevation18": "MuiPaper-elevation18",
+ "elevation19": "MuiPaper-elevation19",
+ "elevation2": "MuiPaper-elevation2",
+ "elevation20": "MuiPaper-elevation20",
+ "elevation21": "MuiPaper-elevation21",
+ "elevation22": "MuiPaper-elevation22",
+ "elevation23": "MuiPaper-elevation23",
+ "elevation24": "MuiPaper-elevation24",
+ "elevation3": "MuiPaper-elevation3",
+ "elevation4": "MuiPaper-elevation4",
+ "elevation5": "MuiPaper-elevation5",
+ "elevation6": "MuiPaper-elevation6",
+ "elevation7": "MuiPaper-elevation7",
+ "elevation8": "MuiPaper-elevation8",
+ "elevation9": "MuiPaper-elevation9",
+ "outlined": "MuiPaper-outlined",
+ "root": "MuiPaper-root",
+ "rounded": "MuiPaper-rounded",
+ }
+ }
+ square={false}
+ >
+ <div
+ className="MuiPaper-root MuiAccordion-root expansion-panel-root MuiAccordion-rounded MuiPaper-elevation1 MuiPaper-rounded"
+ >
+ <WithStyles(ForwardRef(AccordionSummary))
+ aria-label="profile_type.accessibility.button_toggle_export"
+ classes={
+ Object {
+ "content": "expansion-panel-content",
+ "root": "expansion-panel-summary",
+ }
+ }
+ expandIcon={
+ <Icon
+ icon="test-file-stub"
+ size={16}
+ spin={false}
+ />
+ }
+ key=".0"
+ >
+ <ForwardRef(AccordionSummary)
+ aria-label="profile_type.accessibility.button_toggle_export"
+ classes={
+ Object {
+ "content": "MuiAccordionSummary-content expansion-panel-content",
+ "disabled": "Mui-disabled",
+ "expandIcon": "MuiAccordionSummary-expandIcon",
+ "expanded": "Mui-expanded",
+ "focusVisible": "Mui-focusVisible",
+ "focused": "Mui-focused",
+ "root": "MuiAccordionSummary-root expansion-panel-summary",
+ }
+ }
+ expandIcon={
+ <Icon
+ icon="test-file-stub"
+ size={16}
+ spin={false}
+ />
+ }
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-expanded={false}
+ aria-label="profile_type.accessibility.button_toggle_export"
+ className="MuiAccordionSummary-root expansion-panel-summary"
+ component="div"
+ disableRipple={true}
+ disabled={false}
+ focusRipple={false}
+ focusVisibleClassName="Mui-focusVisible Mui-focused"
+ onClick={[Function]}
+ >
+ <ForwardRef(ButtonBase)
+ aria-expanded={false}
+ aria-label="profile_type.accessibility.button_toggle_export"
+ className="MuiAccordionSummary-root expansion-panel-summary"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ component="div"
+ disableRipple={true}
+ disabled={false}
+ focusRipple={false}
+ focusVisibleClassName="Mui-focusVisible Mui-focused"
+ onClick={[Function]}
+ >
+ <div
+ aria-disabled={false}
+ aria-expanded={false}
+ aria-label="profile_type.accessibility.button_toggle_export"
+ className="MuiButtonBase-root MuiAccordionSummary-root expansion-panel-summary"
+ onBlur={[Function]}
+ onClick={[Function]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
+ role="button"
+ tabIndex={0}
+ >
+ <div
+ className="MuiAccordionSummary-content expansion-panel-content"
+ >
+ <Icon
+ className="export-icon"
+ icon="test-file-stub"
+ size={42}
+ spin={false}
+ >
+ <Component
+ className="export-icon styles__icon___23x3R"
+ height={42}
+ style={Object {}}
+ width={42}
+ >
+ <svg
+ className="export-icon styles__icon___23x3R"
+ height={42}
+ style={Object {}}
+ width={42}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ <div
+ className="text-16-normal accordion-title"
+ >
+ export.title_export
+ </div>
+ </div>
+ <WithStyles(ForwardRef(IconButton))
+ aria-hidden={true}
+ className="MuiAccordionSummary-expandIcon"
+ component="div"
+ edge="end"
+ role={null}
+ tabIndex={null}
+ >
+ <ForwardRef(IconButton)
+ aria-hidden={true}
+ className="MuiAccordionSummary-expandIcon"
+ classes={
+ Object {
+ "colorInherit": "MuiIconButton-colorInherit",
+ "colorPrimary": "MuiIconButton-colorPrimary",
+ "colorSecondary": "MuiIconButton-colorSecondary",
+ "disabled": "Mui-disabled",
+ "edgeEnd": "MuiIconButton-edgeEnd",
+ "edgeStart": "MuiIconButton-edgeStart",
+ "label": "MuiIconButton-label",
+ "root": "MuiIconButton-root",
+ "sizeSmall": "MuiIconButton-sizeSmall",
+ }
+ }
+ component="div"
+ edge="end"
+ role={null}
+ tabIndex={null}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-hidden={true}
+ centerRipple={true}
+ className="MuiIconButton-root MuiAccordionSummary-expandIcon MuiIconButton-edgeEnd"
+ component="div"
+ disabled={false}
+ focusRipple={true}
+ role={null}
+ tabIndex={null}
+ >
+ <ForwardRef(ButtonBase)
+ aria-hidden={true}
+ centerRipple={true}
+ className="MuiIconButton-root MuiAccordionSummary-expandIcon MuiIconButton-edgeEnd"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ component="div"
+ disabled={false}
+ focusRipple={true}
+ role={null}
+ tabIndex={null}
+ >
+ <div
+ aria-disabled={false}
+ aria-hidden={true}
+ className="MuiButtonBase-root MuiIconButton-root MuiAccordionSummary-expandIcon MuiIconButton-edgeEnd"
+ onBlur={[Function]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
+ role={null}
+ tabIndex={null}
+ >
+ <span
+ className="MuiIconButton-label"
+ >
+ <Icon
+ icon="test-file-stub"
+ size={16}
+ spin={false}
+ >
+ <Component
+ className="styles__icon___23x3R"
+ height={16}
+ style={Object {}}
+ width={16}
+ >
+ <svg
+ className="styles__icon___23x3R"
+ height={16}
+ style={Object {}}
+ width={16}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </span>
+ <WithStyles(memo)
+ center={true}
+ >
+ <ForwardRef(TouchRipple)
+ center={true}
+ classes={
+ Object {
+ "child": "MuiTouchRipple-child",
+ "childLeaving": "MuiTouchRipple-childLeaving",
+ "childPulsate": "MuiTouchRipple-childPulsate",
+ "ripple": "MuiTouchRipple-ripple",
+ "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+ "rippleVisible": "MuiTouchRipple-rippleVisible",
+ "root": "MuiTouchRipple-root",
+ }
+ }
+ >
+ <span
+ className="MuiTouchRipple-root"
+ >
+ <TransitionGroup
+ childFactory={[Function]}
+ component={null}
+ exit={true}
+ />
+ </span>
+ </ForwardRef(TouchRipple)>
+ </WithStyles(memo)>
+ </div>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(IconButton)>
+ </WithStyles(ForwardRef(IconButton))>
+ </div>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(AccordionSummary)>
+ </WithStyles(ForwardRef(AccordionSummary))>
+ <WithStyles(ForwardRef(Collapse))
+ in={false}
+ timeout="auto"
+ >
+ <ForwardRef(Collapse)
+ classes={
+ Object {
+ "entered": "MuiCollapse-entered",
+ "hidden": "MuiCollapse-hidden",
+ "root": "MuiCollapse-root",
+ "wrapper": "MuiCollapse-wrapper",
+ "wrapperInner": "MuiCollapse-wrapperInner",
+ }
+ }
+ in={false}
+ timeout="auto"
+ >
+ <Transition
+ addEndListener={[Function]}
+ appear={false}
+ enter={true}
+ exit={true}
+ in={false}
+ mountOnEnter={false}
+ onEnter={[Function]}
+ onEntered={[Function]}
+ onEntering={[Function]}
+ onExit={[Function]}
+ onExited={[Function]}
+ onExiting={[Function]}
+ timeout={null}
+ unmountOnExit={false}
+ >
+ <div
+ className="MuiCollapse-root MuiCollapse-hidden"
+ style={
+ Object {
+ "minHeight": "0px",
+ }
+ }
+ >
+ <div
+ className="MuiCollapse-wrapper"
+ >
+ <div
+ className="MuiCollapse-wrapperInner"
+ >
+ <div
+ role="region"
+ >
+ <WithStyles(ForwardRef(AccordionDetails))
+ classes={
+ Object {
+ "root": "expansion-panel-details",
+ }
+ }
+ key=".1"
+ >
+ <ForwardRef(AccordionDetails)
+ classes={
+ Object {
+ "root": "MuiAccordionDetails-root expansion-panel-details",
+ }
+ }
+ >
+ <div
+ className="MuiAccordionDetails-root expansion-panel-details"
+ >
+ <div
+ className="text-15-normal content intro"
+ >
+ export.text1
+ </div>
+ <div
+ className="text-16-bold content"
+ >
+ export.fluid_select
+ </div>
+ <div
+ className="text-15-normal content intro"
+ >
+ export.no_data
+ </div>
+ <div
+ className="inline-button"
+ >
+ <WithStyles(ForwardRef(Button))
+ aria-label="unsubscribe.button_accessibility"
+ classes={
+ Object {
+ "label": "text-16-normal",
+ "root": "btn-secondary-negative",
+ }
+ }
+ disabled={true}
+ onClick={[Function]}
+ type="submit"
+ >
+ <ForwardRef(Button)
+ aria-label="unsubscribe.button_accessibility"
+ classes={
+ Object {
+ "colorInherit": "MuiButton-colorInherit",
+ "contained": "MuiButton-contained",
+ "containedPrimary": "MuiButton-containedPrimary",
+ "containedSecondary": "MuiButton-containedSecondary",
+ "containedSizeLarge": "MuiButton-containedSizeLarge",
+ "containedSizeSmall": "MuiButton-containedSizeSmall",
+ "disableElevation": "MuiButton-disableElevation",
+ "disabled": "Mui-disabled",
+ "endIcon": "MuiButton-endIcon",
+ "focusVisible": "Mui-focusVisible",
+ "fullWidth": "MuiButton-fullWidth",
+ "iconSizeLarge": "MuiButton-iconSizeLarge",
+ "iconSizeMedium": "MuiButton-iconSizeMedium",
+ "iconSizeSmall": "MuiButton-iconSizeSmall",
+ "label": "MuiButton-label text-16-normal",
+ "outlined": "MuiButton-outlined",
+ "outlinedPrimary": "MuiButton-outlinedPrimary",
+ "outlinedSecondary": "MuiButton-outlinedSecondary",
+ "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
+ "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
+ "root": "MuiButton-root btn-secondary-negative",
+ "sizeLarge": "MuiButton-sizeLarge",
+ "sizeSmall": "MuiButton-sizeSmall",
+ "startIcon": "MuiButton-startIcon",
+ "text": "MuiButton-text",
+ "textPrimary": "MuiButton-textPrimary",
+ "textSecondary": "MuiButton-textSecondary",
+ "textSizeLarge": "MuiButton-textSizeLarge",
+ "textSizeSmall": "MuiButton-textSizeSmall",
+ }
+ }
+ disabled={true}
+ onClick={[Function]}
+ type="submit"
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-label="unsubscribe.button_accessibility"
+ className="MuiButton-root btn-secondary-negative MuiButton-text Mui-disabled"
+ component="button"
+ disabled={true}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ type="submit"
+ >
+ <ForwardRef(ButtonBase)
+ aria-label="unsubscribe.button_accessibility"
+ className="MuiButton-root btn-secondary-negative MuiButton-text Mui-disabled"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ component="button"
+ disabled={true}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ type="submit"
+ >
+ <button
+ aria-label="unsubscribe.button_accessibility"
+ className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text Mui-disabled Mui-disabled"
+ disabled={true}
+ onBlur={[Function]}
+ onClick={[Function]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
+ tabIndex={-1}
+ type="submit"
+ >
+ <span
+ className="MuiButton-label text-16-normal"
+ >
+ export.button_download
+ </span>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(Button)>
+ </WithStyles(ForwardRef(Button))>
+ </div>
+ </div>
+ </ForwardRef(AccordionDetails)>
+ </WithStyles(ForwardRef(AccordionDetails))>
+ </div>
+ </div>
+ </div>
+ </div>
+ </Transition>
+ </ForwardRef(Collapse)>
+ </WithStyles(ForwardRef(Collapse))>
+ </div>
+ </ForwardRef(Paper)>
+ </WithStyles(ForwardRef(Paper))>
+ </ForwardRef(Accordion)>
+ </WithStyles(ForwardRef(Accordion))>
+ </div>
+ </div>
+ <ExportStartModal
+ handleCloseClick={[Function]}
+ handleDownloadClick={[Function]}
+ open={false}
+ >
+ <WithStyles(ForwardRef(Dialog))
+ aria-labelledby="accessibility_title"
+ classes={
+ Object {
+ "paper": "modal-paper",
+ "root": "modal-root",
+ }
+ }
+ onClose={[Function]}
+ open={false}
+ >
+ <ForwardRef(Dialog)
+ aria-labelledby="accessibility_title"
+ classes={
+ Object {
+ "container": "MuiDialog-container",
+ "paper": "MuiDialog-paper modal-paper",
+ "paperFullScreen": "MuiDialog-paperFullScreen",
+ "paperFullWidth": "MuiDialog-paperFullWidth",
+ "paperScrollBody": "MuiDialog-paperScrollBody",
+ "paperScrollPaper": "MuiDialog-paperScrollPaper",
+ "paperWidthFalse": "MuiDialog-paperWidthFalse",
+ "paperWidthLg": "MuiDialog-paperWidthLg",
+ "paperWidthMd": "MuiDialog-paperWidthMd",
+ "paperWidthSm": "MuiDialog-paperWidthSm",
+ "paperWidthXl": "MuiDialog-paperWidthXl",
+ "paperWidthXs": "MuiDialog-paperWidthXs",
+ "root": "MuiDialog-root modal-root",
+ "scrollBody": "MuiDialog-scrollBody",
+ "scrollPaper": "MuiDialog-scrollPaper",
+ }
+ }
+ onClose={[Function]}
+ open={false}
+ >
+ <ForwardRef(Modal)
+ BackdropComponent={
+ Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "Naked": Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "propTypes": Object {
+ "children": [Function],
+ "className": [Function],
+ "classes": [Function],
+ "invisible": [Function],
+ "open": [Function],
+ "transitionDuration": [Function],
+ },
+ "render": [Function],
+ },
+ "displayName": "WithStyles(ForwardRef(Backdrop))",
+ "options": Object {
+ "defaultTheme": Object {
+ "breakpoints": Object {
+ "between": [Function],
+ "down": [Function],
+ "keys": Array [
+ "xs",
+ "sm",
+ "md",
+ "lg",
+ "xl",
+ ],
+ "only": [Function],
+ "up": [Function],
+ "values": Object {
+ "lg": 1280,
+ "md": 960,
+ "sm": 600,
+ "xl": 1920,
+ "xs": 0,
+ },
+ "width": [Function],
+ },
+ "direction": "ltr",
+ "mixins": Object {
+ "gutters": [Function],
+ "toolbar": Object {
+ "@media (min-width:0px) and (orientation: landscape)": Object {
+ "minHeight": 48,
+ },
+ "@media (min-width:600px)": Object {
+ "minHeight": 64,
+ },
+ "minHeight": 56,
+ },
+ },
+ "overrides": Object {},
+ "palette": Object {
+ "action": Object {
+ "activatedOpacity": 0.12,
+ "active": "rgba(0, 0, 0, 0.54)",
+ "disabled": "rgba(0, 0, 0, 0.26)",
+ "disabledBackground": "rgba(0, 0, 0, 0.12)",
+ "disabledOpacity": 0.38,
+ "focus": "rgba(0, 0, 0, 0.12)",
+ "focusOpacity": 0.12,
+ "hover": "rgba(0, 0, 0, 0.04)",
+ "hoverOpacity": 0.04,
+ "selected": "rgba(0, 0, 0, 0.08)",
+ "selectedOpacity": 0.08,
+ },
+ "augmentColor": [Function],
+ "background": Object {
+ "default": "#fafafa",
+ "paper": "#fff",
+ },
+ "common": Object {
+ "black": "#000",
+ "white": "#fff",
+ },
+ "contrastThreshold": 3,
+ "divider": "rgba(0, 0, 0, 0.12)",
+ "error": Object {
+ "contrastText": "#fff",
+ "dark": "#d32f2f",
+ "light": "#e57373",
+ "main": "#f44336",
+ },
+ "getContrastText": [Function],
+ "grey": Object {
+ "100": "#f5f5f5",
+ "200": "#eeeeee",
+ "300": "#e0e0e0",
+ "400": "#bdbdbd",
+ "50": "#fafafa",
+ "500": "#9e9e9e",
+ "600": "#757575",
+ "700": "#616161",
+ "800": "#424242",
+ "900": "#212121",
+ "A100": "#d5d5d5",
+ "A200": "#aaaaaa",
+ "A400": "#303030",
+ "A700": "#616161",
+ },
+ "info": Object {
+ "contrastText": "#fff",
+ "dark": "#1976d2",
+ "light": "#64b5f6",
+ "main": "#2196f3",
+ },
+ "primary": Object {
+ "contrastText": "#fff",
+ "dark": "#303f9f",
+ "light": "#7986cb",
+ "main": "#3f51b5",
+ },
+ "secondary": Object {
+ "contrastText": "#fff",
+ "dark": "#c51162",
+ "light": "#ff4081",
+ "main": "#f50057",
+ },
+ "success": Object {
+ "contrastText": "rgba(0, 0, 0, 0.87)",
+ "dark": "#388e3c",
+ "light": "#81c784",
+ "main": "#4caf50",
+ },
+ "text": Object {
+ "disabled": "rgba(0, 0, 0, 0.38)",
+ "hint": "rgba(0, 0, 0, 0.38)",
+ "primary": "rgba(0, 0, 0, 0.87)",
+ "secondary": "rgba(0, 0, 0, 0.54)",
+ },
+ "tonalOffset": 0.2,
+ "type": "light",
+ "warning": Object {
+ "contrastText": "rgba(0, 0, 0, 0.87)",
+ "dark": "#f57c00",
+ "light": "#ffb74d",
+ "main": "#ff9800",
+ },
+ },
+ "props": Object {},
+ "shadows": Array [
+ "none",
+ "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
+ "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
+ "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
+ "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
+ "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
+ "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
+ "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
+ "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
+ "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
+ "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
+ "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
+ "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
+ "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
+ "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
+ "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
+ "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
+ "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
+ "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
+ "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
+ "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
+ "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
+ "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
+ "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
+ "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
+ ],
+ "shape": Object {
+ "borderRadius": 4,
+ },
+ "spacing": [Function],
+ "transitions": Object {
+ "create": [Function],
+ "duration": Object {
+ "complex": 375,
+ "enteringScreen": 225,
+ "leavingScreen": 195,
+ "short": 250,
+ "shorter": 200,
+ "shortest": 150,
+ "standard": 300,
+ },
+ "easing": Object {
+ "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
+ "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
+ "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
+ "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
+ },
+ "getAutoHeightDuration": [Function],
+ },
+ "typography": Object {
+ "body1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00938em",
+ "lineHeight": 1.5,
+ },
+ "body2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.01071em",
+ "lineHeight": 1.43,
+ },
+ "button": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.02857em",
+ "lineHeight": 1.75,
+ "textTransform": "uppercase",
+ },
+ "caption": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.75rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.03333em",
+ "lineHeight": 1.66,
+ },
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": 14,
+ "fontWeightBold": 700,
+ "fontWeightLight": 300,
+ "fontWeightMedium": 500,
+ "fontWeightRegular": 400,
+ "h1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "6rem",
+ "fontWeight": 300,
+ "letterSpacing": "-0.01562em",
+ "lineHeight": 1.167,
+ },
+ "h2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "3.75rem",
+ "fontWeight": 300,
+ "letterSpacing": "-0.00833em",
+ "lineHeight": 1.2,
+ },
+ "h3": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "3rem",
+ "fontWeight": 400,
+ "letterSpacing": "0em",
+ "lineHeight": 1.167,
+ },
+ "h4": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "2.125rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00735em",
+ "lineHeight": 1.235,
+ },
+ "h5": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1.5rem",
+ "fontWeight": 400,
+ "letterSpacing": "0em",
+ "lineHeight": 1.334,
+ },
+ "h6": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1.25rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.0075em",
+ "lineHeight": 1.6,
+ },
+ "htmlFontSize": 16,
+ "overline": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.75rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.08333em",
+ "lineHeight": 2.66,
+ "textTransform": "uppercase",
+ },
+ "pxToRem": [Function],
+ "round": [Function],
+ "subtitle1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00938em",
+ "lineHeight": 1.75,
+ },
+ "subtitle2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.00714em",
+ "lineHeight": 1.57,
+ },
+ },
+ "zIndex": Object {
+ "appBar": 1100,
+ "drawer": 1200,
+ "mobileStepper": 1000,
+ "modal": 1300,
+ "snackbar": 1400,
+ "speedDial": 1050,
+ "tooltip": 1500,
+ },
+ },
+ "name": "MuiBackdrop",
+ },
+ "propTypes": Object {
+ "classes": [Function],
+ "innerRef": [Function],
+ },
+ "render": [Function],
+ "useStyles": [Function],
+ }
+ }
+ BackdropProps={
+ Object {
+ "transitionDuration": Object {
+ "enter": 225,
+ "exit": 195,
+ },
+ }
+ }
+ className="MuiDialog-root modal-root"
+ closeAfterTransition={true}
+ disableEscapeKeyDown={false}
+ onClose={[Function]}
+ open={false}
+ />
+ </ForwardRef(Dialog)>
+ </WithStyles(ForwardRef(Dialog))>
+ </ExportStartModal>
+ <ExportDoneModal
+ error={false}
+ handleCloseClick={[Function]}
+ open={false}
+ >
+ <WithStyles(ForwardRef(Dialog))
+ aria-labelledby="accessibility-title"
+ classes={
+ Object {
+ "paper": "modal-paper",
+ "root": "modal-root",
+ }
+ }
+ onClose={[Function]}
+ open={false}
+ >
+ <ForwardRef(Dialog)
+ aria-labelledby="accessibility-title"
+ classes={
+ Object {
+ "container": "MuiDialog-container",
+ "paper": "MuiDialog-paper modal-paper",
+ "paperFullScreen": "MuiDialog-paperFullScreen",
+ "paperFullWidth": "MuiDialog-paperFullWidth",
+ "paperScrollBody": "MuiDialog-paperScrollBody",
+ "paperScrollPaper": "MuiDialog-paperScrollPaper",
+ "paperWidthFalse": "MuiDialog-paperWidthFalse",
+ "paperWidthLg": "MuiDialog-paperWidthLg",
+ "paperWidthMd": "MuiDialog-paperWidthMd",
+ "paperWidthSm": "MuiDialog-paperWidthSm",
+ "paperWidthXl": "MuiDialog-paperWidthXl",
+ "paperWidthXs": "MuiDialog-paperWidthXs",
+ "root": "MuiDialog-root modal-root",
+ "scrollBody": "MuiDialog-scrollBody",
+ "scrollPaper": "MuiDialog-scrollPaper",
+ }
+ }
+ onClose={[Function]}
+ open={false}
+ >
+ <ForwardRef(Modal)
+ BackdropComponent={
+ Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "Naked": Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "propTypes": Object {
+ "children": [Function],
+ "className": [Function],
+ "classes": [Function],
+ "invisible": [Function],
+ "open": [Function],
+ "transitionDuration": [Function],
+ },
+ "render": [Function],
+ },
+ "displayName": "WithStyles(ForwardRef(Backdrop))",
+ "options": Object {
+ "defaultTheme": Object {
+ "breakpoints": Object {
+ "between": [Function],
+ "down": [Function],
+ "keys": Array [
+ "xs",
+ "sm",
+ "md",
+ "lg",
+ "xl",
+ ],
+ "only": [Function],
+ "up": [Function],
+ "values": Object {
+ "lg": 1280,
+ "md": 960,
+ "sm": 600,
+ "xl": 1920,
+ "xs": 0,
+ },
+ "width": [Function],
+ },
+ "direction": "ltr",
+ "mixins": Object {
+ "gutters": [Function],
+ "toolbar": Object {
+ "@media (min-width:0px) and (orientation: landscape)": Object {
+ "minHeight": 48,
+ },
+ "@media (min-width:600px)": Object {
+ "minHeight": 64,
+ },
+ "minHeight": 56,
+ },
+ },
+ "overrides": Object {},
+ "palette": Object {
+ "action": Object {
+ "activatedOpacity": 0.12,
+ "active": "rgba(0, 0, 0, 0.54)",
+ "disabled": "rgba(0, 0, 0, 0.26)",
+ "disabledBackground": "rgba(0, 0, 0, 0.12)",
+ "disabledOpacity": 0.38,
+ "focus": "rgba(0, 0, 0, 0.12)",
+ "focusOpacity": 0.12,
+ "hover": "rgba(0, 0, 0, 0.04)",
+ "hoverOpacity": 0.04,
+ "selected": "rgba(0, 0, 0, 0.08)",
+ "selectedOpacity": 0.08,
+ },
+ "augmentColor": [Function],
+ "background": Object {
+ "default": "#fafafa",
+ "paper": "#fff",
+ },
+ "common": Object {
+ "black": "#000",
+ "white": "#fff",
+ },
+ "contrastThreshold": 3,
+ "divider": "rgba(0, 0, 0, 0.12)",
+ "error": Object {
+ "contrastText": "#fff",
+ "dark": "#d32f2f",
+ "light": "#e57373",
+ "main": "#f44336",
+ },
+ "getContrastText": [Function],
+ "grey": Object {
+ "100": "#f5f5f5",
+ "200": "#eeeeee",
+ "300": "#e0e0e0",
+ "400": "#bdbdbd",
+ "50": "#fafafa",
+ "500": "#9e9e9e",
+ "600": "#757575",
+ "700": "#616161",
+ "800": "#424242",
+ "900": "#212121",
+ "A100": "#d5d5d5",
+ "A200": "#aaaaaa",
+ "A400": "#303030",
+ "A700": "#616161",
+ },
+ "info": Object {
+ "contrastText": "#fff",
+ "dark": "#1976d2",
+ "light": "#64b5f6",
+ "main": "#2196f3",
+ },
+ "primary": Object {
+ "contrastText": "#fff",
+ "dark": "#303f9f",
+ "light": "#7986cb",
+ "main": "#3f51b5",
+ },
+ "secondary": Object {
+ "contrastText": "#fff",
+ "dark": "#c51162",
+ "light": "#ff4081",
+ "main": "#f50057",
+ },
+ "success": Object {
+ "contrastText": "rgba(0, 0, 0, 0.87)",
+ "dark": "#388e3c",
+ "light": "#81c784",
+ "main": "#4caf50",
+ },
+ "text": Object {
+ "disabled": "rgba(0, 0, 0, 0.38)",
+ "hint": "rgba(0, 0, 0, 0.38)",
+ "primary": "rgba(0, 0, 0, 0.87)",
+ "secondary": "rgba(0, 0, 0, 0.54)",
+ },
+ "tonalOffset": 0.2,
+ "type": "light",
+ "warning": Object {
+ "contrastText": "rgba(0, 0, 0, 0.87)",
+ "dark": "#f57c00",
+ "light": "#ffb74d",
+ "main": "#ff9800",
+ },
+ },
+ "props": Object {},
+ "shadows": Array [
+ "none",
+ "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
+ "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
+ "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
+ "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
+ "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
+ "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
+ "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
+ "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
+ "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
+ "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
+ "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
+ "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
+ "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
+ "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
+ "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
+ "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
+ "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
+ "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
+ "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
+ "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
+ "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
+ "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
+ "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
+ "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
+ ],
+ "shape": Object {
+ "borderRadius": 4,
+ },
+ "spacing": [Function],
+ "transitions": Object {
+ "create": [Function],
+ "duration": Object {
+ "complex": 375,
+ "enteringScreen": 225,
+ "leavingScreen": 195,
+ "short": 250,
+ "shorter": 200,
+ "shortest": 150,
+ "standard": 300,
+ },
+ "easing": Object {
+ "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
+ "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
+ "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
+ "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
+ },
+ "getAutoHeightDuration": [Function],
+ },
+ "typography": Object {
+ "body1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00938em",
+ "lineHeight": 1.5,
+ },
+ "body2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.01071em",
+ "lineHeight": 1.43,
+ },
+ "button": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.02857em",
+ "lineHeight": 1.75,
+ "textTransform": "uppercase",
+ },
+ "caption": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.75rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.03333em",
+ "lineHeight": 1.66,
+ },
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": 14,
+ "fontWeightBold": 700,
+ "fontWeightLight": 300,
+ "fontWeightMedium": 500,
+ "fontWeightRegular": 400,
+ "h1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "6rem",
+ "fontWeight": 300,
+ "letterSpacing": "-0.01562em",
+ "lineHeight": 1.167,
+ },
+ "h2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "3.75rem",
+ "fontWeight": 300,
+ "letterSpacing": "-0.00833em",
+ "lineHeight": 1.2,
+ },
+ "h3": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "3rem",
+ "fontWeight": 400,
+ "letterSpacing": "0em",
+ "lineHeight": 1.167,
+ },
+ "h4": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "2.125rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00735em",
+ "lineHeight": 1.235,
+ },
+ "h5": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1.5rem",
+ "fontWeight": 400,
+ "letterSpacing": "0em",
+ "lineHeight": 1.334,
+ },
+ "h6": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1.25rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.0075em",
+ "lineHeight": 1.6,
+ },
+ "htmlFontSize": 16,
+ "overline": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.75rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.08333em",
+ "lineHeight": 2.66,
+ "textTransform": "uppercase",
+ },
+ "pxToRem": [Function],
+ "round": [Function],
+ "subtitle1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00938em",
+ "lineHeight": 1.75,
+ },
+ "subtitle2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.00714em",
+ "lineHeight": 1.57,
+ },
+ },
+ "zIndex": Object {
+ "appBar": 1100,
+ "drawer": 1200,
+ "mobileStepper": 1000,
+ "modal": 1300,
+ "snackbar": 1400,
+ "speedDial": 1050,
+ "tooltip": 1500,
+ },
+ },
+ "name": "MuiBackdrop",
+ },
+ "propTypes": Object {
+ "classes": [Function],
+ "innerRef": [Function],
+ },
+ "render": [Function],
+ "useStyles": [Function],
+ }
+ }
+ BackdropProps={
+ Object {
+ "transitionDuration": Object {
+ "enter": 225,
+ "exit": 195,
+ },
+ }
+ }
+ className="MuiDialog-root modal-root"
+ closeAfterTransition={true}
+ disableEscapeKeyDown={false}
+ onClose={[Function]}
+ open={false}
+ />
+ </ForwardRef(Dialog)>
+ </WithStyles(ForwardRef(Dialog))>
+ </ExportDoneModal>
+</ExportOptions>
+`;
diff --git a/src/components/Options/exportOptions.scss b/src/components/Options/exportOptions.scss
new file mode 100644
index 0000000000000000000000000000000000000000..876ce05c38a813210814aa39cf520d48a425be7c
--- /dev/null
+++ b/src/components/Options/exportOptions.scss
@@ -0,0 +1,60 @@
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+div.expansion-panel-root,
+div.expansion-panel-root.Mui-expanded:last-child {
+ margin: 0.2rem 0;
+}
+.export-option-root {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 0 1.5rem;
+}
+.export-option-content {
+ width: 45.75rem;
+ @media #{$large-phone} {
+ width: 100%;
+ }
+ .accordion-title {
+ padding-left: 0.7rem;
+ }
+ .expansion-panel-details {
+ flex-direction: column;
+ .content {
+ padding-bottom: 16px;
+ }
+ .intro {
+ color: $soft-grey;
+ }
+ .btn-secondary-negative {
+ border-color: $grey-bright !important;
+ height: 40px;
+ }
+ .checkbox {
+ margin: 0;
+ input {
+ margin: 0.5rem;
+ border: 1px solid $soft-grey;
+ border-radius: 2px;
+ }
+ }
+ .answer-checked input:before,
+ .answer-checked input:after {
+ background: black;
+ }
+ .answer-checked input {
+ background: $gold-shadow;
+ border: 2px solid $gold-shadow;
+ }
+ .answer-checked input:before {
+ height: 13px;
+ left: 11px;
+ top: 3px;
+ }
+ .answer-checked input:after {
+ height: 9px;
+ left: 4px;
+ }
+ }
+}
diff --git a/src/components/Options/exportOptions.spec.tsx b/src/components/Options/exportOptions.spec.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f9248186d09ff934f3b3ca8532afd8beac73aebb
--- /dev/null
+++ b/src/components/Options/exportOptions.spec.tsx
@@ -0,0 +1,35 @@
+import ExportOptions from 'components/Options/exportOptions'
+import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
+import React from 'react'
+import mockClient from '../../../tests/__mocks__/client'
+
+jest.mock('cozy-ui/transpiled/react/I18n', () => {
+ return {
+ useI18n: jest.fn(() => {
+ return {
+ t: (str: string) => str,
+ }
+ }),
+ }
+})
+jest.mock('services/consumption.service', () => {
+ return jest.fn(() => {
+ return {
+ fetchAllFirstDateData: jest.fn(() => {
+ return [null, null, null]
+ }),
+ }
+ })
+})
+
+jest.mock('cozy-client', () => ({
+ useClient: () => mockClient,
+}))
+
+describe('exportOptions component', () => {
+ it('should be rendered correctly', async () => {
+ const wrapper = mount(<ExportOptions />)
+ expect(toJson(wrapper)).toMatchSnapshot()
+ })
+})
diff --git a/src/components/Options/exportOptions.tsx b/src/components/Options/exportOptions.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..12542a58e6e533acd6f74e6af08f51ab2b65d1b4
--- /dev/null
+++ b/src/components/Options/exportOptions.tsx
@@ -0,0 +1,204 @@
+import {
+ Accordion,
+ AccordionDetails,
+ AccordionSummary,
+ Button,
+} from '@material-ui/core'
+import chevronDown from 'assets/icons/ico/chevron-down.svg'
+import exportIcon from 'assets/icons/ico/export.svg'
+import classNames from 'classnames'
+import ExportDoneModal from 'components/Export/exportDoneModal'
+import ExportLoadingModal from 'components/Export/exportLoadingModal'
+import ExportStartModal from 'components/Export/exportStartModal'
+import { useClient } from 'cozy-client'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import { FluidType } from 'enum/fluid.enum'
+import { remove } from 'lodash'
+import { DateTime } from 'luxon'
+import React, { useEffect, useMemo, useState } from 'react'
+import ConsumptionDataManager from 'services/consumption.service'
+import './exportOptions.scss'
+
+const ExportOptions: React.FC = () => {
+ const { t } = useI18n()
+ const client = useClient()
+ const consumptionService = useMemo(
+ () => new ConsumptionDataManager(client),
+ [client]
+ )
+
+ const [isExportStartModal, setIsExportStartModal] = useState<boolean>(false)
+ const [isExportLoadingModal, setIsExportLoadingModal] =
+ useState<boolean>(false)
+ const [isExportDoneModal, setIsExportDoneModal] = useState<boolean>(false)
+ const [hasError, setHasError] = useState<boolean>(false)
+ const [enabledFluids, setEnabledFluids] = useState<FluidType[]>([])
+ const [answer, setAnswer] = useState<FluidType[]>([])
+
+ const [active, setActive] = useState<boolean>(false)
+
+ const toggleAccordion = () => {
+ setActive(prev => !prev)
+ }
+
+ const handleChange = (value: FluidType) => {
+ const tempAnswer = [...answer]
+ if (tempAnswer.includes(value)) {
+ remove(tempAnswer, function (n) {
+ return n === value
+ })
+ } else {
+ tempAnswer.push(value)
+ }
+ setAnswer(tempAnswer)
+ }
+
+ useEffect(() => {
+ let subscribed = true
+ const getEnabledFluids = async () => {
+ const firstDateDatas: (DateTime | null)[] =
+ await consumptionService.fetchAllFirstDateData([
+ FluidType.ELECTRICITY,
+ FluidType.WATER,
+ FluidType.GAS,
+ ])
+
+ const enabledFluidsData: FluidType[] = []
+ firstDateDatas.forEach((date, index) => {
+ if (date) {
+ enabledFluidsData.push(index)
+ }
+ })
+ setEnabledFluids(enabledFluidsData)
+ setAnswer(enabledFluidsData)
+ subscribed = false
+ }
+
+ if (subscribed) {
+ getEnabledFluids()
+ }
+ return () => {
+ subscribed = false
+ }
+ }, [consumptionService])
+
+ const fluidCheckbox = () =>
+ enabledFluids.map((fluidType, key) => (
+ <label
+ key={key}
+ className={classNames('checkbox', {
+ ['answer-checked']:
+ answer.includes(fluidType) && enabledFluids[key] != null,
+ })}
+ >
+ <input
+ type={'checkbox'}
+ value={fluidType}
+ name={t('FLUID.' + FluidType[fluidType] + '.LABEL')}
+ onChange={() => handleChange(fluidType)}
+ checked={answer.includes(fluidType)}
+ disabled={enabledFluids[key] === null}
+ />
+ {t('FLUID.' + FluidType[fluidType] + '.LABEL')}
+ </label>
+ ))
+
+ const handleDone = (e?: any) => {
+ if (e) {
+ setHasError(true)
+ }
+ setIsExportDoneModal(true)
+ setIsExportLoadingModal(false)
+ }
+
+ return (
+ <>
+ <div className="export-option-root">
+ <div className="export-option-content">
+ <Accordion
+ expanded={active}
+ onChange={toggleAccordion}
+ classes={{
+ root: 'expansion-panel-root',
+ }}
+ >
+ <AccordionSummary
+ aria-label={t('profile_type.accessibility.button_toggle_export')}
+ expandIcon={<Icon icon={chevronDown} size={16} />}
+ classes={{
+ root: 'expansion-panel-summary',
+ content: 'expansion-panel-content',
+ }}
+ >
+ <Icon className="export-icon" icon={exportIcon} size={42} />
+ <div className="text-16-normal accordion-title">
+ {t('export.title_export')}
+ </div>
+ </AccordionSummary>
+ <AccordionDetails
+ classes={{
+ root: 'expansion-panel-details',
+ }}
+ >
+ <div className="text-15-normal content intro">
+ {t('export.text1')}
+ </div>
+ <div className="text-16-bold content">
+ {t('export.fluid_select')}
+ </div>
+
+ {enabledFluids.length === 0 ? (
+ <div className="text-15-normal content intro">
+ {t('export.no_data')}
+ </div>
+ ) : (
+ fluidCheckbox()
+ )}
+
+ <div className="inline-button">
+ <Button
+ aria-label={t('unsubscribe.button_accessibility')}
+ onClick={() => setIsExportStartModal(true)}
+ classes={{
+ root: 'btn-secondary-negative',
+ label: 'text-16-normal',
+ }}
+ type="submit"
+ disabled={answer.length === 0}
+ >
+ {t('export.button_download')}
+ </Button>
+ </div>
+ </AccordionDetails>
+ </Accordion>
+ </div>
+ </div>
+ <ExportStartModal
+ open={isExportStartModal}
+ handleCloseClick={() => setIsExportStartModal(false)}
+ handleDownloadClick={() => {
+ setIsExportStartModal(false)
+ setIsExportLoadingModal(true)
+ }}
+ />
+ {isExportLoadingModal && (
+ <ExportLoadingModal
+ open={isExportLoadingModal}
+ handleCloseClick={() => {
+ setIsExportLoadingModal(false)
+ }}
+ handleDone={(e?: any): void => handleDone(e)}
+ selectedFluids={answer}
+ />
+ )}
+ <ExportDoneModal
+ open={isExportDoneModal}
+ error={hasError}
+ handleCloseClick={() => setIsExportDoneModal(false)}
+ />
+ </>
+ )
+}
+
+export default ExportOptions
diff --git a/src/components/Options/profileTypeOptions.scss b/src/components/Options/profileTypeOptions.scss
index 35aa6afa5cf8fc4baa27e88c1adfbd3ee127f280..d0cb8f934d1926cedafc918bd49ed13937a87532 100644
--- a/src/components/Options/profileTypeOptions.scss
+++ b/src/components/Options/profileTypeOptions.scss
@@ -49,6 +49,10 @@
padding: 8px 0px;
width: 100%;
}
+ .profile-title {
+ padding-left: 0.5rem;
+ }
+
button.profile-link {
color: $grey-bright;
text-decoration: none;
diff --git a/src/locales/fr.json b/src/locales/fr.json
index b73b925db867521b7d72095bb4a632f69d3d88be..dca268023a7c4f59f675e9eac97e18d125495263 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -979,10 +979,10 @@
}
},
"profile_type": {
- "title_profile": "Profil de consommation",
+ "title_profile": "Mes données",
"read_profile": "Ajuster mon profil",
"button_update_profile": "J'ajuste mon profil",
- "your_profile": "Votre profil",
+ "your_profile": "Mon profil",
"multi_choices": "Plusieurs réponses possibles",
"housing_type": {
"title": "Logement",
@@ -1152,9 +1152,44 @@
"button_previous": "Retour à la section précédente",
"button_update_profile": "Ouvrir la page de mise à jour du profil",
"button_toggle_detail_profile": "Afficher ou masquer le détail du profil",
+ "button_toggle_export": "Afficher ou masquer l'export des données'",
"button_validate": "Valider"
}
},
+ "export": {
+ "title_export": "Télécharger mes données",
+ "text1": "Vous allez télécharger l'historique mensuel de vos fluides sélectionnés",
+ "fluid_select": "Pour quel(s) fluide(s) souhaitez vous exporter vos données ?",
+ "no_data": "Vous n'avez aucune donnée de fluide...",
+ "button_download": "Télécharger",
+ "month": "Mois",
+ "year": "Année",
+ "consumption": "Consommation",
+ "button_close": "Fermer la fenêtre",
+ "modal_start": {
+ "accessibility_title": "Commencer le téléchargement",
+ "text1": "Vous allez télécharger des données personnelles, Ecolyo n’est plus responsable de celles-ci une fois téléchargées",
+ "text2": "Les données seront téléchargées sous forme de document excel (.xls)",
+ "text3": "Lancer le téléchargement?",
+ "button_cancel": "Annuler"
+ },
+ "modal_loading": {
+ "accessibility_title": "Téléchargement en cours",
+ "text1": "Données en cours de téléchargement",
+ "text2": "Veuillez ne pas quitter l’application pendant la récupération et le téléchargement de vos données",
+ "button_cancel": "Annuler le téléchargement"
+ },
+ "modal_done": {
+ "accessibility_title": "Téléchargement terminé",
+ "text1": "Vos données ont bien été téléchargées !",
+ "text2": "Vous pouvez maintenant retrouver l’historique de vos données sur votre appareil",
+ "error1": "Aïe !",
+ "error2": "Il semblerait qu’une erreur se soit produite lors du téléchargement de vos données.",
+ "error3": "Essayez à nouveau de vous connecter plus tard.",
+ "button_close": "Fermer",
+ "button_close_error": "Revenir plus tard"
+ }
+ },
"quiz": {
"explanation": "Répondez correctement aux 5 questions et remportez 5 des 15 étoiles nécessaires pour débloquer le duel final",
"score_final": "SCORE FINAL",
diff --git a/yarn.lock b/yarn.lock
index 635ad8dc5103aebfb4ad17b01f9fa03cd38e30e4..b7cf0612d38d1acd6fa1df93b693193b1c3a16ad 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2598,6 +2598,11 @@
resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.52.tgz#7f1f57ad5b741f3d5b210d3b1f145640d89bf8fe"
integrity sha512-BZWrtCU0bMVAIliIV+HJO1f1PR41M7NKjfxrFJwwhKI1KwhwOxYw1SXg9ao+CIMt774nFuGiG6eU+udtbEI9oQ==
+"@types/file-saver@^2.0.5":
+ version "2.0.5"
+ resolved "https://registry.yarnpkg.com/@types/file-saver/-/file-saver-2.0.5.tgz#9ee342a5d1314bb0928375424a2f162f97c310c7"
+ integrity sha512-zv9kNf3keYegP5oThGLaPk8E081DFDuwfqjtiTzm6PoxChdJ1raSuADf2YGCVIyrSynLrgc8JWv296s7Q7pQSQ==
+
"@types/geojson@*":
version "7946.0.8"
resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.8.tgz#30744afdb385e2945e22f3b033f897f76b1f12ca"
@@ -3141,6 +3146,11 @@ add-stream@^1.0.0:
resolved "https://registry.yarnpkg.com/add-stream/-/add-stream-1.0.0.tgz#6a7990437ca736d5e1288db92bd3266d5f5cb2aa"
integrity sha512-qQLMr+8o0WC4FZGQTcJiKBVC59JylcPSrTtk6usvmIDFUOCKegapy1VHQwRbFMOFyb/inzUVqHs+eMYKDM1YeQ==
+adler-32@~1.3.0:
+ version "1.3.1"
+ resolved "https://registry.yarnpkg.com/adler-32/-/adler-32-1.3.1.tgz#1dbf0b36dda0012189a32b3679061932df1821e2"
+ integrity sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==
+
agent-base@6:
version "6.0.2"
resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
@@ -4376,6 +4386,14 @@ caseless@~0.12.0:
resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
integrity sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==
+cfb@~1.2.1:
+ version "1.2.2"
+ resolved "https://registry.yarnpkg.com/cfb/-/cfb-1.2.2.tgz#94e687628c700e5155436dac05f74e08df23bc44"
+ integrity sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==
+ dependencies:
+ adler-32 "~1.3.0"
+ crc-32 "~1.2.0"
+
chalk@1.1.3, chalk@^1.1.3:
version "1.1.3"
resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
@@ -4728,6 +4746,11 @@ code-point-at@^1.0.0:
resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
integrity sha512-RpAVKQA5T63xEj6/giIbUEtZwJ4UFIc3ZtvEkiaUERylqe8xb5IvqcgOurZLahv93CLKfxcw5YI+DZcUBRyLXA==
+codepage@~1.15.0:
+ version "1.15.0"
+ resolved "https://registry.yarnpkg.com/codepage/-/codepage-1.15.0.tgz#2e00519024b39424ec66eeb3ec07227e692618ab"
+ integrity sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==
+
collapse-white-space@^1.0.2:
version "1.0.6"
resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.6.tgz#e63629c0016665792060dbbeb79c42239d2c5287"
@@ -5673,6 +5696,11 @@ cozy-ui@68.9.1:
react-swipeable-views "^0.13.3"
rooks "^5.11.2"
+crc-32@~1.2.0, crc-32@~1.2.1:
+ version "1.2.2"
+ resolved "https://registry.yarnpkg.com/crc-32/-/crc-32-1.2.2.tgz#3cad35a934b8bf71f25ca524b6da51fb7eace2ff"
+ integrity sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==
+
create-ecdh@^4.0.0:
version "4.0.4"
resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.4.tgz#d6e7f4bffa66736085a0762fd3a632684dabcc4e"
@@ -7732,6 +7760,11 @@ file-loader@3.0.1:
loader-utils "^1.0.2"
schema-utils "^1.0.0"
+file-saver@^2.0.5:
+ version "2.0.5"
+ resolved "https://registry.yarnpkg.com/file-saver/-/file-saver-2.0.5.tgz#d61cfe2ce059f414d899e9dd6d4107ee25670c38"
+ integrity sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==
+
file-type@^16.5.0:
version "16.5.3"
resolved "https://registry.yarnpkg.com/file-type/-/file-type-16.5.3.tgz#474b7e88c74724046abb505e9b8ed4db30c4fc06"
@@ -7969,6 +8002,11 @@ forwarded@0.2.0:
resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
integrity sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==
+frac@~1.1.2:
+ version "1.1.2"
+ resolved "https://registry.yarnpkg.com/frac/-/frac-1.1.2.tgz#3d74f7f6478c88a1b5020306d747dc6313c74d0b"
+ integrity sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==
+
fragment-cache@^0.2.1:
version "0.2.1"
resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
@@ -14853,6 +14891,13 @@ sprintf-js@~1.0.2:
resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
+ssf@~0.11.2:
+ version "0.11.2"
+ resolved "https://registry.yarnpkg.com/ssf/-/ssf-0.11.2.tgz#0b99698b237548d088fc43cdf2b70c1a7512c06c"
+ integrity sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==
+ dependencies:
+ frac "~1.1.2"
+
sshpk@^1.7.0:
version "1.17.0"
resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.17.0.tgz#578082d92d4fe612b13007496e543fa0fbcbe4c5"
@@ -16630,11 +16675,21 @@ winston@2.x:
isstream "0.1.x"
stack-trace "0.0.x"
+wmf@~1.0.1:
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/wmf/-/wmf-1.0.2.tgz#7d19d621071a08c2bdc6b7e688a9c435298cc2da"
+ integrity sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==
+
word-wrap@^1.2.3, word-wrap@~1.2.3:
version "1.2.3"
resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
+word@~0.3.0:
+ version "0.3.0"
+ resolved "https://registry.yarnpkg.com/word/-/word-0.3.0.tgz#8542157e4f8e849f4a363a288992d47612db9961"
+ integrity sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==
+
wordwrap@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
@@ -16727,6 +16782,19 @@ x-is-string@^0.1.0:
resolved "https://registry.yarnpkg.com/x-is-string/-/x-is-string-0.1.0.tgz#474b50865af3a49a9c4657f05acd145458f77d82"
integrity sha512-GojqklwG8gpzOVEVki5KudKNoq7MbbjYZCbyWzEz7tyPA7eleiE0+ePwOWQQRb5fm86rD3S8Tc0tSFf3AOv50w==
+xlsx@^0.18.5:
+ version "0.18.5"
+ resolved "https://registry.yarnpkg.com/xlsx/-/xlsx-0.18.5.tgz#16711b9113c848076b8a177022799ad356eba7d0"
+ integrity sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==
+ dependencies:
+ adler-32 "~1.3.0"
+ cfb "~1.2.1"
+ codepage "~1.15.0"
+ crc-32 "~1.2.1"
+ ssf "~0.11.2"
+ wmf "~1.0.1"
+ word "~0.3.0"
+
xml-name-validator@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"