diff --git a/debug.log b/debug.log new file mode 100644 index 0000000..cce76ee --- /dev/null +++ b/debug.log @@ -0,0 +1 @@ +[1123/055231.138:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3) diff --git a/src/components/helpers/network.ts b/src/components/helpers/network.ts index fb71211..c983a8f 100644 --- a/src/components/helpers/network.ts +++ b/src/components/helpers/network.ts @@ -1,3 +1,4 @@ +import { resolve } from "dns" import { setDonorID, setKID } from "../../store/donation/actions" import { setAnsweredReferral } from "../../store/layout/actions" import { PaymentMethod } from "../../store/state" @@ -53,9 +54,10 @@ export function request(endpoint: string, type: string, data: any, cb: any) { http.open("GET", url, true); http.send(data); } + return http } -export async function registerBankPending(postData: {KID: number}) { +export function registerBankPending(postData: {KID: number}) { request("donations/bank/pending", "POST", postData, function(err: any, data: any) { if (err) console.error("Sending av epost feilet"); console.log(data) @@ -63,14 +65,13 @@ export async function registerBankPending(postData: {KID: number}) { } export async function postDonation(postData: DonationData, dispatch: Function) { - request("donations/register", "POST", postData, function(err: any, data: any) { + return request("donations/register", "POST", postData, function(err: any, data: any) { if (err == 0 || err) { if (err == 0) console.error("Når ikke server. Forsøk igjen senere."); else if (err == 500) console.error("Det er noe feil med donasjonen"); } // TODO: Move dispatches to SharesPane instead? - console.log(data.content.hasAnsweredReferral) dispatch(setAnsweredReferral(data.content.hasAnsweredReferral)) dispatch(setKID(data.content.KID)) dispatch(setDonorID(data.content.donorID)) @@ -89,6 +90,7 @@ export async function postDonation(postData: DonationData, dispatch: Function) { // _self.getPane(VippsPane).setUrl(data.content.paymentProviderUrl) // } console.log(data) + return data }) } diff --git a/src/components/panes/DonationPane/DonationPane.tsx b/src/components/panes/DonationPane/DonationPane.tsx index 03f6583..e3d62ea 100644 --- a/src/components/panes/DonationPane/DonationPane.tsx +++ b/src/components/panes/DonationPane/DonationPane.tsx @@ -35,6 +35,7 @@ export default function DonationPane() { const donationSum = useSelector((state: State) => state.donation.sum) const currentPaymentMethod = useSelector((state: State) => state.donation.method) const currentPaneNumber = useSelector((state: State) => state.layout.paneNumber) + const answeredReferral = useSelector((state: State) => state.layout.answeredReferral) const { register, watch, errors, handleSubmit } = useForm({mode: 'all'}) const watchAllFields = watch() @@ -59,10 +60,24 @@ export default function DonationPane() { updateDonationState(watchAllFields) }, [watchAllFields]) + // This hook waits for the response from the POST donation request sent when submittig + // It then uses the response data to determine how many panes to skip + useEffect(() => { + if (answeredReferral !== undefined) { + if (!isCustomShare && answeredReferral) { + dispatch(setPaneNumber(currentPaneNumber + 3)) + } + else if (!isCustomShare) { + dispatch(setPaneNumber(currentPaneNumber + 2)) + } + } + }, [answeredReferral]) + function onSubmit() { if (Object.keys(errors).length === 0) { if (!isCustomShare) { if (donorName && donorEmail && donorNewsletter !== undefined && currentPaymentMethod) { + //TODO: Move this to network.ts const postData: DonationData = { donor: { name: donorName, @@ -75,13 +90,12 @@ export default function DonationPane() { if (donationSum && (currentPaymentMethod !== PaymentMethod.BANK && currentPaymentMethod !== PaymentMethod.BANK_UKID )) { postData.amount = donationSum } - postDonation(postData, dispatch).then(result => { - console.log(result) - }) + postDonation(postData, dispatch) } } - - dispatch(setPaneNumber(currentPaneNumber + (isCustomShare ? 1 : 2))) + else if (isCustomShare === true) { + dispatch(setPaneNumber(currentPaneNumber + 1)) + } } } diff --git a/src/components/panes/ReferralPane/ReferralPane.style.tsx b/src/components/panes/ReferralPane/ReferralPane.style.tsx index 03b25d2..41e8dc7 100644 --- a/src/components/panes/ReferralPane/ReferralPane.style.tsx +++ b/src/components/panes/ReferralPane/ReferralPane.style.tsx @@ -4,12 +4,25 @@ export const ReferralsWrapper = styled.div` width: 240px; white-space: normal; display: flex; - align-content: space-between; - justify-content: space-between; + align-items: space-between; width: 240px; flex-wrap: wrap; ` +export const OtherInputWrapper = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +` + +export const OtherInput = styled.textarea` + margin-top: 10px; + width: 200px; + height: 100px; + padding: 5px; +` + export const ReferralButton = styled.button` width: 110px; padding: 5px; diff --git a/src/components/panes/ReferralPane/ReferralPane.tsx b/src/components/panes/ReferralPane/ReferralPane.tsx index 2689f4a..9bede91 100644 --- a/src/components/panes/ReferralPane/ReferralPane.tsx +++ b/src/components/panes/ReferralPane/ReferralPane.tsx @@ -1,13 +1,15 @@ import React, { useEffect, useState } from 'react' import { useForm } from 'react-hook-form' +import { Collapse } from '@material-ui/core' import { useDispatch, useSelector } from 'react-redux' import { setPaneNumber } from '../../../store/layout/actions' import { State } from '../../../store/state' import { getReferrals, postReferral } from '../../helpers/network' +import { TextField } from '../Forms.style' import { HorizontalLine, NavigationWrapper, Pane, PaneContainer, PaneTitle, UnderTitle, VerticalLine } from '../Panes.style' import DonationInfoBar from '../shared/DonationInfoBar/DonationInfoBar' -import { NextButton, PrevButton } from '../shared/NavigationButtons' -import { ReferralButton, ReferralsWrapper } from './ReferralPane.style' +import { NavButton, NextButton, PrevButton } from '../shared/NavigationButtons' +import { OtherInput, OtherInputWrapper, ReferralButton, ReferralsWrapper } from './ReferralPane.style' interface Referral { ID: number; @@ -17,36 +19,37 @@ interface Referral { export default function ReferralPane() { const [referrals, setReferrals] = useState() + const [openOtherInput, setOpenOtherInput ] = useState(false) const currentPaneNumber = useSelector((state: State) => state.layout.paneNumber) const donorID = useSelector((state: State) => state.donation.donor?.donorID) - const { handleSubmit } = useForm() + const { handleSubmit, register, watch, errors } = useForm() + const watchOtherInput = watch("other", false) const dispatch = useDispatch() useEffect(() => { getReferrals() .then(response => setReferrals(response)) .catch((error) => console.log(error.message)) - }, []) + }, []) function setupReferrals() { let referralsList: JSX.Element[] = [] if (referrals) { referrals.forEach(ref => { - //TODO: Remove BYNN podcast from database? - //TODO: Add input field for "annet" referral - if (ref.name !== "BYNN podcast") - referralsList.push( - //TODO: Post referrals on click - onSubmit(ref.ID)}>{ref.name} - ) + //TODO: Add input field for "annet" referral + if (ref.name !== "BYNN podcast") { + referralsList.push( + //TODO: Post referrals on click + onSubmit(ref.ID)}>{ref.name} + ) + } }) } return referralsList } - function onSubmit(referralID: number) { - dispatch(setPaneNumber(currentPaneNumber + 1)) + function postExistingReferral(referralID: number) { if (donorID) { const referralData = { referralTypeID: referralID, @@ -54,6 +57,29 @@ export default function ReferralPane() { otherComment: "" } postReferral(referralData) + dispatch(setPaneNumber(currentPaneNumber + 1)) + } + } + + function postOtherReferral() { + if (donorID) { + const referralData = { + referralTypeID: 10, + donorID: donorID, + otherComment: watchOtherInput + } + postReferral(referralData) + dispatch(setPaneNumber(currentPaneNumber + 1)) + } + } + + // This function is called when pressing any of the referral buttons except "Annet", whose ID is 10 + function onSubmit(referralID: number) { + if (referralID !== 10) { + postExistingReferral(referralID) + } + else if (referralID === 10) { + setOpenOtherInput(true) } } @@ -62,16 +88,27 @@ export default function ReferralPane() { Hvor hørte du om oss? - Valgfritt
onSubmit(-1))}> - - {setupReferrals()} - - - + + Valgfritt + + {setupReferrals()} + + + + + + + + Fortell gjerne mer + + + + {openOtherInput && setOpenOtherInput(false)} text="Tilbake" />} - + +
diff --git a/src/components/panes/ResultPane/ResultPane.tsx b/src/components/panes/ResultPane/ResultPane.tsx index e0250c8..5da855a 100644 --- a/src/components/panes/ResultPane/ResultPane.tsx +++ b/src/components/panes/ResultPane/ResultPane.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { useSelector } from 'react-redux'; import { PaymentMethod, State } from '../../../store/state'; import { Pane, PaneContainer, PaneTitle } from '../Panes.style'; +import DonationInfoBar from '../shared/DonationInfoBar/DonationInfoBar'; import { PrevButton } from '../shared/NavigationButtons'; import { BlackContainer, BoldWhiteText, Heart, ResultWrapper, VippsLogo, WhiteText, TextWrapper, InfoText } from './ResultPane.style'; @@ -13,6 +14,7 @@ export default function ReferralPane() { return ( + {(currentMethod === PaymentMethod.BANK) && Takk! @@ -40,12 +42,10 @@ export default function ReferralPane() { } {(currentMethod === PaymentMethod.VIPPS) && - } - ); } \ No newline at end of file diff --git a/src/components/panes/SharesPane/SharesPane.tsx b/src/components/panes/SharesPane/SharesPane.tsx index 8f45c0d..dbcf5dc 100644 --- a/src/components/panes/SharesPane/SharesPane.tsx +++ b/src/components/panes/SharesPane/SharesPane.tsx @@ -26,12 +26,14 @@ export default function SharesPane() { const [ nextDisabled, setNextDisabled ] = useState(false) const [ submitLoading, setSubmitLoading ] = useState(false) const currentPaneNumber = useSelector((state: State) => state.layout.paneNumber) + const isCustomShare = useSelector((state: State) => state.layout.customShare) const donorName = useSelector((state: State) => state.donation.donor?.name) const donorEmail = useSelector((state: State) => state.donation.donor?.email) const donorSSN = useSelector((state: State) => state.donation.donor?.ssn) const donorNewsletter = useSelector((state: State) => state.donation.donor?.newsletter) const donationSum = useSelector((state: State) => state.donation.sum) const donationMethod = useSelector((state: State) => state.donation.method) + const answeredReferral = useSelector((state: State) => state.layout.answeredReferral) const [ percentageErrorAnimation, setPercentageErrorAnimation ] = useState(false) const { register, watch, handleSubmit, setValue } = useForm({mode: 'all'}) const watchAllFields = watch() @@ -87,10 +89,21 @@ export default function SharesPane() { } }, [watchAllFields]) - function onSubmit() { + // This hook waits for the response (answeredReferral) from the POST donation request sent when submittig + // It then uses the response data to determine how many panes to skip + useEffect(() => { + if (answeredReferral !== undefined) { + if (answeredReferral && isCustomShare) { + dispatch(setPaneNumber(currentPaneNumber + 2)) + } + else if (isCustomShare) { + dispatch(setPaneNumber(currentPaneNumber + 1)) + } + } + }, [answeredReferral]) + function onSubmit() { dispatch(setShares(watchAllFields)) // This line might be redundant? - if (getTotalPercentage().totalPercentage === 100) { setSubmitLoading(true) if (donorName && donorEmail && donationMethod && donorNewsletter !== undefined) { @@ -124,11 +137,10 @@ export default function SharesPane() { if (donationSum) postData.amount = donationSum if (donorSSN) postData.donor.ssn = donorSSN.toString() - // TODO: Move dispatches setKID and setDonorID from network.ts to here + // TODO: Move dispatches from network.ts to here postDonation(postData, dispatch).then((result) => { - console.log(result) // undefined, how to fix? + console.log(result) // undefined, figure out how to use result data and move dispatches from network.ts setSubmitLoading(false) - dispatch(setPaneNumber(currentPaneNumber + 1)) }) } } diff --git a/src/components/panes/panes.style.tsx b/src/components/panes/panes.style.tsx index e0d809a..742f68e 100644 --- a/src/components/panes/panes.style.tsx +++ b/src/components/panes/panes.style.tsx @@ -23,6 +23,8 @@ export const UnderTitle = styled.p` font-size: 15px align-self: center; margin: 5px; + text-align: center; + color: gray; ` export const OrangeLink = styled.a` diff --git a/src/components/panes/shared/NavigationButtons.tsx b/src/components/panes/shared/NavigationButtons.tsx index 3d4bf84..128aa83 100644 --- a/src/components/panes/shared/NavigationButtons.tsx +++ b/src/components/panes/shared/NavigationButtons.tsx @@ -76,6 +76,7 @@ export function PrevButton() { const dispatch = useDispatch() function goBack() { + //TODO: This is probably redundant if (!isCustomShare && currentPaneNumber === 4) { dispatch(setPaneNumber(currentPaneNumber - 2)) } @@ -97,4 +98,12 @@ export function SkipButton(props: any) { Gi anonymt ) +} + +export function NavButton(props: any) { + return ( + + {props.text} + + ) } \ No newline at end of file