mokhtar/shellphone.app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

boring stuff

Browse Source
This commit is contained in:
m5r
2021-08-01 11:05:40 +08:00
parent cd83f0c78e
commit a65d6e2bcc
17 changed files with 261 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
app/onboarding/pages/welcome/step-one.tsx
View File

@ -9,18 +9,22 @@ const StepOne: BlitzPage = () => {
useCurrentCustomer(); // preload for step two
return (
<OnboardingLayout
currentStep={1}
next={{ href: "/welcome/step-two", label: "Set up your phone number" }}
>
<div className="flex flex-col space-y-4 items-center">
<span>Welcome, let’s set up your virtual phone!</span>
</div>
</OnboardingLayout>
<div className="flex flex-col space-y-4 items-center">
<span>Welcome, let’s set up your virtual phone!</span>
</div>
);
};
StepOne.authenticate = true;
StepOne.getLayout = (page) => (
<OnboardingLayout
currentStep={1}
next={{ href: Routes.StepTwo().pathname, label: "Set up your phone number" }}
>
{page}
</OnboardingLayout>
);
StepOne.authenticate = { redirectTo: Routes.SignIn() };
export const getServerSideProps: GetServerSideProps = async ({ req, res }) => {
const session = await getSession(req, res);

69
app/onboarding/pages/welcome/step-three.tsx
View File

@ -48,44 +48,45 @@ const StepThree: BlitzPage<Props> = ({ availablePhoneNumbers }) => {
});
return (
<OnboardingLayout currentStep={3} previous={{ href: "/welcome/step-two", label: "Back" }}>
<div className="flex flex-col space-y-4 items-center">
<form onSubmit={onSubmit}>
<label
htmlFor="phoneNumberSid"
className="block text-sm font-medium text-gray-700"
>
Phone number
</label>
<select
id="phoneNumberSid"
className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm rounded-md"
{...register("phoneNumberSid")}
>
{availablePhoneNumbers.map(({ sid, phoneNumber }) => (
<option value={sid} key={sid}>
{phoneNumber}
</option>
))}
</select>
<div className="flex flex-col space-y-4 items-center">
<form onSubmit={onSubmit}>
<label htmlFor="phoneNumberSid" className="block text-sm font-medium text-gray-700">
Phone number
</label>
<select
id="phoneNumberSid"
className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm rounded-md"
{...register("phoneNumberSid")}
>
{availablePhoneNumbers.map(({ sid, phoneNumber }) => (
<option value={sid} key={sid}>
{phoneNumber}
</option>
))}
</select>
<button
type="submit"
className={clsx(
"max-w-[240px] mt-6 mx-auto w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 text-base font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:text-sm",
!isSubmitting && "bg-primary-600 hover:bg-primary-700",
isSubmitting && "bg-primary-400 cursor-not-allowed"
)}
>
Save
</button>
</form>
</div>
</OnboardingLayout>
<button
type="submit"
className={clsx(
"max-w-[240px] mt-6 mx-auto w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 text-base font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:text-sm",
!isSubmitting && "bg-primary-600 hover:bg-primary-700",
isSubmitting && "bg-primary-400 cursor-not-allowed"
)}
>
Save
</button>
</form>
</div>
);
};
StepThree.authenticate = true;
StepThree.getLayout = (page) => (
<OnboardingLayout currentStep={3} previous={{ href: Routes.StepTwo().pathname, label: "Back" }}>
{page}
</OnboardingLayout>
);
StepThree.authenticate = { redirectTo: Routes.SignIn() };
export const getServerSideProps: GetServerSideProps<Props> = async ({ req, res }) => {
const session = await getSession(req, res);

116
app/onboarding/pages/welcome/step-two.tsx
View File

@ -25,13 +25,10 @@ const StepTwo: BlitzPage = () => {
const { customer } = useCurrentCustomer();
const [setTwilioApiFieldsMutation] = useMutation(setTwilioApiFields);
const initialAuthToken = customer?.authToken ?? "";
const initialAccountSid = customer?.accountSid ?? "";
const hasTwilioCredentials = initialAccountSid.length > 0 && initialAuthToken.length > 0;
useEffect(() => {
setValue("twilioAuthToken", initialAuthToken);
setValue("twilioAccountSid", initialAccountSid);
}, [initialAuthToken, initialAccountSid]);
setValue("twilioAuthToken", customer?.authToken ?? "");
setValue("twilioAccountSid", customer?.accountSid ?? "");
}, [setValue, customer?.authToken, customer?.accountSid]);
const onSubmit = handleSubmit(async ({ twilioAccountSid, twilioAuthToken }) => {
if (isSubmitting) {
@ -46,60 +43,75 @@ const StepTwo: BlitzPage = () => {
await router.push(Routes.StepThree());
});
return (
<div className="flex flex-col space-y-4 items-center">
<form onSubmit={onSubmit} className="flex flex-col gap-6">
<div className="w-full">
<label
htmlFor="twilioAccountSid"
className="block text-sm font-medium text-gray-700"
>
Twilio Account SID
</label>
<input
type="text"
id="twilioAccountSid"
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm"
{...register("twilioAccountSid", { required: true })}
/>
</div>
<div className="w-full">
<label
htmlFor="twilioAuthToken"
className="block text-sm font-medium text-gray-700"
>
Twilio Auth Token
</label>
<input
type="text"
id="twilioAuthToken"
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm"
{...register("twilioAuthToken", { required: true })}
/>
</div>
<button
type="submit"
className={clsx(
"max-w-[240px] mx-auto w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 text-base font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:text-sm",
!isSubmitting && "bg-primary-600 hover:bg-primary-700",
isSubmitting && "bg-primary-400 cursor-not-allowed"
)}
>
Save
</button>
</form>
</div>
);
};
StepTwo.getLayout = function StepTwoLayout(page) {
const { customer } = useCurrentCustomer();
const initialAuthToken = customer?.authToken ?? "";
const initialAccountSid = customer?.accountSid ?? "";
const hasTwilioCredentials = initialAccountSid.length > 0 && initialAuthToken.length > 0;
return (
<OnboardingLayout
currentStep={2}
next={hasTwilioCredentials ? { href: "/welcome/step-three", label: "Next" } : undefined}
previous={{ href: "/welcome/step-one", label: "Back" }}
next={
hasTwilioCredentials
? { href: Routes.StepThree().pathname, label: "Next" }
: undefined
}
previous={{ href: Routes.StepOne().pathname, label: "Back" }}
>
<div className="flex flex-col space-y-4 items-center">
<form onSubmit={onSubmit} className="flex flex-col gap-6">
<div className="w-full">
<label
htmlFor="twilioAccountSid"
className="block text-sm font-medium text-gray-700"
>
Twilio Account SID
</label>
<input
type="text"
id="twilioAccountSid"
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm"
{...register("twilioAccountSid", { required: true })}
/>
</div>
<div className="w-full">
<label
htmlFor="twilioAuthToken"
className="block text-sm font-medium text-gray-700"
>
Twilio Auth Token
</label>
<input
type="text"
id="twilioAuthToken"
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm"
{...register("twilioAuthToken", { required: true })}
/>
</div>
<button
type="submit"
className={clsx(
"max-w-[240px] mx-auto w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 text-base font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:text-sm",
!isSubmitting && "bg-primary-600 hover:bg-primary-700",
isSubmitting && "bg-primary-400 cursor-not-allowed"
)}
>
Save
</button>
</form>
</div>
{page}
</OnboardingLayout>
);
};
StepTwo.authenticate = true;
StepTwo.authenticate = { redirectTo: Routes.SignIn() };
export const getServerSideProps: GetServerSideProps = async ({ req, res }) => {
const session = await getSession(req, res);