From e62c2ae50ffa331be14d19ad95ade450d62146aa Mon Sep 17 00:00:00 2001 From: Zhang Ziqing <69516975+ziqing26@users.noreply.github.com> Date: Mon, 31 Oct 2022 01:58:54 +0800 Subject: [PATCH] [offers][feat] add event tracking and save to profile in submisison page (#465) * [offers][feat] add event tracking and save to profile in form * [offers][refactor] refactor feature page * [offers][fix] fix offer table border for action column --- .../components/offers/OffersNavigation.tsx | 1 - .../offers/dashboard/DashboardProfileCard.tsx | 12 ++- .../{landing => features}/LeftTextCard.tsx | 0 .../{landing => features}/RightTextCard.tsx | 0 .../images/offers-analysis.png | Bin .../images/offers-browse.png | Bin .../images/offers-profile.png | Bin .../offersSubmission/OffersProfileSave.tsx | 63 +++++++++---- .../offersSubmission/OffersSubmissionForm.tsx | 25 +++++- .../offers/profile/ProfileComments.tsx | 12 +++ .../src/components/offers/table/OffersRow.tsx | 2 +- .../components/offers/table/OffersTable.tsx | 9 +- apps/portal/src/pages/offers/features.tsx | 83 ++++++++++-------- apps/portal/src/pages/offers/index.tsx | 12 +++ .../offers/submit/result/[offerProfileId].tsx | 8 +- 15 files changed, 165 insertions(+), 62 deletions(-) rename apps/portal/src/components/offers/{landing => features}/LeftTextCard.tsx (100%) rename apps/portal/src/components/offers/{landing => features}/RightTextCard.tsx (100%) rename apps/portal/src/components/offers/{landing => features}/images/offers-analysis.png (100%) rename apps/portal/src/components/offers/{landing => features}/images/offers-browse.png (100%) rename apps/portal/src/components/offers/{landing => features}/images/offers-profile.png (100%) diff --git a/apps/portal/src/components/offers/OffersNavigation.tsx b/apps/portal/src/components/offers/OffersNavigation.tsx index 4de1fc5e..26719933 100644 --- a/apps/portal/src/components/offers/OffersNavigation.tsx +++ b/apps/portal/src/components/offers/OffersNavigation.tsx @@ -12,7 +12,6 @@ const navigationAuthenticated: ProductNavigationItems = [ ]; const config = { - // TODO: Change this to your own GA4 measurement ID. googleAnalyticsMeasurementID: 'G-34XRGLEVCF', logo: ( Tech Offers Repo diff --git a/apps/portal/src/components/offers/dashboard/DashboardProfileCard.tsx b/apps/portal/src/components/offers/dashboard/DashboardProfileCard.tsx index af4a0cfe..1fcd6e57 100644 --- a/apps/portal/src/components/offers/dashboard/DashboardProfileCard.tsx +++ b/apps/portal/src/components/offers/dashboard/DashboardProfileCard.tsx @@ -2,6 +2,7 @@ import { useRouter } from 'next/router'; import { ArrowRightIcon, XMarkIcon } from '@heroicons/react/24/outline'; import { Button, useToast } from '@tih/ui'; +import { useGoogleAnalytics } from '~/components/global/GoogleAnalytics'; import DashboardOfferCard from '~/components/offers/dashboard/DashboardOfferCard'; import { formatDate } from '~/utils/offers/time'; @@ -10,7 +11,6 @@ import { trpc } from '~/utils/trpc'; import ProfilePhotoHolder from '../profile/ProfilePhotoHolder'; import type { UserProfile, UserProfileOffer } from '~/types/offers'; - type Props = Readonly<{ profile: UserProfile; }>; @@ -22,6 +22,7 @@ export default function DashboardProfileCard({ const router = useRouter(); const trpcContext = trpc.useContext(); const PROFILE_URL = `/offers/profile/${id}?token=${token}`; + const { event: gaEvent } = useGoogleAnalytics(); const removeSavedProfileMutation = trpc.useMutation( 'offers.user.profile.removeFromUserProfile', { @@ -97,7 +98,14 @@ export default function DashboardProfileCard({ label="Read full profile" size="md" variant="secondary" - onClick={() => router.push(PROFILE_URL)} + onClick={() => { + gaEvent({ + action: 'offers.view_profile_from_dashboard', + category: 'engagement', + label: 'View profile from dashboard', + }); + router.push(PROFILE_URL); + }} /> diff --git a/apps/portal/src/components/offers/landing/LeftTextCard.tsx b/apps/portal/src/components/offers/features/LeftTextCard.tsx similarity index 100% rename from apps/portal/src/components/offers/landing/LeftTextCard.tsx rename to apps/portal/src/components/offers/features/LeftTextCard.tsx diff --git a/apps/portal/src/components/offers/landing/RightTextCard.tsx b/apps/portal/src/components/offers/features/RightTextCard.tsx similarity index 100% rename from apps/portal/src/components/offers/landing/RightTextCard.tsx rename to apps/portal/src/components/offers/features/RightTextCard.tsx diff --git a/apps/portal/src/components/offers/landing/images/offers-analysis.png b/apps/portal/src/components/offers/features/images/offers-analysis.png similarity index 100% rename from apps/portal/src/components/offers/landing/images/offers-analysis.png rename to apps/portal/src/components/offers/features/images/offers-analysis.png diff --git a/apps/portal/src/components/offers/landing/images/offers-browse.png b/apps/portal/src/components/offers/features/images/offers-browse.png similarity index 100% rename from apps/portal/src/components/offers/landing/images/offers-browse.png rename to apps/portal/src/components/offers/features/images/offers-browse.png diff --git a/apps/portal/src/components/offers/landing/images/offers-profile.png b/apps/portal/src/components/offers/features/images/offers-profile.png similarity index 100% rename from apps/portal/src/components/offers/landing/images/offers-profile.png rename to apps/portal/src/components/offers/features/images/offers-profile.png diff --git a/apps/portal/src/components/offers/offersSubmission/OffersProfileSave.tsx b/apps/portal/src/components/offers/offersSubmission/OffersProfileSave.tsx index 26d358a4..351e8c4c 100644 --- a/apps/portal/src/components/offers/offersSubmission/OffersProfileSave.tsx +++ b/apps/portal/src/components/offers/offersSubmission/OffersProfileSave.tsx @@ -1,9 +1,14 @@ // Import { useState } from 'react'; // import { setTimeout } from 'timers'; +import { useState } from 'react'; import { DocumentDuplicateIcon } from '@heroicons/react/20/solid'; +import { BookmarkSquareIcon, CheckIcon } from '@heroicons/react/24/outline'; import { Button, TextInput, useToast } from '@tih/ui'; +import { useGoogleAnalytics } from '~/components/global/GoogleAnalytics'; + import { copyProfileLink, getProfileLink } from '~/utils/offers/link'; +import { trpc } from '~/utils/trpc'; type OfferProfileSaveProps = Readonly<{ profileId: string; @@ -15,16 +20,39 @@ export default function OffersProfileSave({ token, }: OfferProfileSaveProps) { const { showToast } = useToast(); - // Const [isSaving, setSaving] = useState(false); - // const [isSaved, setSaved] = useState(false); + const { event: gaEvent } = useGoogleAnalytics(); + const [isSaved, setSaved] = useState(false); + + const saveMutation = trpc.useMutation( + ['offers.user.profile.addToUserProfile'], + { + onError: () => { + showToast({ + title: `Failed to saved to dashboard!`, + variant: 'failure', + }); + }, + onSuccess: () => { + showToast({ + title: `Saved to your repository!`, + variant: 'success', + }); + }, + }, + ); - // Const saveProfile = () => { - // setSaving(true); - // setTimeout(() => { - // setSaving(false); - // setSaved(true); - // }, 5); - // }; + const handleSave = () => { + saveMutation.mutate({ + profileId, + token: token as string, + }); + setSaved(true); + gaEvent({ + action: 'offers.profile_submission_save_to_profile', + category: 'engagement', + label: 'Save to profile in profile submission', + }); + }; return (
@@ -57,24 +85,29 @@ export default function OffersProfileSave({ title: `Profile edit link copied to clipboard!`, variant: 'success', }); + gaEvent({ + action: 'offers.profile_submission_copy_edit_profile_link', + category: 'engagement', + label: 'Copy Edit Profile Link in Profile Submission', + }); }} />
- {/*

+

If you do not want to keep the edit link, you can opt to save this - profile under your user account. It will still only be editable by - you. + profile under your account's respository. It will still only be + editable by you.

*/} + ); diff --git a/apps/portal/src/components/offers/offersSubmission/OffersSubmissionForm.tsx b/apps/portal/src/components/offers/offersSubmission/OffersSubmissionForm.tsx index 02c9ed29..325c9afc 100644 --- a/apps/portal/src/components/offers/offersSubmission/OffersSubmissionForm.tsx +++ b/apps/portal/src/components/offers/offersSubmission/OffersSubmissionForm.tsx @@ -6,6 +6,7 @@ import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/20/solid'; import { JobType } from '@prisma/client'; import { Button } from '@tih/ui'; +import { useGoogleAnalytics } from '~/components/global/GoogleAnalytics'; import type { BreadcrumbStep } from '~/components/offers/Breadcrumb'; import { Breadcrumbs } from '~/components/offers/Breadcrumb'; import BackgroundForm from '~/components/offers/offersSubmission/submissionForm/BackgroundForm'; @@ -101,6 +102,7 @@ export default function OffersSubmissionForm({ token: editToken, }); const [isSubmitted, setIsSubmitted] = useState(false); + const { event: gaEvent } = useGoogleAnalytics(); const router = useRouter(); const pageRef = useRef(null); @@ -215,6 +217,11 @@ export default function OffersSubmissionForm({ } else { createOrUpdateMutation.mutate({ background, offers }); } + gaEvent({ + action: 'offers.submit_profile', + category: 'submission', + label: 'Submit profile', + }); }; useEffect(() => { @@ -278,7 +285,14 @@ export default function OffersSubmissionForm({ icon={ArrowRightIcon} label="Next" variant="secondary" - onClick={() => goToNextStep(step)} + onClick={() => { + goToNextStep(step); + gaEvent({ + action: 'offers.profile_submission_navigate_next', + category: 'submission', + label: 'Navigate next', + }); + }} /> )} @@ -288,7 +302,14 @@ export default function OffersSubmissionForm({ icon={ArrowLeftIcon} label="Previous" variant="secondary" - onClick={() => setStep(step - 1)} + onClick={() => { + setStep(step - 1); + gaEvent({ + action: 'offers.profile_submission_navigation_back', + category: 'submission', + label: 'Navigate back', + }); + }} />