feat: feedback updates

Tobey123 · Oct 30, 2024 · c49a9da · c49a9da
1 parent abc2ec2
commit c49a9da
Show file tree

Hide file tree

Showing 14 changed files with 162 additions and 92 deletions.
diff --git a/frontend/src/api/preferences/updateOrgPreference.ts b/frontend/src/api/preferences/updateOrgPreference.ts
@@ -10,9 +10,12 @@ const updateOrgPreference = async (
 ): Promise<
 	SuccessResponse<UpdateOrgPreferenceResponseProps> | ErrorResponse
 > => {
-	const response = await axios.put(`/org/preferences`, {
-		preference_value: preferencePayload.value,
-	});
+	const response = await axios.put(
+		`/org/preferences/${preferencePayload.preferenceID}`,
+		{
+			preference_value: preferencePayload.value,
+		},
+	);
 
 	return {
 		statusCode: 200,

diff --git a/frontend/src/container/OnboardingQuestionaire/AboutSigNozQuestions/AboutSigNozQuestions.tsx b/frontend/src/container/OnboardingQuestionaire/AboutSigNozQuestions/AboutSigNozQuestions.tsx
@@ -22,7 +22,7 @@ interface AboutSigNozQuestionsProps {
 }
 
 const hearAboutSignozOptions: Record<string, string> = {
-	blog: 'Blog',
+	search: 'Google / Search',
 	hackerNews: 'Hacker News',
 	linkedin: 'LinkedIn',
 	twitter: 'Twitter',
@@ -144,7 +144,7 @@ export function AboutSigNozQuestions({
 								<Input
 									type="text"
 									className="onboarding-questionaire-other-input"
-									placeholder="Please specify your interest"
+									placeholder="Tell us how you got to know about us"
 									value={otherAboutSignoz}
 									autoFocus
 									addonAfter={
@@ -171,9 +171,7 @@ export function AboutSigNozQuestions({
 					</div>
 
 					<div className="form-group">
-						<div className="question">
-							What are you interested in doing with SigNoz?
-						</div>
+						<div className="question">What got you interested in SigNoz?</div>
 						<div className="two-column-grid">
 							{Object.keys(interestedInOptions).map((option: string) => (
 								<Button

diff --git a/frontend/src/container/OnboardingQuestionaire/InviteTeamMembers/InviteTeamMembers.tsx b/frontend/src/container/OnboardingQuestionaire/InviteTeamMembers/InviteTeamMembers.tsx
@@ -171,7 +171,7 @@ function InviteTeamMembers({
 	return (
 		<div className="questions-container">
 			<Typography.Title level={3} className="title">
-				Observability made collaborative
+				Invite your team members
 			</Typography.Title>
 			<Typography.Paragraph className="sub-title">
 				The more your team uses SigNoz, the stronger your observability. Share

diff --git a/frontend/src/container/OnboardingQuestionaire/OnboardingFooter/OnboardingFooter.styles.scss b/frontend/src/container/OnboardingQuestionaire/OnboardingFooter/OnboardingFooter.styles.scss
@@ -15,6 +15,9 @@
 	border-radius: 4px;
 	border: 1px solid var(--Greyscale-Slate-500, #161922);
 	background: var(--Ink-400, #121317);
+
+	width: 100%;
+	max-width: 600px;
 }
 
 .footer-container .footer-content {

diff --git a/frontend/src/container/OnboardingQuestionaire/OnboardingFooter/OnboardingFooter.tsx b/frontend/src/container/OnboardingQuestionaire/OnboardingFooter/OnboardingFooter.tsx
@@ -1,6 +1,6 @@
 import './OnboardingFooter.styles.scss';
 
-import { ArrowUpRight, Dot } from 'lucide-react';
+import { Dot } from 'lucide-react';
 
 export function OnboardingFooter(): JSX.Element {
 	return (
@@ -25,30 +25,6 @@ export function OnboardingFooter(): JSX.Element {
 					<img src="/logos/soc2.svg" alt="SOC2" className="footer-logo" />
 					<span className="footer-text">SOC2</span>
 				</a>
-
-				<Dot size={24} color="#2C3140" />
-				<a
-					href="https://signoz.io/privacy/"
-					target="_blank"
-					className="footer-link"
-					rel="noreferrer"
-				>
-					{' '}
-					{/* Please add correct url */}
-					<span className="footer-text">Privacy</span> <ArrowUpRight size={14} />
-				</a>
-
-				<Dot size={24} color="#2C3140" />
-				<a
-					href="https://signoz.io/security/"
-					target="_blank"
-					className="footer-link"
-					rel="noreferrer"
-				>
-					{' '}
-					{/* Please add correct url */}
-					<span className="footer-text">Security</span> <ArrowUpRight size={14} />
-				</a>
 			</div>
 		</section>
 	);

diff --git a/frontend/src/container/OnboardingQuestionaire/OnboardingHeader/OnboardingHeader.styles.scss b/frontend/src/container/OnboardingQuestionaire/OnboardingHeader/OnboardingHeader.styles.scss
@@ -40,6 +40,7 @@
 	border-radius: 2px;
 	border: 1px solid var(--Greyscale-Slate-400, #1d212d);
 	background: var(--Ink-300, #16181d);
+	box-shadow: none;
 }
 
 .header-container .get-help-container img {

diff --git a/frontend/src/container/OnboardingQuestionaire/OnboardingHeader/OnboardingHeader.tsx b/frontend/src/container/OnboardingQuestionaire/OnboardingHeader/OnboardingHeader.tsx
@@ -1,19 +1,26 @@
 import './OnboardingHeader.styles.scss';
 
 import { Color } from '@signozhq/design-tokens';
+import { Button } from 'antd';
 import { LifeBuoy } from 'lucide-react';
 
 export function OnboardingHeader(): JSX.Element {
+	const handleGetHelpClick = (): void => {
+		if (window.Intercom) {
+			window.Intercom('showNewMessage', '');
+		}
+	};
+
 	return (
 		<div className="header-container">
 			<div className="logo-container">
 				<img src="/Logos/signoz-brand-logo-new.svg" alt="SigNoz" />
 				<span className="logo-text">SigNoz</span>
 			</div>
-			<div className="get-help-container">
+			<Button className="get-help-container" onClick={handleGetHelpClick}>
 				<LifeBuoy size={12} color={Color.BG_VANILLA_400} />
 				<span className="get-help-text ">Get Help</span>
-			</div>
+			</Button>
 		</div>
 	);
 }
diff --git a/frontend/src/container/OnboardingQuestionaire/OnboardingQuestionaire.styles.scss b/frontend/src/container/OnboardingQuestionaire/OnboardingQuestionaire.styles.scss
@@ -386,3 +386,13 @@
 		margin-top: 12px;
 	}
 }
+
+.onboarding-questionaire-loading-container {
+	width: 100%;
+	display: flex;
+	height: 100vh;
+	max-width: 600px;
+	justify-content: center;
+	align-items: center;
+	margin: 0 auto;
+}
diff --git a/frontend/src/container/OnboardingQuestionaire/OptimiseSignozNeeds/OptimiseSignozNeeds.tsx b/frontend/src/container/OnboardingQuestionaire/OptimiseSignozNeeds/OptimiseSignozNeeds.tsx
@@ -16,10 +16,11 @@ interface OptimiseSignozNeedsProps {
 	onBack: () => void;
 	onWillDoLater: () => void;
 	isUpdatingProfile: boolean;
+	isNextDisabled: boolean;
 }
 
 const logMarks: SliderSingleProps['marks'] = {
-	0: '2 GB',
+	0: '0 GB',
 	25: '25 GB',
 	50: '50 GB',
 	100: '100 GB',
@@ -50,15 +51,16 @@ function OptimiseSignozNeeds({
 	onNext,
 	onBack,
 	onWillDoLater,
+	isNextDisabled,
 }: OptimiseSignozNeedsProps): JSX.Element {
 	const [logsPerDay, setLogsPerDay] = useState<number>(
-		optimiseSignozDetails?.logsPerDay || 25,
+		optimiseSignozDetails?.logsPerDay || 0,
 	);
 	const [hostsPerDay, setHostsPerDay] = useState<number>(
-		optimiseSignozDetails?.hostsPerDay || 40,
+		optimiseSignozDetails?.hostsPerDay || 0,
 	);
 	const [services, setServices] = useState<number>(
-		optimiseSignozDetails?.services || 10,
+		optimiseSignozDetails?.services || 0,
 	);
 
 	useEffect(() => {
@@ -191,7 +193,7 @@ function OptimiseSignozNeeds({
 						type="primary"
 						className="next-button"
 						onClick={handleOnNext}
-						disabled={isUpdatingProfile}
+						disabled={isUpdatingProfile || isNextDisabled}
 					>
 						Next{' '}
 						{isUpdatingProfile ? (
@@ -204,7 +206,7 @@ function OptimiseSignozNeeds({
 
 				<div className="do-later-container">
 					<Button type="link" onClick={handleWillDoLater}>
-						I&apos;ll do this later
+						Skip for now
 					</Button>
 				</div>
 			</div>

diff --git a/frontend/src/container/OnboardingQuestionaire/OrgQuestions/OrgQuestions.tsx b/frontend/src/container/OnboardingQuestionaire/OrgQuestions/OrgQuestions.tsx
@@ -42,10 +42,10 @@ const observabilityTools = {
 };
 
 const o11yFamiliarityOptions: Record<string, string> = {
-	new: "I'm completely new",
-	builtStack: "I've built a stack before",
-	experienced: 'I have some experience',
-	dontKnow: "I don't know what it is",
+	beginner: 'Basic Understanding',
+	intermediate: 'Somewhat Familiar',
+	expert: 'Very Familiar',
+	notFamiliar: "I'm not familiar with it",
 };
 
 function OrgQuestions({
@@ -254,7 +254,7 @@ function OrgQuestions({
 
 					<div className="form-group">
 						<div className="question">
-							Are you familiar with observability (o11y)?
+							Are you familiar with setting upobservability (o11y)?
 						</div>
 						<div className="two-column-grid">
 							{Object.keys(o11yFamiliarityOptions).map((option: string) => (