public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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>
pull/549/head
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
components/ui/Schedule/Schedule.tsx
View File

@ -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) => {
return (
<option key={`${day}.${index}.start.${time}`} value={time}>
{time}
</option>
);
})}
{timeOptions("start")}
</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) => {
return (
<option key={`${day}.${index}.end.${time}`} value={time}>
{time}
</option>
);
})}
{timeOptions("end")}
</select>
</div>
<div className="">

41
pages/getting-started.tsx
View File

@ -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
onClick={() => integrationHandler(integration.type)}
className="font-medium text-neutral-900 hover:text-neutral-500 border px-4 py-2 border-gray-200 rounded-sm">
<Button color="secondary" onClick={() => integrationHandler(integration.type)}>
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
type="submit"
form={SCHEDULE_FORM_ID}
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>
<Button className="justify-center" EndIcon={ArrowRightIcon} type="submit" form={SCHEDULE_FORM_ID}>
Continue
</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
onClick={handleConfirmStep}
type="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>
<Button className="justify-center" onClick={handleConfirmStep} EndIcon={ArrowRightIcon}>
{steps[currentStep].confirmText}
</Button>
</footer>
)}
</section>
<section className="py-6 mt-8 mx-auto max-w-xl">
<div className="flex justify-between">
<button onClick={decrementStep}>
<Text variant="caption">Prev Step</Text>
</button>
<div className="flex justify-between flex-row-reverse">
<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>