Skip to content
This repository has been archived by the owner on Apr 10, 2024. It is now read-only.

Commit

Permalink
Revert "Merge pull request #99 from stiftelsen-effekt/revert-98-stage"
Browse files Browse the repository at this point in the history
This reverts commit 85a4057, reversing
changes made to 45c1e88.
  • Loading branch information
philiphand committed Jul 27, 2021
1 parent 268a6e7 commit 3d3c2db
Show file tree
Hide file tree
Showing 34 changed files with 4,668 additions and 1,836 deletions.
5,421 changes: 3,742 additions & 1,679 deletions package-lock.json

Large diffs are not rendered by default.

18 changes: 4 additions & 14 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"name": "my-app",
"name": "effekt-widget-react",
"version": "0.1.0",
"private": true,
"homepage": ".",
Expand All @@ -18,14 +18,15 @@
"@types/validator": "^13.1.0",
"axios": "^0.21.1",
"email-validator": "^2.0.4",
"moment": "^2.29.1",
"pure-react-carousel": "^1.27.6",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-hook-form": "^6.11.2",
"react-query": "^2.26.2",
"react-redux": "^7.2.1",
"react-responsive-carousel": "^3.2.11",
"react-scripts": "^4.0.1",
"react-scripts": "^4.0.3",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-form": "^8.3.6",
Expand Down Expand Up @@ -62,16 +63,5 @@
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
"browserslist": [">0.3%", "not ie 11", "not dead", "not op_mini all"]
}
2 changes: 1 addition & 1 deletion public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>gieffektivt.no - Gi nå</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
Expand Down
Binary file added src/assets/avtalegiro.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
71 changes: 62 additions & 9 deletions src/components/panes/DonationPane/DonationPane.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,15 @@ import {
registerDonationAction,
setSum,
setShareType,
setDueDay,
} from "../../../store/donation/actions";
import { Pane, PaneContainer } from "../Panes.style";
import { State } from "../../../store/state";
import { ShareType } from "../../../types/Enums";
import {
PaymentMethod,
RecurringDonation,
ShareType,
} from "../../../types/Enums";
import { RichSelectOption } from "../../shared/RichSelect/RichSelectOption";
import { RichSelect } from "../../shared/RichSelect/RichSelect";
import { NextButton } from "../../shared/Buttons/NavigationButtons.style";
Expand All @@ -17,16 +22,18 @@ import { TextInput } from "../../shared/Input/TextInput";
import { SumWrapper } from "./DonationPane.style";
import { SharesSum } from "./SharesSum";
import { LoadingCircle } from "../../shared/LoadingCircle/LoadingCircle";
import { InfoBox } from "../../shared/Layout/Layout.style";
import { displayClaimWarning } from "./_util";

export const DonationPane: React.FC = () => {
const dispatch = useDispatch();
const shareType = useSelector((state: State) => state.donation.shareType);
const donationValid = useSelector((state: State) => state.donation.isValid);
const donationSum = useSelector((state: State) => state.donation.sum);
const donation = useSelector((state: State) => state.donation);
const [loadingAnimation, setLoadingAnimation] = useState(false);

const claimWarning = displayClaimWarning(donation);

function onSubmit() {
if (donationSum && donationSum > 0) {
if (donation.isValid) {
setLoadingAnimation(true);
dispatch(registerDonationAction.started(undefined));
} else {
Expand All @@ -46,7 +53,12 @@ export const DonationPane: React.FC = () => {
name="sum"
type="tel"
placeholder="0"
defaultValue={donationSum && donationSum > 1 ? donationSum : ""}
defaultValue={
donation.sum && donation.sum > 1 ? donation.sum : ""
}
clustered
selectOnClick
autoComplete="off"
onChange={(e) => {
if (
Validator.isInt(e.target.value) === true &&
Expand All @@ -58,10 +70,51 @@ export const DonationPane: React.FC = () => {
}
}}
/>

{donation.recurring === RecurringDonation.RECURRING &&
donation.method === PaymentMethod.BANK && (
<TextInput
label="Trekkdag"
defaultValue={donation.dueDay}
name="dueDay"
type="tel"
clustered
denomination="."
selectOnClick
autoComplete="off"
tooltipText="Vi belaster din konto én gang i måneden på valgte dato."
onChange={(e) => {
if (
Validator.isInt(e.target.value) === true &&
parseInt(e.target.value) < 29 &&
parseInt(e.target.value) > 0
) {
dispatch(setDueDay(parseInt(e.target.value)));
} else {
dispatch(setDueDay(-1));
}
}}
/>
)}
</SumWrapper>

{donation.dueDay &&
(donation.dueDay > 28 || donation.dueDay < 1) && (
<InfoBox>
Trekkdato må være mellom den 1. og 28. i en måned.
</InfoBox>
)}

{claimWarning && (
<InfoBox>
Om trekkdatoen settes til under fem dager frem i tid vil vi ikke
trekke deg før en måned senere grunnet bankens regler for
varslingstid.
</InfoBox>
)}

<RichSelect
selected={shareType}
selected={donation.shareType}
onChange={(type: ShareType) => dispatch(setShareType(type))}
>
<RichSelectOption
Expand All @@ -81,13 +134,13 @@ export const DonationPane: React.FC = () => {
<NextButton
type="button"
onClick={() => onSubmit()}
disabled={!donationValid}
disabled={!donation.isValid}
>
Neste
</NextButton>
</form>
)}
{loadingAnimation && <LoadingCircle>Hey</LoadingCircle>}
{loadingAnimation && <LoadingCircle />}
</PaneContainer>
</Pane>
);
Expand Down
30 changes: 30 additions & 0 deletions src/components/panes/DonationPane/_util.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import { PaymentMethod, RecurringDonation } from "../../../types/Enums";
import { Donation } from "../../../store/state";

export const displayClaimWarning = (donation: Donation): boolean => {
if (
donation.method !== PaymentMethod.BANK ||
donation.recurring !== RecurringDonation.RECURRING
)
return false;

const timeStamp = new Date();
const today = timeStamp.getDate();
const daysInMonth = new Date(
timeStamp.getFullYear(),
timeStamp.getMonth(),
0
).getDate();

if (donation.dueDay) {
if (today + 5 <= 28) {
if (donation.dueDay - today < 0) return false;
if (donation.dueDay - today < 5) return true;
return false;
}
if (donation.dueDay > today) return true;
if (donation.dueDay < today + 5 - daysInMonth) return true;
return false;
}
return false;
};
2 changes: 1 addition & 1 deletion src/components/panes/MethodPane/MethodButton.style.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export const MethodButtonWrapper = styled.div`
&.vipps {
background-image: url("https://storage.googleapis.com/effekt-widget/assets/logos/vipps.png");
background-position: 16px center;
background-position: 16px 25px;
background-size: 120px;
background-repeat: no-repeat;
}
Expand Down
16 changes: 3 additions & 13 deletions src/components/panes/MethodPane/MethodPane.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/* eslint-disable react/jsx-curly-newline */
import React, { useState } from "react";
import React from "react";
import { useDispatch, useSelector } from "react-redux";
import {
selectPaymentMethod,
Expand All @@ -12,7 +12,6 @@ import {
MethodWrapper,
InfoText,
RecurringSelectWrapper,
VippsComingSoon,
} from "./MethodPane.style";
import { RichSelect } from "../../shared/RichSelect/RichSelect";
import { RichSelectOption } from "../../shared/RichSelect/RichSelectOption";
Expand All @@ -22,10 +21,6 @@ import { MethodButton } from "./MethodButton";
export const MethodPane: React.FC = () => {
const dispatch = useDispatch();
const recurring = useSelector((state: State) => state.donation.recurring);
const [vippsDisabled, setVippsDisabled] = useState(
// eslint-disable-next-line no-unneeded-ternary
recurring === 0 ? true : false
);

const selectMethod = (method: PaymentMethod) => {
dispatch(selectPaymentMethod(method));
Expand All @@ -39,7 +34,6 @@ export const MethodPane: React.FC = () => {
<RichSelect
selected={recurring}
onChange={(value: RecurringDonation) => {
setVippsDisabled(value === 0);
dispatch(setRecurring(value));
}}
>
Expand All @@ -60,14 +54,10 @@ export const MethodPane: React.FC = () => {
onKeyDown={() => selectMethod(PaymentMethod.BANK)}
onClick={() => selectMethod(PaymentMethod.BANK)}
/>
{vippsDisabled && (
<VippsComingSoon>Kun engangsdonasjoner</VippsComingSoon>
)}
<MethodButton
className="vipps"
disabled={vippsDisabled}
onKeyDown={() => !vippsDisabled && selectMethod(PaymentMethod.VIPPS)}
onClick={() => !vippsDisabled && selectMethod(PaymentMethod.VIPPS)}
onKeyDown={() => selectMethod(PaymentMethod.VIPPS)}
onClick={() => selectMethod(PaymentMethod.VIPPS)}
>
2,99%
</MethodButton>
Expand Down
7 changes: 7 additions & 0 deletions src/components/panes/Panes.style.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -104,3 +104,10 @@ export const LoadingIcon = styled.img`
}
}
`;

export const CenterDiv = styled.div`
width: 100%;
display: flex;
align-items: center;
justify-content: center;
`;
22 changes: 22 additions & 0 deletions src/components/panes/PaymentPane/Bank/PaymentInformation.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import React from "react";
import { Donation } from "../../../../store/state";
import { RoundedBorder } from "../../../shared/Layout/Layout.style";
import { HorizontalLine, TextWrapper } from "./ResultPane.style";

export const PaymentInformation: React.FC<{
donation: Donation;
}> = ({ donation }) => {
return (
<RoundedBorder>
<TextWrapper>
<b>Kontonr</b>
<span>1506 29 95960</span>
</TextWrapper>
<HorizontalLine />
<TextWrapper>
<b>KID</b>
<span data-cy="kidNumber">{donation.kid}</span>
</TextWrapper>
</RoundedBorder>
);
};
22 changes: 22 additions & 0 deletions src/components/panes/PaymentPane/Bank/RecurringForm.style.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import styled from "styled-components";

export const AvtaleGiroButton = styled.button`
padding: 16px;
background: none;
border: none;
margin: 30px auto;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
text-align: right;
width: 80%;
background: rgba(93, 56, 0, 1);
box-shadow: 0px 1px 5px 2px #00000030;
border-radius: 5px;
color: white;
font-family: "Roboto";
font-weight: 600;
font-size: 16px;
cursor: pointer;
`;
56 changes: 56 additions & 0 deletions src/components/panes/PaymentPane/Bank/RecurringForm.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import React from "react";
import { Donation } from "../../../../store/state";
import AvtaleGiroLogo from "../../../../assets/avtalegiro.jpeg";
import { AvtaleGiroButton } from "./RecurringForm.style";
import { API_URL } from "../../../../config/api";
import { RoundedBorder } from "../../../shared/Layout/Layout.style";

export const RecurringBankDonationForm: React.FC<{
donation: Donation;
}> = ({ donation }) => {
return (
<RoundedBorder style={{ marginBottom: 10 }}>
<form
action="https://pvu.nets.no/ecsa/start"
method="post"
target="_parent"
>
<input
type="hidden"
name="companyName"
id="companyName"
value="Effektiv Altruisme Norge"
/>
<input
type="hidden"
name="companyAccountNo"
id="companyAccountNo"
value="15062995960"
/>
<input type="hidden" name="kid" id="kid" value={donation.kid} />
<input
type="hidden"
name="amountLimit"
id="amountLimit"
value={donation.sum || 1000}
/>
<input
type="hidden"
name="returnUrl"
id="returnUrl"
value={`${API_URL}/donations/status`}
/>
<input
type="hidden"
name="notificationDisabled"
id="notificationDisabled"
value="false"
/>
<AvtaleGiroButton type="submit">
Opprett avtale
<img src={AvtaleGiroLogo} alt="AvtaleGiro logo" height={20} />
</AvtaleGiroButton>
</form>
</RoundedBorder>
);
};
8 changes: 0 additions & 8 deletions src/components/panes/PaymentPane/Bank/ResultPane.style.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,6 @@ export const ResultWrapper = styled.div`
align-items: center;
`;

export const RoundedBorder = styled.div`
width: 92%;
border: 1px solid ${gray18};
border-radius: 5px;
padding-left: 4%;
padding-right: 4%;
`;

export const HorizontalLine = styled.div`
height: 1px;
background-color: ${gray18};
Expand Down
Loading

0 comments on commit 3d3c2db

Please sign in to comment.