diff --git a/app/client/src/pages/setup/DataCollectionForm.tsx b/app/client/src/pages/setup/DataCollectionForm.tsx new file mode 100644 index 0000000000..c7d6f67595 --- /dev/null +++ b/app/client/src/pages/setup/DataCollectionForm.tsx @@ -0,0 +1,75 @@ +import React, { memo, useState } from "react"; +import styled from "styled-components"; +import { Toggle } from "design-system"; +import { ControlWrapper } from "components/propertyControls/StyledControls"; +import { + AllowToggle, + AllowToggleLabel, + AllowToggleWrapper, + FormBodyWrapper, + FormHeaderIndex, + FormHeaderLabel, + FormHeaderSubtext, + FormHeaderWrapper, + StyledLink as Link, +} from "./common"; +import { TELEMETRY_URL } from "constants/ThirdPartyConstants"; +import { + createMessage, + WELCOME_FORM_DATA_COLLECTION_BODY, + WELCOME_FORM_DATA_COLLECTION_HEADER, + WELCOME_FORM_DATA_COLLECTION_LABEL_DISABLE, + WELCOME_FORM_DATA_COLLECTION_LABEL_ENABLE, + WELCOME_FORM_DATA_COLLECTION_LINK, +} from "@appsmith/constants/messages"; + +const DataCollectionFormWrapper = styled.div` + width: 100%; + position: relative; + padding-left: ${(props) => props.theme.spaces[17] * 2}px; +`; + +const StyledLink = styled(Link)` + display: inline-block; + margin-top: 8px; +`; + +export default memo(function DataCollectionForm() { + const [allowCollection, setAllowCollection] = useState(true); + return ( + + + 2. + + {createMessage(WELCOME_FORM_DATA_COLLECTION_HEADER)} + + + {createMessage(WELCOME_FORM_DATA_COLLECTION_BODY)} +
+ + {createMessage(WELCOME_FORM_DATA_COLLECTION_LINK)} + +
+
+ + + + + setAllowCollection(value)} + value={allowCollection} + /> + + + {allowCollection + ? createMessage(WELCOME_FORM_DATA_COLLECTION_LABEL_ENABLE) + : createMessage(WELCOME_FORM_DATA_COLLECTION_LABEL_DISABLE)} + + + + +
+ ); +}); diff --git a/app/client/src/pages/setup/SetupForm.tsx b/app/client/src/pages/setup/SetupForm.tsx index 9efb0a233f..eac3abae6e 100644 --- a/app/client/src/pages/setup/SetupForm.tsx +++ b/app/client/src/pages/setup/SetupForm.tsx @@ -1,19 +1,20 @@ -import React, { useRef, useState } from "react"; +import React, { useRef } from "react"; import styled from "styled-components"; import { connect } from "react-redux"; +import DataCollectionForm from "./DataCollectionForm"; import DetailsForm from "./DetailsForm"; import NewsletterForm from "./NewsletterForm"; import AppsmithLogo from "assets/images/appsmith_logo.png"; import { - WELCOME_FORM_CUSTOM_USECASE_FIELD_NAME, + WELCOME_FORM_USECASE_FIELD_NAME, WELCOME_FORM_EMAIL_FIELD_NAME, WELCOME_FORM_NAME, WELCOME_FORM_NAME_FIELD_NAME, WELCOME_FORM_PASSWORD_FIELD_NAME, WELCOME_FORM_ROLE_FIELD_NAME, WELCOME_FORM_ROLE_NAME_FIELD_NAME, - WELCOME_FORM_USECASE_FIELD_NAME, WELCOME_FORM_VERIFY_PASSWORD_FIELD_NAME, + WELCOME_FORM_CUSTOM_USECASE_FIELD_NAME, } from "@appsmith/constants/forms"; import { FormErrors, @@ -25,6 +26,7 @@ import { import { isEmail, isStrongPassword } from "utils/formhelpers"; import { AppState } from "@appsmith/reducers"; import { SUPER_USER_SUBMIT_PATH } from "@appsmith/constants/ApiConstants"; +import { useState } from "react"; const PageWrapper = styled.div` width: 100%; @@ -207,6 +209,7 @@ function SetupForm(props: SetupFormProps) { +