-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add signup form; and add flow to connect QBO account (#94)
Co-authored-by: russell-pollari <pollarir@mgail.com>
- Loading branch information
1 parent
d06aed8
commit 0b9b925
Showing
17 changed files
with
354 additions
and
61 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,69 +1,150 @@ | ||
| import * as React from 'react'; | ||
| import { Formik, Form, Field } from 'formik'; | ||
| import type { FieldProps } from 'formik'; | ||
| import { object, string } from 'yup'; | ||
|
|
||
| import SubmitButton from './SubmitButton'; | ||
| import { useLoginMutation, useSignupMutation } from '../services/api'; | ||
| import { Link } from 'react-router-dom'; | ||
|
|
||
| import { useLoginMutation } from '../services/api'; | ||
| const schema = object().shape({ | ||
| email: string().email().required(), | ||
| password: string().required(), | ||
| }); | ||
|
|
||
| const Login = () => { | ||
| const [login] = useLoginMutation(); | ||
| const Input = ({ | ||
| field, | ||
| placeholder, | ||
| type, | ||
| }: { | ||
| field: FieldProps; | ||
| placeholder: string; | ||
| type: string; | ||
| }) => { | ||
| return ( | ||
| <input | ||
| className="w-full p-2 border border-solid border-green-500 rounded-lg mb-4" | ||
| type={type} | ||
| placeholder={placeholder} | ||
| {...field} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| const Login = ({ | ||
| handleSubmit, | ||
| isSignupForm, | ||
| }: { | ||
| handleSubmit: (values: { | ||
| email: string; | ||
| password: string; | ||
| }) => Promise<void>; | ||
| isSignupForm: boolean; | ||
| }) => { | ||
| return ( | ||
| <div className="absolute flex h-full w-full justify-center top-16"> | ||
| <div className="p-8 my-16 rounded-lg bg-green-100 border border-solid border-green-300 shadow-lg h-max text-center relative"> | ||
| <a href="https://github.com/Russell-Pollari/stripe2qbo"> | ||
| <img | ||
| decoding="async" | ||
| width="149" | ||
| height="149" | ||
| src="https://github.blog/wp-content/uploads/2008/12/forkme_right_gray_6d6d6d.png?resize=149%2C149" | ||
| alt="Fork me on GitHub" | ||
| loading="lazy" | ||
| className="absolute top-0 right-0 border-0" | ||
| data-recalc-dims="1" | ||
| /> | ||
| </a> | ||
| {isSignupForm && ( | ||
| <a href="https://github.com/Russell-Pollari/stripe2qbo"> | ||
| <img | ||
| decoding="async" | ||
| width="149" | ||
| height="149" | ||
| src="https://github.blog/wp-content/uploads/2008/12/forkme_right_gray_6d6d6d.png?resize=149%2C149" | ||
| alt="Fork me on GitHub" | ||
| loading="lazy" | ||
| className="absolute top-0 right-0 border-0" | ||
| data-recalc-dims="1" | ||
| /> | ||
| </a> | ||
| )} | ||
| <h1 className="text-2xl text-green-800 font-semibold mb-8 mt-16"> | ||
| Stripe2QBO | ||
| </h1> | ||
| <p className="mb-8 w-64 text-left inline-block"> | ||
| <span className="text-green-700">Stripe2QBO</span> is an | ||
| open source tool to help you import your Stripe transactions | ||
| into QuickBooks Online. | ||
| </p> | ||
| {isSignupForm && ( | ||
| <p className="mb-8 w-64 text-left inline-block"> | ||
| <span className="text-green-700">Stripe2QBO</span> is an | ||
| open source tool to help you import your Stripe | ||
| transactions into QuickBooks Online. | ||
| </p> | ||
| )} | ||
| <div> | ||
| <Formik | ||
| initialValues={{ email: '', password: '' }} | ||
| validationSchema={schema} | ||
| onSubmit={async (values, { setSubmitting }) => { | ||
| await login(values); | ||
| await handleSubmit(values); | ||
| setSubmitting(false); | ||
| }} | ||
| > | ||
| {({ isSubmitting }) => ( | ||
| <Form> | ||
| <div> | ||
| <Field | ||
| component={Input} | ||
| type="email" | ||
| name="email" | ||
| placeholder="email" | ||
| /> | ||
| </div> | ||
| <div className="my-4"> | ||
| <Field | ||
| component={Input} | ||
| type="password" | ||
| name="password" | ||
| placeholder="password" | ||
| /> | ||
| </div> | ||
| <SubmitButton isSubmitting={isSubmitting}> | ||
| Login | ||
| {isSignupForm ? 'Signup' : 'Login'} | ||
| </SubmitButton> | ||
| </Form> | ||
| )} | ||
| </Formik> | ||
| </div> | ||
| <div> | ||
| <p> | ||
| {isSignupForm | ||
| ? 'Already have an account?' | ||
| : 'No account?'} | ||
| </p> | ||
| {isSignupForm ? ( | ||
| <Link to="/" className="text-green-700 text-sm"> | ||
| Login | ||
| </Link> | ||
| ) : ( | ||
| <Link to="/signup" className="text-green-700 text-sm"> | ||
| Sign up | ||
| </Link> | ||
| )} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default Login; | ||
| export const LoginContainer = () => { | ||
| const [login] = useLoginMutation(); | ||
|
|
||
| return ( | ||
| <Login | ||
| handleSubmit={async (values) => { | ||
| await login(values); | ||
| }} | ||
| isSignupForm={false} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| export const SignupContainer = () => { | ||
| const [signup] = useSignupMutation(); | ||
|
|
||
| return ( | ||
| <Login | ||
| handleSubmit={async (values) => { | ||
| await signup(values); | ||
| }} | ||
| isSignupForm={true} | ||
| /> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| import * as React from 'react'; | ||
|
|
||
| import ConnectionCard from './ConnectionCard'; | ||
| import { useGetCompanyInfoQuery } from '../services/api'; | ||
|
|
||
| const connect = () => { | ||
| fetch('/api/qbo/oauth2') | ||
| .then((response) => response.json()) | ||
| .then((data: string) => { | ||
| location.href = data; | ||
| }) | ||
| .catch((error) => { | ||
| console.error(error); | ||
| }); | ||
| }; | ||
|
|
||
| const QBOConnection = () => { | ||
| const { data: qboInfo, isLoading, error } = useGetCompanyInfoQuery(); | ||
| // const [disconnect] = useDisconnectStripeMutation(); | ||
| return ( | ||
| <ConnectionCard | ||
| isConnected={!!qboInfo} | ||
| title="QBO account" | ||
| isLoading={isLoading} | ||
| disconnect={() => { | ||
| // disconnect() | ||
| // .unwrap() | ||
| // // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| // .catch((e: any) => { | ||
| // // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access | ||
| // alert(e?.data?.detail); | ||
| // }); | ||
| }} | ||
| > | ||
| {qboInfo && !error ? ( | ||
| <span> | ||
| {qboInfo.CompanyName} ({qboInfo.Country}) | ||
| </span> | ||
| ) : ( | ||
| <button | ||
| className="inline-block hover:bg-slate-100 text-gray-500 font-bold p-2 rounded-full text-sm" | ||
| onClick={connect} | ||
| > | ||
| Connect a QBO account | ||
| </button> | ||
| )} | ||
| </ConnectionCard> | ||
| ); | ||
| }; | ||
|
|
||
| export default QBOConnection; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import * as React from 'react'; | ||
| import { useEffect, useState } from 'react'; | ||
| import { useLocation } from 'react-router'; | ||
| import { useSetQBOTokenMutation } from '../services/api'; | ||
|
|
||
| const QBOCallback = () => { | ||
| const { search } = useLocation(); | ||
| const params = new URLSearchParams(search); | ||
| const code = params.get('code'); | ||
| const realmId = params.get('realmId'); | ||
|
|
||
| const [setQBOCode] = useSetQBOTokenMutation(); | ||
| const [error, setError] = useState<string | null>(null); | ||
|
|
||
| useEffect(() => { | ||
| if (code && realmId) { | ||
| setQBOCode({ code, realmId }) | ||
| .unwrap() | ||
| .then(() => { | ||
| location.href = '/'; | ||
| }) | ||
| .catch((e) => { | ||
| // eslint-disable-next-line | ||
| setError(e?.data?.detail); | ||
| console.error(e); | ||
| }); | ||
| } | ||
| }, [code, realmId]); | ||
|
|
||
| return ( | ||
| <div className="grid h-screen place-items-center"> | ||
| <div className="text-2xl font-semibold"> | ||
| Connecting to QuickBooks... | ||
| {error && <div className="text-red-500">{error}</div>} | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default QBOCallback; |
Oops, something went wrong.