Finished referrals

debug.log

@@ -0,0 +1 @@
+[1123/055231.138:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)

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,24 +54,24 @@ 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)
     });
 }
 
 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
     })
 }
 

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<DonationFormValues>({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))
+            }
         }
     }
 

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;

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,43 +19,67 @@ interface Referral {
 
 export default function ReferralPane() {
     const [referrals, setReferrals] = useState<Referral[]>()
+    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
-                <ReferralButton type="button" key={ref.ID} onClick={() => onSubmit(ref.ID)}>{ref.name}</ReferralButton>
-                )
+                //TODO: Add input field for "annet" referral
+                if (ref.name !== "BYNN podcast") {
+                    referralsList.push(
+                        //TODO: Post referrals on click
+                        <ReferralButton type="button" key={ref.ID} onClick={() => onSubmit(ref.ID)}>{ref.name}</ReferralButton>
+                    )
+                }
             })
         }
         return referralsList
     }
 
-    function onSubmit(referralID: number) {
-        dispatch(setPaneNumber(currentPaneNumber + 1))
+    function postExistingReferral(referralID: number) {
         if (donorID) {
             const referralData = {
                 referralTypeID: referralID,
                 donorID: donorID,
                 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() {
             <PaneContainer>
                 <DonationInfoBar />
                 <PaneTitle>Hvor hørte du om oss?</PaneTitle>
-                <UnderTitle>Valgfritt</UnderTitle>
                 <form onSubmit={handleSubmit(() => onSubmit(-1))}>
-                    <ReferralsWrapper>
-                        {setupReferrals()}
-                    </ReferralsWrapper>
-                    <NavigationWrapper>
-                        <PrevButton />
+                    <Collapse in={!openOtherInput}>
+                        <UnderTitle>Valgfritt</UnderTitle>
+                        <ReferralsWrapper>
+                            {setupReferrals()}
+                        </ReferralsWrapper>
+                        <NavigationWrapper>
+                            <NextButton isDisabled={false} />
+                        </NavigationWrapper>
+                    </Collapse>
+                    <Collapse in={openOtherInput}>
+                        <OtherInputWrapper>
+                            <UnderTitle>Fortell gjerne mer</UnderTitle>
+                            <OtherInput name="other" placeholder="Skriv her" ref={register} />
+                        </OtherInputWrapper>
+                        <NavigationWrapper>
+                        {openOtherInput && <NavButton onClick={() => setOpenOtherInput(false)} text="Tilbake" />}
                         <VerticalLine />
-                        <NextButton isDisabled={false} />
+                        <NavButton onClick={postOtherReferral} text="Fullfør"/>
                     </NavigationWrapper>
+                    </Collapse>
                 </form>
             </PaneContainer>
         </Pane>

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 (
         <Pane>
             <PaneContainer>
+                <DonationInfoBar />
                 {(currentMethod === PaymentMethod.BANK) && 
                     <ResultWrapper>
                         <PaneTitle>Takk!</PaneTitle>
@@ -40,12 +42,10 @@ export default function ReferralPane() {
                 }
                 {(currentMethod === PaymentMethod.VIPPS) &&
                      <ResultWrapper>
-                        <VippsLogo src="https://storage.googleapis.com/effekt-widget/assets/logos/vipps.png" alt="Vipps logo" />
                         <button>Betal med Vipps</button>
                     </ResultWrapper>
                 }
             </PaneContainer>
-            <PrevButton />
         </Pane>
     );
 }

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))
                 })
             }
         }

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`

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) {
             <ButtonText>Gi anonymt</ButtonText>
         </StyledSkipButton>
     )
+}
+
+export function NavButton(props: any) {
+    return (    
+        <NavigationButton type="button" onClick={props.onClick}>
+            <SmallButtonText>{props.text}</SmallButtonText>
+        </NavigationButton>
+    )
 }