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>
This commit is contained in:
Alex van Andel 2021-09-06 10:14:01 +01:00 committed by GitHub
parent d9aff72220
commit 43b275bc30
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 42 deletions

View file

@ -8,7 +8,6 @@ export const toCalendsoAvailabilityFormat = (schedule: Schedule) => {
return schedule; return schedule;
}; };
export const AM_PM_TIME_FORMAT = `h:mm:ss a`;
export const _24_HOUR_TIME_FORMAT = `HH:mm:ss`; export const _24_HOUR_TIME_FORMAT = `HH:mm:ss`;
const DEFAULT_START_TIME = "09:00:00"; const DEFAULT_START_TIME = "09:00:00";
@ -30,7 +29,7 @@ const TIMES = (() => {
let t: Dayjs = starting_time; let t: Dayjs = starting_time;
while (t.isBefore(ending_time)) { while (t.isBefore(ending_time)) {
times.push(t.format(_24_HOUR_TIME_FORMAT)); times.push(t);
t = t.add(increment, "minutes"); t = t.add(increment, "minutes");
} }
return times; 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 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 ( return (
<div key={`${day}-range-${index}`} className="flex items-center justify-between space-x-2"> <div key={`${day}-range-${index}`} className="flex items-center justify-between space-x-2">
<div className="flex items-center 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} defaultValue={range?.start || DEFAULT_START_TIME}
onChange={handleSelectRangeChange} 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"> 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> </select>
<Text>-</Text> <Text>-</Text>
<select <select
@ -237,13 +238,7 @@ const SchedulerForm = ({ schedule = DEFAULT_SCHEDULE, onSubmit }: Props) => {
defaultValue={range?.end || DEFAULT_END_TIME} defaultValue={range?.end || DEFAULT_END_TIME}
onChange={handleSelectRangeChange} 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"> 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> </select>
</div> </div>
<div className=""> <div className="">

View file

@ -31,6 +31,7 @@ import { AddCalDavIntegrationRequest } from "../lib/integrations/CalDav/componen
import classnames from "classnames"; import classnames from "classnames";
import { ArrowRightIcon } from "@heroicons/react/outline"; import { ArrowRightIcon } from "@heroicons/react/outline";
import { getSession } from "@lib/auth"; import { getSession } from "@lib/auth";
import Button from "@components/ui/Button";
const DEFAULT_EVENT_TYPES = [ const DEFAULT_EVENT_TYPES = [
{ {
@ -146,11 +147,9 @@ export default function Onboarding(props: OnboardingProps) {
</Text> </Text>
</div> </div>
<div className="w-2/12 text-right pt-2"> <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 Connect
</button> </Button>
</div> </div>
</li> </li>
); );
@ -447,15 +446,9 @@ export default function Onboarding(props: OnboardingProps) {
/> />
</section> </section>
<footer className="py-6 sm:mx-auto sm:w-full sm:max-w-md flex flex-col space-y-6"> <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> </footer>
</> </>
), ),
@ -579,26 +572,22 @@ export default function Onboarding(props: OnboardingProps) {
{!steps[currentStep].hideConfirm && ( {!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"> <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> </footer>
)} )}
</section> </section>
<section className="py-6 mt-8 mx-auto max-w-xl"> <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}> <button onClick={handleSkipStep}>
<Text variant="caption">Skip Step</Text> <Text variant="caption">Skip Step</Text>
</button> </button>
{currentStep !== 0 && (
<button onClick={decrementStep}>
<Text variant="caption">Prev Step</Text>
</button>
)}
</div> </div>
</section> </section>
</article> </article>