From 48dccb821eb6b4ae47fc02823fdb774d2f5b2169 Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Wed, 2 Nov 2022 17:03:35 +0800
Subject: [PATCH] [offers][refactor] tweak submit and analysis steps UI

---
 .../offers/offerAnalysis/OfferAnalysis.tsx    |  20 ++--
 .../offersSubmission/OffersProfileSave.tsx    | 103 ++++++++++--------
 .../OffersSubmissionAnalysis.tsx              |   6 +-
 .../offersSubmission/OffersSubmissionForm.tsx |   2 +-
 .../offers/submit/result/[offerProfileId].tsx |  74 +++++++------
 .../portal/src/server/router/offers/offers.ts |   5 +-
 6 files changed, 111 insertions(+), 99 deletions(-)

diff --git a/apps/portal/src/components/offers/offerAnalysis/OfferAnalysis.tsx b/apps/portal/src/components/offers/offerAnalysis/OfferAnalysis.tsx
index 2cf876f2..e7e6199b 100644
--- a/apps/portal/src/components/offers/offerAnalysis/OfferAnalysis.tsx
+++ b/apps/portal/src/components/offers/offerAnalysis/OfferAnalysis.tsx
@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { useState } from 'react';
-import { HorizontalDivider, Spinner, Tabs } from '@tih/ui';
+import { Alert, HorizontalDivider, Spinner, Tabs } from '@tih/ui';
 
 import OfferPercentileAnalysisText from './OfferPercentileAnalysisText';
 import OfferProfileCard from './OfferProfileCard';
@@ -22,17 +22,19 @@ function OfferAnalysisContent({
   if (!analysis || analysis.noOfOffers === 0) {
     if (tab === OVERALL_TAB) {
       return (
-        <p className="m-10">
-          You are the first to submit an offer for your job title and YOE! Check
-          back later when there are more submissions.
-        </p>
+        <Alert title="Insufficient data to compare with" variant="info">
+          You are among the first to submit an offer for your job title and
+          years of experience! Check back later when there are more submissions.
+        </Alert>
       );
     }
+
     return (
-      <p className="m-10">
-        You are the first to submit an offer for this company, job title and
-        YOE! Check back later when there are more submissions.
-      </p>
+      <Alert title="Insufficient data to compare with" variant="info">
+        You are among the first to submit an offer for this company, job title
+        and years of experience! Check back later when there are more
+        submissions.
+      </Alert>
     );
   }
   return (
diff --git a/apps/portal/src/components/offers/offersSubmission/OffersProfileSave.tsx b/apps/portal/src/components/offers/offersSubmission/OffersProfileSave.tsx
index 597c08cc..2ffecdcd 100644
--- a/apps/portal/src/components/offers/offersSubmission/OffersProfileSave.tsx
+++ b/apps/portal/src/components/offers/offersSubmission/OffersProfileSave.tsx
@@ -73,58 +73,67 @@ export default function OffersProfileSave({
   };
 
   return (
-    <div className="flex w-full justify-center">
+    <div className="flex w-full justify-center pb-10">
       <div className="max-w-2xl text-center">
-        <h5 className="mb-6 text-4xl font-bold text-slate-900">
+        <h2 className="block text-center text-3xl font-bold leading-8 tracking-tight text-gray-900 sm:text-4xl">
           Save for future edits
-        </h5>
-        <p className="mb-2 text-slate-900">We value your privacy.</p>
-        <p className="mb-5 text-slate-900">
-          To keep you offer profile strictly anonymous, only people who have the
-          link below can edit it.
+        </h2>
+        <p className="mt-4 text-xl leading-8 text-slate-500">
+          We value your privacy
         </p>
-        <div className="mb-20 grid grid-cols-12 gap-4">
-          <div className="col-span-11">
-            <TextInput
-              disabled={true}
-              isLabelHidden={true}
-              label="Edit link"
-              value={getProfileLink(profileId, token)}
+        <div className="mt-6 max-w-md text-slate-500">
+          <div className="bg-info-50 rounded-lg p-6">
+            <p className="sm:tex-base text-sm">
+              To keep your offer profile strictly anonymous, it is not linked to
+              your user account. Only people who have the link below can edit
+              it. If you want to edit the profile in future, store the link
+              somewhere.
+            </p>
+            <div className="mt-4 flex gap-4">
+              <div className="grow">
+                <TextInput
+                  disabled={true}
+                  isLabelHidden={true}
+                  label="Edit link"
+                  value={getProfileLink(profileId, token)}
+                />
+              </div>
+              <Button
+                icon={DocumentDuplicateIcon}
+                isLabelHidden={true}
+                label="Copy"
+                variant="info"
+                onClick={() => {
+                  copyProfileLink(profileId, token);
+                  showToast({
+                    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',
+                  });
+                }}
+              />
+            </div>
+          </div>
+          <p className="mt-6 text-xs sm:text-sm">
+            If you do not want to manually store the link somewhere else, you
+            can add this offers profile to your user account by clicking the
+            button below. It will still only be editable by you.
+          </p>
+          <div className="mt-6">
+            <Button
+              disabled={isSavedQuery.isLoading || isSaved}
+              icon={isSaved ? CheckIcon : BookmarkSquareIcon}
+              isLoading={saveMutation.isLoading || isSavedQuery.isLoading}
+              label={isSaved ? 'Added to account' : 'Add to your account'}
+              size="sm"
+              variant="secondary"
+              onClick={handleSave}
             />
           </div>
-          <Button
-            icon={DocumentDuplicateIcon}
-            isLabelHidden={true}
-            label="Copy"
-            variant="primary"
-            onClick={() => {
-              copyProfileLink(profileId, token);
-              showToast({
-                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',
-              });
-            }}
-          />
-        </div>
-        <p className="mb-5 text-slate-900">
-          If you do not want to keep the edit link, you can opt to save this
-          profile under your account's dashboard. It will still only be editable
-          by you.
-        </p>
-        <div className="mb-20">
-          <Button
-            disabled={isSavedQuery.isLoading || isSaved}
-            icon={isSaved ? CheckIcon : BookmarkSquareIcon}
-            isLoading={saveMutation.isLoading || isSavedQuery.isLoading}
-            label={isSaved ? 'Saved to user profile' : 'Save to user profile'}
-            variant="primary"
-            onClick={handleSave}
-          />
         </div>
       </div>
     </div>
diff --git a/apps/portal/src/components/offers/offersSubmission/OffersSubmissionAnalysis.tsx b/apps/portal/src/components/offers/offersSubmission/OffersSubmissionAnalysis.tsx
index 77c2fc89..b9070760 100644
--- a/apps/portal/src/components/offers/offersSubmission/OffersSubmissionAnalysis.tsx
+++ b/apps/portal/src/components/offers/offersSubmission/OffersSubmissionAnalysis.tsx
@@ -15,10 +15,12 @@ export default function OffersSubmissionAnalysis({
   return (
     <div className="mb-8">
       <h5 className="mb-8 text-center text-4xl font-bold text-slate-900">
-        Result
+        Offer Analysis
       </h5>
       {!analysis && (
-        <p className="mb-8 text-center">Error generating analysis.</p>
+        <p className="text-error-500 mb-8 text-center">
+          Error generating analysis.
+        </p>
       )}
       {analysis && (
         <OfferAnalysis
diff --git a/apps/portal/src/components/offers/offersSubmission/OffersSubmissionForm.tsx b/apps/portal/src/components/offers/offersSubmission/OffersSubmissionForm.tsx
index 7197e847..38a73679 100644
--- a/apps/portal/src/components/offers/offersSubmission/OffersSubmissionForm.tsx
+++ b/apps/portal/src/components/offers/offersSubmission/OffersSubmissionForm.tsx
@@ -267,7 +267,7 @@ export default function OffersSubmissionForm({
     <div ref={pageRef} className="w-full overflow-y-scroll">
       <div className="flex justify-center">
         <div className="block w-full max-w-screen-md overflow-hidden rounded-lg sm:shadow-lg md:my-10">
-          <div className="bg-primary-100 flex justify-center px-4 py-4 sm:px-6 lg:px-8">
+          <div className="flex justify-center bg-slate-100 px-4 py-4 sm:px-6 lg:px-8">
             <Breadcrumbs
               currentStep={step}
               setStep={setStep}
diff --git a/apps/portal/src/pages/offers/submit/result/[offerProfileId].tsx b/apps/portal/src/pages/offers/submit/result/[offerProfileId].tsx
index 03ac058c..7157a792 100644
--- a/apps/portal/src/pages/offers/submit/result/[offerProfileId].tsx
+++ b/apps/portal/src/pages/offers/submit/result/[offerProfileId].tsx
@@ -78,48 +78,50 @@ export default function OffersSubmissionResult() {
         </div>
       )}
       {!getAnalysis.isLoading && (
-        <div ref={pageRef} className="fixed h-full w-full overflow-y-scroll">
-          <div className="mb-20 flex justify-center">
-            <div className="my-5 block w-full max-w-screen-md rounded-lg bg-white py-10 px-10 shadow-lg">
-              <div className="mb-4 flex justify-end">
+        <div ref={pageRef} className="w-full overflow-y-scroll">
+          <div className="flex justify-center">
+            <div className="block w-full max-w-screen-md overflow-hidden rounded-lg sm:shadow-lg md:my-10">
+              <div className="flex justify-center bg-slate-100 px-4 py-4 sm:px-6 lg:px-8">
                 <Breadcrumbs
                   currentStep={step}
                   setStep={setStep}
                   steps={breadcrumbSteps}
                 />
               </div>
-              {steps[step]}
-              {step === 0 && (
-                <div className="flex justify-end">
-                  <Button
-                    disabled={false}
-                    icon={ArrowRightIcon}
-                    label="Next"
-                    variant="secondary"
-                    onClick={() => setStep(step + 1)}
-                  />
-                </div>
-              )}
-              {step === 1 && (
-                <div className="flex items-center justify-between">
-                  <Button
-                    addonPosition="start"
-                    icon={ArrowLeftIcon}
-                    label="Previous"
-                    variant="secondary"
-                    onClick={() => setStep(step - 1)}
-                  />
-                  <Button
-                    href={getProfilePath(
-                      offerProfileId as string,
-                      token as string,
-                    )}
-                    icon={EyeIcon}
-                    label="View your profile"
-                    variant="primary"
-                  />
-                </div>
-              )}
+              <div className="bg-white p-6 sm:p-10">
+                {steps[step]}
+                {step === 0 && (
+                  <div className="flex justify-end">
+                    <Button
+                      disabled={false}
+                      icon={ArrowRightIcon}
+                      label="Next"
+                      variant="primary"
+                      onClick={() => setStep(step + 1)}
+                    />
+                  </div>
+                )}
+                {step === 1 && (
+                  <div className="flex items-center justify-between">
+                    <Button
+                      addonPosition="start"
+                      icon={ArrowLeftIcon}
+                      label="Previous"
+                      variant="secondary"
+                      onClick={() => setStep(step - 1)}
+                    />
+                    <Button
+                      href={getProfilePath(
+                        offerProfileId as string,
+                        token as string,
+                      )}
+                      icon={EyeIcon}
+                      label="View your profile"
+                      variant="primary"
+                    />
+                  </div>
+                )}
+              </div>
             </div>
           </div>
         </div>
diff --git a/apps/portal/src/server/router/offers/offers.ts b/apps/portal/src/server/router/offers/offers.ts
index 86cd29ef..cac77069 100644
--- a/apps/portal/src/server/router/offers/offers.ts
+++ b/apps/portal/src/server/router/offers/offers.ts
@@ -12,10 +12,7 @@ import { createValidationRegex } from '~/utils/offers/zodRegex';
 import { createRouter } from '../context';
 
 const getOrder = (prefix: string) => {
-  if (prefix === '+') {
-    return 'asc';
-  }
-  return 'desc';
+  return prefix === '+' ? 'asc' : 'desc';
 };
 
 const sortingKeysMap = {