Implemented Button, hide 'Prev step' on first step (#583)

* Implemented Button, hide 'Prev step' on first step

* Changed 00:00:00 -> 00:00 whilst keeping values unchanged

* Updated to localizedFormat (future i18n) + remove unused const

* Going native for now, can revisit later

Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>

components/ui/Schedule/Schedule.tsx

@@ -8,7 +8,6 @@ export const toCalendsoAvailabilityFormat = (schedule: Schedule) => {
   return schedule;
 };
 
-export const AM_PM_TIME_FORMAT = `h:mm:ss a`;
 export const _24_HOUR_TIME_FORMAT = `HH:mm:ss`;
 
 const DEFAULT_START_TIME = "09:00:00";
@@ -30,7 +29,7 @@ const TIMES = (() => {
   let t: Dayjs = starting_time;
 
   while (t.isBefore(ending_time)) {
-    times.push(t.format(_24_HOUR_TIME_FORMAT));
+    times.push(t);
     t = t.add(increment, "minutes");
   }
   return times;
@@ -213,6 +212,14 @@ const SchedulerForm = ({ schedule = DEFAULT_SCHEDULE, onSubmit }: Props) => {
     };
 
     const TimeRangeField = ({ range, day, index }: { range: TimeRange; day: DayOfWeek; index: number }) => {
+      const timeOptions = (type: "start" | "end") =>
+        TIMES.map((time) => (
+          <option
+            key={`${day}.${index}.${type}.${time.format(_24_HOUR_TIME_FORMAT)}`}
+            value={time.format(_24_HOUR_TIME_FORMAT)}>
+            {time.toDate().toLocaleTimeString(undefined, { minute: "numeric", hour: "numeric" })}
+          </option>
+        ));
       return (
         <div key={`${day}-range-${index}`} className="flex items-center justify-between space-x-2">
           <div className="flex items-center space-x-2">
@@ -222,13 +229,7 @@ const SchedulerForm = ({ schedule = DEFAULT_SCHEDULE, onSubmit }: Props) => {
               defaultValue={range?.start || DEFAULT_START_TIME}
               onChange={handleSelectRangeChange}
               className="block px-4 pr-8 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm rounded-sm">
-              {TIMES.map((time) => {
+              {timeOptions("start")}
-                return (
-                  <option key={`${day}.${index}.start.${time}`} value={time}>
-                    {time}
-                  </option>
-                );
-              })}
             </select>
             <Text>-</Text>
             <select
@@ -237,13 +238,7 @@ const SchedulerForm = ({ schedule = DEFAULT_SCHEDULE, onSubmit }: Props) => {
               defaultValue={range?.end || DEFAULT_END_TIME}
               onChange={handleSelectRangeChange}
               className=" block px-4 pr-8 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm rounded-sm">
-              {TIMES.map((time) => {
+              {timeOptions("end")}
-                return (
-                  <option key={`${day}.${index}.end.${time}`} value={time}>
-                    {time}
-                  </option>
-                );
-              })}
             </select>
           </div>
           <div className="">

pages/getting-started.tsx

@@ -31,6 +31,7 @@ import { AddCalDavIntegrationRequest } from "../lib/integrations/CalDav/componen
 import classnames from "classnames";
 import { ArrowRightIcon } from "@heroicons/react/outline";
 import { getSession } from "@lib/auth";
+import Button from "@components/ui/Button";
 
 const DEFAULT_EVENT_TYPES = [
   {
@@ -146,11 +147,9 @@ export default function Onboarding(props: OnboardingProps) {
           </Text>
         </div>
         <div className="w-2/12 text-right pt-2">
-          <button
+          <Button color="secondary" onClick={() => integrationHandler(integration.type)}>
-            onClick={() => integrationHandler(integration.type)}
-            className="font-medium text-neutral-900 hover:text-neutral-500 border px-4 py-2 border-gray-200 rounded-sm">
             Connect
-          </button>
+          </Button>
         </div>
       </li>
     );
@@ -447,15 +446,9 @@ export default function Onboarding(props: OnboardingProps) {
             />
           </section>
           <footer className="py-6 sm:mx-auto sm:w-full sm:max-w-md flex flex-col space-y-6">
-            <button
+            <Button className="justify-center" EndIcon={ArrowRightIcon} type="submit" form={SCHEDULE_FORM_ID}>
-              type="submit"
+              Continue
-              form={SCHEDULE_FORM_ID}
+            </Button>
-              className="w-full btn btn-primary text-center justify-center space-x-2">
-              <Text variant="subtitle" className="text-white">
-                Continue
-              </Text>
-              <ArrowRightIcon className="text-white h-4 w-4" />
-            </button>
           </footer>
         </>
       ),
@@ -579,26 +572,22 @@ export default function Onboarding(props: OnboardingProps) {
 
             {!steps[currentStep].hideConfirm && (
               <footer className="py-6 sm:mx-auto sm:w-full sm:max-w-md flex flex-col space-y-6 mt-8">
-                <button
+                <Button className="justify-center" onClick={handleConfirmStep} EndIcon={ArrowRightIcon}>
-                  onClick={handleConfirmStep}
+                  {steps[currentStep].confirmText}
-                  type="button"
+                </Button>
-                  className="w-full btn btn-primary text-center justify-center space-x-2">
-                  <Text variant="subtitle" className="text-white">
-                    {steps[currentStep].confirmText}
-                  </Text>
-                  <ArrowRightIcon className="text-white h-4 w-4" />
-                </button>
               </footer>
             )}
           </section>
           <section className="py-6 mt-8 mx-auto max-w-xl">
-            <div className="flex justify-between">
+            <div className="flex justify-between flex-row-reverse">
-              <button onClick={decrementStep}>
-                <Text variant="caption">Prev Step</Text>
-              </button>
               <button onClick={handleSkipStep}>
                 <Text variant="caption">Skip Step</Text>
               </button>
+              {currentStep !== 0 && (
+                <button onClick={decrementStep}>
+                  <Text variant="caption">Prev Step</Text>
+                </button>
+              )}
             </div>
           </section>
         </article>