orc-shared 5.10.0-dev.2 → 5.10.0-dev.21

package/src/actions/metadata.test.js

@@ -66,6 +66,10 @@ import {
 	GET_CUSTOMER_LOOKUP_SUCCESS,
 	GET_CUSTOMER_LOOKUP_FAILURE,
 	GET_CUSTOMER_LOOKUP_REQUEST,
+	GET_ORDER_ATTRIBUTE_GROUPS_SUCCESS,
+	getOrderAttributeGroups,
+	GET_ORDER_ATTRIBUTE_GROUPS_REQUEST,
+	GET_ORDER_ATTRIBUTE_GROUPS_FAILURE,
 } from "./metadata";
 
 jest.mock("../utils/buildUrl", () => {
@@ -600,3 +604,26 @@ describe("getProfileAttributeGroups", () => {
 			},
 		}));
 });
+
+describe("getOrderAttributeGroups", () => {
+	it("creates a RSAA to get order definitions", () =>
+		expect(getOrderAttributeGroups, "when called", "to exhaustively satisfy", {
+			[RSAA]: {
+				types: [
+					GET_ORDER_ATTRIBUTE_GROUPS_REQUEST,
+					GET_ORDER_ATTRIBUTE_GROUPS_SUCCESS,
+					GET_ORDER_ATTRIBUTE_GROUPS_FAILURE,
+				],
+				endpoint: 'URL: metadata/attributegroups/order ""',
+				method: "GET",
+				body: undefined,
+				credentials: "include",
+				bailout: expect.it("to be a function"),
+				headers: {
+					Accept: "application/json; charset=utf-8",
+					"Content-Type": "application/json",
+				},
+				options: { redirect: "follow" },
+			},
+		}));
+});

package/src/actions/requestsApi.js

@@ -62,6 +62,12 @@ export const getCustomerLookupsRequest = {
 	verb: "GET",
 };
 
+export const getOrderAttributeGroupsRequest = {
+	name: "getOrderAttributeGroupsRequest",
+	buildUrl: () => buildUrl(["metadata", "attributegroups", "order"]),
+	verb: "GET",
+};
+
 export const getOrderDefinitionRequest = {
 	name: "getOrderDefinitionRequest",
 	buildUrl: (name, queryParams) => buildUrl(["metadata", "definitions", "order", name], queryParams),

package/src/components/AppFrame/About.js

@@ -1,10 +1,8 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import { useSelector } from "react-redux";
-import styled, { css } from "styled-components";
-import transition from "styled-transition-group";
-import { ifFlag } from "../../utils";
-import Text from "../Text";
+import { FormattedMessage } from "react-intl";
+import { makeStyles } from "@material-ui/core/styles";
 import withClickOutside from "../../hocs/withClickOutside";
 import useViewState from "../../hooks/useViewState";
 import bgImage from "../../content/aboutBackground.png";
@@ -19,78 +17,84 @@ export const ABOUT_NAME = "__aboutBox";
 
 const getModalRoot = () => document.getElementById("modal");
 
-export const AboutBox = withClickOutside(transition.div`
-	box-sizing: border-box;
-	z-index: 9999;
-	position: absolute;
-	top: calc(50% - 210px);
-	left: calc(50% - 210px);
-	height: 420px;
-	width: 420px;
-	padding: 15px 20px;
-	color: #ffffff;
-	font-size: 13px;
-	line-height: 16px;
-	background: #0a0a07 url(${bgImage});
-	transition: opacity ${props => props.timeout}ms ease-out;
+const useStyles = makeStyles(() => ({
+	aboutBox: props => ({
+		boxSizing: "border-box",
+		zIndex: 9999,
+		position: "absolute",
+		top: "calc(50% - 210px)",
+		left: "calc(50% - 210px)",
+		height: "420px",
+		width: "420px",
+		padding: "15px 20px",
+		color: "#ffffff",
+		fontSize: "13px",
+		lineHeight: "16px",
+		background: `#0a0a07 url(${props.bgImage})`,
 
-	&:enter {
-		opacity: 0;
-	}
-	&:enter-active {
-		opacity: 1;
-	}
-	&:exit {
-		opacity: 1;
-	}
-	&:exit-active {
-		opacity: 0;
-	}
-`);
-AboutBox.defaultProps = { timeout: 800, unmountOnExit: true };
+		"&.enter-active": {
+			opacity: 1,
+			transition: "none",
+			visibility: "visible",
+		},
+		"&.exit-active": {
+			opacity: 0,
+			transition: "opacity 800ms ease-out, visibility 800ms linear 800ms;",
+			visibility: "hidden",
+		},
+	}),
+	closeButton: {
+		zIndex: 9999,
+		position: "absolute",
+		color: "#ffffff",
+		top: "15px",
+		right: "20px",
+		margin: "0",
+		cursor: "pointer",
+		opacity: "1",
 
-export const CloseButton = styled.p`
-	z-index: 9999;
-	position: absolute;
-	color: #ffffff;
-	top: 15px;
-	right: 20px;
-	margin: 0;
-	cursor: pointer;
-	opacity: 1;
+		"&:hover": {
+			opacity: 0.75,
+		},
+	},
+	aboutLink: {
+		color: "#337ab7",
+		textDecoration: "none",
+	},
+	aboutParagraph: {
+		marginTop: "20px",
+	},
+	longAboutParagraph: props => ({
+		marginTop: "20px",
+		fontSize: props.lang?.toLowerCase().startsWith("fr") ? "10px" : undefined,
+	}),
+}));
 
-	&:hover {
-		opacity: 0.75;
-	}
-`;
+export const AboutBox = withClickOutside(
+	React.forwardRef(({ children, className }, ref) => {
+		const classes = useStyles({ bgImage });
 
-export const AboutParagraph = styled.p`
-	margin-top: 20px;
-	${ifFlag(
-		"long",
-		css`
-			html[lang^="fr"] & {
-				font-size: 10px;
-			}
-		`,
-	)}
-`;
-
-export const AboutLink = styled.a`
-	color: #23527c;
-	text-decoration: none;
-`;
+		return (
+			<div ref={ref} className={`${classes.aboutBox} ${className ? className : ""}`}>
+				{children}
+			</div>
+		);
+	}),
+);
 
 export const getClickOutsideHandler = ({ show }, updateViewState) => {
 	return show
 		? event => {
 				event.stopPropagation();
 				updateViewState("show", false);
-		  }
+			}
 		: () => {};
 };
 
 export const About = ({ currentApplication }) => {
+	const lang = document.documentElement.lang;
+	const classes = useStyles({ lang });
+
 	const [viewState, updateViewState] = useViewState(ABOUT_NAME);
 	const version = useSelector(getVersionSelector);
 	const locale = useSelector(currentLocaleOrDefault);
@@ -98,84 +102,60 @@ export const About = ({ currentApplication }) => {
 	const aboutLinkUrl = "https://www.orckestra.com".concat(locale.substr(0, 2).toLowerCase() === "fr" ? "/fr" : "");
 
 	return (
-		<AboutBox in={viewState.show} onClickOutside={closeAboutBox}>
-			<CloseButton onClick={closeAboutBox}>
+		<AboutBox className={`${viewState.show ? "enter-active" : "exit-active"}`} onClickOutside={closeAboutBox}>
+			<p className={classes.closeButton} onClick={closeAboutBox}>
 				<img src={close} alt="X" />
-			</CloseButton>
+			</p>
 			<img src={logoImage} width="250" alt="Orckestra" />
-			<AboutParagraph>
-				<Text
-					message={{
-						...sharedMessages.ccVersion,
-						values: { version: version },
-					}}
-				/>
+			<p className={classes.aboutParagraph}>
+				<FormattedMessage {...sharedMessages.ccVersion} values={{ version: version }} />
 				{currentApplication && currentApplication.displayName
-					? [
-							<br key="application-br" />,
-							<Text
-								key="application-version"
-								message={currentApplication.displayName.concat(" ", window.BUILD_NUMBER)}
-							/>,
-					  ]
+					? [<br key="application-br" />, currentApplication.displayName.concat(" ", window.BUILD_NUMBER)]
 					: null}
 				{DEPENDENCIES && DEPENDENCIES["orc-shared"]
 					? [
 							<br key="orc-shared-br" />,
-							<Text
+							<FormattedMessage
 								key="orc-shared-version"
-								message={{
-									...sharedMessages.orcSharedVersion,
-									values: { version: trimStart(DEPENDENCIES["orc-shared"], "^") },
-								}}
+								{...sharedMessages.orcSharedVersion}
+								values={{ version: trimStart(DEPENDENCIES["orc-shared"], "^") }}
 							/>,
-					  ]
+						]
 					: null}
 				{DEPENDENCIES && DEPENDENCIES["orc-scripts"]
 					? [
 							<br key="orc-scripts-br" />,
-							<Text
+							<FormattedMessage
 								key="orc-scripts-version"
-								message={{
-									...sharedMessages.orcScriptsVersion,
-									values: { version: trimStart(DEPENDENCIES["orc-scripts"], "^") },
-								}}
+								{...sharedMessages.orcScriptsVersion}
+								values={{ version: trimStart(DEPENDENCIES["orc-scripts"], "^") }}
 							/>,
-					  ]
+						]
 					: null}
 				{DEPENDENCIES && DEPENDENCIES["orc-secret"]
 					? [
 							<br key="orc-secret-br" />,
-							<Text
+							<FormattedMessage
 								key="orc-secret-version"
-								message={{
-									...sharedMessages.orcSecretVersion,
-									values: { version: trimStart(DEPENDENCIES["orc-secret"], "^") },
-								}}
+								{...sharedMessages.orcSecretVersion}
+								values={{ version: trimStart(DEPENDENCIES["orc-secret"], "^") }}
 							/>,
-					  ]
+						]
 					: null}
-			</AboutParagraph>
-			<AboutParagraph long>
-				<Text message={sharedMessages.copyrightTermsNotice} />
-			</AboutParagraph>
-			<AboutParagraph>
-				<AboutLink href={aboutLinkUrl} target="_blank">
-					<Text message={sharedMessages.ccName} />
-				</AboutLink>
-			</AboutParagraph>
-			<AboutParagraph>
-				<Text
-					message={{
-						...sharedMessages.copyright,
-						values: {
-							year: new Date().getFullYear(),
-						},
-					}}
-				/>
+			</p>
+			<p className={classes.longAboutParagraph}>
+				<FormattedMessage {...sharedMessages.copyrightTermsNotice} />
+			</p>
+			<p className={classes.aboutParagraph}>
+				<a className={classes.aboutLink} href={aboutLinkUrl} target="_blank" rel="noreferrer">
+					<FormattedMessage {...sharedMessages.ccName} />
+				</a>
+			</p>
+			<p className={classes.aboutParagraph}>
+				<FormattedMessage {...sharedMessages.copyright} values={{ year: new Date().getFullYear() }} />
 				<br />
-				<Text message={sharedMessages.allRightsReserved} />
-			</AboutParagraph>
+				<FormattedMessage {...sharedMessages.allRightsReserved} />
+			</p>
 		</AboutBox>
 	);
 };

package/src/components/AppFrame/About.test.js

@@ -6,13 +6,14 @@ import sinon from "sinon";
 import bgImage from "../../content/aboutBackground.png";
 import logoImage from "../../content/aboutLogo.png";
 import close from "../../content/close.png";
-import { ABOUT_NAME, AboutBox, AboutParagraph, AboutLink, About, getClickOutsideHandler, CloseButton } from "./About";
+import { ABOUT_NAME, AboutBox, About, getClickOutsideHandler } from "./About";
 import { setStateField } from "../../actions/view";
-import { extractMessages } from "./../../utils/testUtils";
+import { extractMessages, TestWrapper } from "./../../utils/testUtils";
 import sharedMessages from "./../../sharedMessages";
 import { stringifyWithoutQuotes } from "./../../utils/parseHelper";
 
 const messages = extractMessages(sharedMessages);
+
 describe("About", () => {
 	let state, store;
 	const ccVersion = "5.1.9.5";
@@ -48,20 +49,68 @@ describe("About", () => {
 		};
 		global.BUILD_NUMBER = "2.3.2";
 		expect(
-			<Provider store={store}>
-				<IntlProvider locale="en-US" messages={messages}>
-					<About viewState={{ show: true }} currentApplication={{ displayName: "An application" }} />
-				</IntlProvider>
-			</Provider>,
+			<TestWrapper provider={{ store }} intlProvider={{ messages }} stylesProvider>
+				<About currentApplication={{ displayName: "An application" }} />
+			</TestWrapper>,
+			"when mounted",
+			"to satisfy",
+			<TestWrapper intlProvider={{ messages }} stylesProvider>
+				<AboutBox className="enter-active">
+					<p>
+						<img src={close} alt="X" />
+					</p>
+					<img src={logoImage} alt="Orckestra" />
+					<p>
+						{stringifyWithoutQuotes(messages["orc-shared.ccVersion"]).replace("{version}", ccVersion)}
+						<br />
+						An application 2.3.2
+						<br />
+						{stringifyWithoutQuotes(messages["orc-shared.orcSharedVersion"]).replace("{version}", orcSharedVersion)}
+						<br />
+						{stringifyWithoutQuotes(messages["orc-shared.orcScriptsVersion"]).replace("{version}", orcScriptsVersion)}
+						<br />
+						{stringifyWithoutQuotes(messages["orc-shared.orcSecretVersion"]).replace("{version}", orcSecretVersion)}
+					</p>
+					<p>{stringifyWithoutQuotes(messages["orc-shared.copyrightTermsNotice"])}</p>
+					<p>
+						<a href="https://www.orckestra.com">{stringifyWithoutQuotes(messages["orc-shared.ccName"])}</a>
+					</p>
+					<p>
+						{stringifyWithoutQuotes(messages["orc-shared.copyright"]).replace("{year}", new Date().getFullYear())}
+						<br />
+						{stringifyWithoutQuotes(messages["orc-shared.allRightsReserved"])}
+					</p>
+				</AboutBox>
+			</TestWrapper>,
+		);
+	});
+
+	it("renders a closed about box", () => {
+		const orcSharedVersion = "2.9.0";
+		const orcScriptsVersion = "1.2.3";
+		const orcSecretVersion = "5.1.7";
+
+		global.DEPENDENCIES = {
+			"orc-scripts": orcScriptsVersion,
+			"orc-secret": orcSecretVersion,
+			"orc-shared": orcSharedVersion,
+		};
+		global.BUILD_NUMBER = "2.3.2";
+		state = state.setIn(["view", ABOUT_NAME, "show"], false);
+
+		expect(
+			<TestWrapper provider={{ store }} intlProvider={{ messages }} stylesProvider>
+				<About currentApplication={{ displayName: "An application" }} />
+			</TestWrapper>,
 			"when mounted",
 			"to satisfy",
-			<IntlProvider locale="en-US" messages={messages}>
-				<AboutBox in>
-					<CloseButton>
+			<TestWrapper intlProvider={{ messages }} stylesProvider>
+				<AboutBox className="exit-active">
+					<p>
 						<img src={close} alt="X" />
-					</CloseButton>
+					</p>
 					<img src={logoImage} alt="Orckestra" />
-					<AboutParagraph>
+					<p>
 						{stringifyWithoutQuotes(messages["orc-shared.ccVersion"]).replace("{version}", ccVersion)}
 						<br />
 						An application 2.3.2
@@ -71,20 +120,18 @@ describe("About", () => {
 						{stringifyWithoutQuotes(messages["orc-shared.orcScriptsVersion"]).replace("{version}", orcScriptsVersion)}
 						<br />
 						{stringifyWithoutQuotes(messages["orc-shared.orcSecretVersion"]).replace("{version}", orcSecretVersion)}
-					</AboutParagraph>
-					<AboutParagraph long>{stringifyWithoutQuotes(messages["orc-shared.copyrightTermsNotice"])}</AboutParagraph>
-					<AboutParagraph>
-						<AboutLink href="https://www.orckestra.com">
-							{stringifyWithoutQuotes(messages["orc-shared.ccName"])}
-						</AboutLink>
-					</AboutParagraph>
-					<AboutParagraph>
+					</p>
+					<p>{stringifyWithoutQuotes(messages["orc-shared.copyrightTermsNotice"])}</p>
+					<p>
+						<a href="https://www.orckestra.com">{stringifyWithoutQuotes(messages["orc-shared.ccName"])}</a>
+					</p>
+					<p>
 						{stringifyWithoutQuotes(messages["orc-shared.copyright"]).replace("{year}", new Date().getFullYear())}
 						<br />
 						{stringifyWithoutQuotes(messages["orc-shared.allRightsReserved"])}
-					</AboutParagraph>
+					</p>
 				</AboutBox>
-			</IntlProvider>,
+			</TestWrapper>,
 		);
 	});
 
@@ -100,20 +147,18 @@ describe("About", () => {
 		};
 		global.BUILD_NUMBER = "2.3.2";
 		expect(
-			<Provider store={store}>
-				<IntlProvider locale="en-US" messages={messages}>
-					<About viewState={{ show: true }} currentApplication={{ displayName: "An application" }} />
-				</IntlProvider>
-			</Provider>,
+			<TestWrapper provider={{ store }} intlProvider={{ messages }} stylesProvider>
+				<About currentApplication={{ displayName: "An application" }} />
+			</TestWrapper>,
 			"when mounted",
 			"to satisfy",
-			<IntlProvider locale="en-US" messages={messages}>
-				<AboutBox in>
-					<CloseButton>
+			<TestWrapper intlProvider={{ messages }} stylesProvider>
+				<AboutBox className="enter-active">
+					<p>
 						<img src={close} alt="X" />
-					</CloseButton>
+					</p>
 					<img src={logoImage} alt="Orckestra" />
-					<AboutParagraph>
+					<p>
 						{stringifyWithoutQuotes(messages["orc-shared.ccVersion"]).replace("{version}", ccVersion)}
 						<br />
 						An application 2.3.2
@@ -132,20 +177,18 @@ describe("About", () => {
 							"{version}",
 							orcSecretVersion.replace("^", ""),
 						)}
-					</AboutParagraph>
-					<AboutParagraph long>{stringifyWithoutQuotes(messages["orc-shared.copyrightTermsNotice"])}</AboutParagraph>
-					<AboutParagraph>
-						<AboutLink href="https://www.orckestra.com">
-							{stringifyWithoutQuotes(messages["orc-shared.ccName"])}
-						</AboutLink>
-					</AboutParagraph>
-					<AboutParagraph>
+					</p>
+					<p>{stringifyWithoutQuotes(messages["orc-shared.copyrightTermsNotice"])}</p>
+					<p>
+						<a href="https://www.orckestra.com">{stringifyWithoutQuotes(messages["orc-shared.ccName"])}</a>
+					</p>
+					<p>
 						{stringifyWithoutQuotes(messages["orc-shared.copyright"]).replace("{year}", new Date().getFullYear())}
 						<br />
 						{stringifyWithoutQuotes(messages["orc-shared.allRightsReserved"])}
-					</AboutParagraph>
+					</p>
 				</AboutBox>
-			</IntlProvider>,
+			</TestWrapper>,
 		);
 	});
 
@@ -153,99 +196,94 @@ describe("About", () => {
 		expect(
 			<Provider store={store}>
 				<IntlProvider locale="en-US" messages={messages}>
-					<About viewState={{ show: true }} />
+					<About />
 				</IntlProvider>
 			</Provider>,
 			"when mounted",
 			"with event",
 			{ type: "click", target: '[alt="X"]' },
-		).then(() =>
-			expect(store.dispatch, "to have calls satisfying", [{ args: [setStateField(ABOUT_NAME, "show", false)] }]),
+		).then(
+			() => expect(store.dispatch, "to have calls satisfying", [{ args: [setStateField(ABOUT_NAME, "show", false)] }]),
+			expect.it("to have class", "exit-active"),
 		));
 
 	it("renders an about box with messages and background images but without versions", () => {
 		global.DEPENDENCIES = {};
 		global.BUILD_NUMBER = null;
 		expect(
-			<Provider store={store}>
-				<IntlProvider locale="en-US" messages={messages}>
-					<About viewState={{ show: true }} />
-				</IntlProvider>
-			</Provider>,
+			<TestWrapper provider={{ store }} intlProvider={{ messages }} stylesProvider>
+				<About />
+			</TestWrapper>,
 			"when mounted",
 			"to satisfy",
 
-			<IntlProvider locale="en-US" messages={messages}>
-				<AboutBox in>
-					<CloseButton>
+			<TestWrapper intlProvider={{ messages }} stylesProvider>
+				<AboutBox className="enter-active">
+					<p>
 						<img src={close} alt="X" />
-					</CloseButton>
+					</p>
 					<img src={logoImage} alt="Orckestra" />
-					<AboutParagraph>
-						{stringifyWithoutQuotes(messages["orc-shared.ccVersion"]).replace("{version}", ccVersion)}
-					</AboutParagraph>
-					<AboutParagraph long>{stringifyWithoutQuotes(messages["orc-shared.copyrightTermsNotice"])}</AboutParagraph>
-					<AboutParagraph>
-						<AboutLink href="https://www.orckestra.com">
-							{stringifyWithoutQuotes(messages["orc-shared.ccName"])}
-						</AboutLink>
-					</AboutParagraph>
-					<AboutParagraph>
+					<p>{stringifyWithoutQuotes(messages["orc-shared.ccVersion"]).replace("{version}", ccVersion)}</p>
+					<p>{stringifyWithoutQuotes(messages["orc-shared.copyrightTermsNotice"])}</p>
+					<p>
+						<a href="https://www.orckestra.com">{stringifyWithoutQuotes(messages["orc-shared.ccName"])}</a>
+					</p>
+					<p>
 						{stringifyWithoutQuotes(messages["orc-shared.copyright"]).replace("{year}", new Date().getFullYear())}
 						<br />
 						{stringifyWithoutQuotes(messages["orc-shared.allRightsReserved"])}
-					</AboutParagraph>
+					</p>
 				</AboutBox>
-			</IntlProvider>,
+			</TestWrapper>,
 		);
 	});
 
 	it("renders an about box with about ling to the french version of the web site.", () => {
 		state = state.setIn(["locale", "locale"], "FR-FR");
+
+		Object.defineProperty(document.documentElement, "lang", {
+			value: "FR-FR",
+			configurable: true,
+		});
+
 		expect(
-			<Provider store={store}>
-				<IntlProvider locale="en-US" messages={messages}>
-					<About viewState={{ show: true }} />
-				</IntlProvider>
-			</Provider>,
+			<TestWrapper provider={{ store }} intlProvider={{ messages }} stylesProvider>
+				<About />
+			</TestWrapper>,
 			"when mounted",
 			"to satisfy",
-			<IntlProvider locale="en-US" messages={messages}>
-				<AboutBox in>
-					<CloseButton>
+			<TestWrapper intlProvider={{ messages }} stylesProvider>
+				<AboutBox className="enter-active">
+					<p>
 						<img src={close} alt="X" />
-					</CloseButton>
+					</p>
 					<img src={logoImage} alt="Orckestra" />
-					<AboutParagraph>
-						{stringifyWithoutQuotes(messages["orc-shared.ccVersion"]).replace("{version}", ccVersion)}
-					</AboutParagraph>
-					<AboutParagraph long>{stringifyWithoutQuotes(messages["orc-shared.copyrightTermsNotice"])}</AboutParagraph>
-					<AboutParagraph>
-						<AboutLink href="https://www.orckestra.com/fr">
-							{stringifyWithoutQuotes(messages["orc-shared.ccName"])}
-						</AboutLink>
-					</AboutParagraph>
-					<AboutParagraph>
+					<p>{stringifyWithoutQuotes(messages["orc-shared.ccVersion"]).replace("{version}", ccVersion)}</p>
+					<p>{stringifyWithoutQuotes(messages["orc-shared.copyrightTermsNotice"])}</p>
+					<p>
+						<a href="https://www.orckestra.com/fr">{stringifyWithoutQuotes(messages["orc-shared.ccName"])}</a>
+					</p>
+					<p>
 						{stringifyWithoutQuotes(messages["orc-shared.copyright"]).replace("{year}", new Date().getFullYear())}
 						<br />
 						{stringifyWithoutQuotes(messages["orc-shared.allRightsReserved"])}
-					</AboutParagraph>
+					</p>
 				</AboutBox>
-			</IntlProvider>,
+			</TestWrapper>,
 		);
 	});
 
 	describe("AboutBox", () => {
 		it("has a background image", () =>
-			expect(<AboutBox in />, "when mounted", "to have style rules satisfying", "to contain", bgImage));
+			expect(<AboutBox />, "when mounted", "to have style rules satisfying", "to contain", bgImage));
 
 		it("renders an opacity-transitioning box", () =>
 			expect(
-				<AboutBox in />,
+				<AboutBox />,
 				"when mounted",
 				"to have style rules satisfying",
 				"to contain",
-				"transition: opacity 800ms ease-out;",
+				"transition: opacity 800ms ease-out, visibility 800ms linear 800ms;",
 			));
 	});