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:
parent
d9aff72220
commit
43b275bc30
2 changed files with 26 additions and 42 deletions
|
@ -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="">
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue