Skip to content

Commit 01eb67d

Browse files
Magda-R-bitMagda-R-bit
committed
Merge branch 'master' into prod
2 parents c6d6a88 + ef3dd28 commit 01eb67d

5 files changed

Lines changed: 275 additions & 2 deletions

File tree

‎package-lock.json‎

Lines changed: 39 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@
8989
"react-helmet": "^6.1.0",
9090
"react-icons": "^5.5.0",
9191
"react-loader-spinner": "^5.1.5",
92+
"react-modal": "^3.16.3",
9293
"react-onclickoutside": "^6.12.2",
9394
"react-paginate": "^7.1.3",
9495
"react-redux": "^8.0.4",

‎src/components/Modal.tsx‎

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
import React from 'react';
2+
import Modal from 'react-modal';
3+
4+
5+
Modal.setAppElement('#___gatsby');
6+
7+
interface MyModalProps {
8+
isOpen: boolean;
9+
onClose: () => void;
10+
}
11+
12+
const MyModal: React.FC<MyModalProps> = ({ isOpen, onClose }) => {
13+
const isMobile =
14+
typeof window !== 'undefined' && window.innerWidth <= 600;
15+
const isSmallMobile =
16+
typeof window !== 'undefined' && window.innerWidth <= 300;
17+
18+
const overlayStyle: React.CSSProperties = {
19+
backgroundColor: 'rgba(0, 0, 0, 0.6)',
20+
position: 'fixed',
21+
inset: 0,
22+
zIndex: 9999,
23+
};
24+
25+
26+
const contentStyle: React.CSSProperties = {
27+
position: 'fixed',
28+
top: 0,
29+
left: 0,
30+
right: 0,
31+
bottom: 0,
32+
margin: 0,
33+
border: 'none',
34+
padding: 0,
35+
background: 'transparent',
36+
overflow: 'hidden',
37+
display: 'flex',
38+
justifyContent: 'center',
39+
alignItems: 'center',
40+
};
41+
42+
43+
const boxStyle: React.CSSProperties = {
44+
position: 'relative',
45+
background: '#bc079a',
46+
borderRadius: 30,
47+
boxSizing: 'border-box',
48+
width: isMobile ? '82vw' : 720,
49+
maxWidth: '100%',
50+
maxHeight: isMobile ? '85vh' : '90vh',
51+
overflowY: 'auto',
52+
padding: isMobile ? '20px 16px' : '40px 32px',
53+
color: '#ffffff',
54+
textAlign: 'center',
55+
};
56+
57+
58+
const mainHeadingStyle: React.CSSProperties = {
59+
fontSize: isSmallMobile ? '1.1rem' : isMobile ? '1.9rem' : '2.8rem',
60+
fontWeight: 700,
61+
marginBottom: isSmallMobile ? '0.9rem' : '1.2rem',
62+
};
63+
64+
const paragraphStyle: React.CSSProperties = {
65+
fontSize: isSmallMobile ? '0.9rem' : isMobile ? '0.95rem' : '1.15rem',
66+
lineHeight: 1.45,
67+
margin: '0.3rem 0',
68+
};
69+
70+
const highlightYellow: React.CSSProperties = {
71+
color: '#FCFF59',
72+
fontWeight: 700,
73+
};
74+
75+
const buttonWrapperStyle: React.CSSProperties = {
76+
marginTop: isMobile ? '1.5rem' : '2.5rem',
77+
marginBottom: isMobile ? '1.5rem' : '2.5rem',
78+
display: 'flex',
79+
justifyContent: 'center',
80+
};
81+
82+
83+
const buttonStyle: React.CSSProperties = {
84+
backgroundColor: '#ffffff',
85+
color: '#000000',
86+
padding: isSmallMobile ? '8px 20px' : isMobile ? '9px 28px' : '10px 64px',
87+
minWidth: isSmallMobile ? 210 : isMobile ? 240 : 420,
88+
border: 'none',
89+
borderRadius: 999,
90+
fontSize: isSmallMobile ? '1rem' : isMobile ? '1.05rem' : '1.3rem',
91+
fontWeight: 700,
92+
cursor: 'pointer',
93+
boxShadow: '0 4px 10px rgba(0,0,0,0.25)',
94+
display: 'inline-flex',
95+
alignItems: 'center',
96+
justifyContent: 'center',
97+
gap: 8,
98+
};
99+
100+
101+
const bottomInfoStyle: React.CSSProperties = {
102+
fontSize: isMobile ? '0.95rem' : '1.05rem',
103+
lineHeight: 1.5,
104+
marginTop: '0.6rem',
105+
};
106+
107+
const bottomHighlight: React.CSSProperties = {
108+
fontWeight: 700,
109+
textDecoration: 'underline',
110+
};
111+
112+
const handleClick = () => {
113+
window.open(
114+
'https://www.pola-app.pl/1-5-podatku-na-aplikacje-pola',
115+
'_blank',
116+
'noopener,noreferrer'
117+
);
118+
onClose();
119+
};
120+
121+
const closeButtonStyle: React.CSSProperties = {
122+
position: 'absolute',
123+
top: isMobile ? 10 : 14,
124+
right: isMobile ? 10 : 18,
125+
width: 32,
126+
height: 32,
127+
borderRadius: '50%',
128+
border: 'none',
129+
background: 'rgba(255, 255, 255, 0.2)',
130+
color: '#ffffff',
131+
fontSize: 20,
132+
lineHeight: 1,
133+
cursor: 'pointer',
134+
display: 'flex',
135+
alignItems: 'center',
136+
justifyContent: 'center',
137+
boxShadow: '0 2px 6px rgba(0,0,0,0.25)',
138+
};
139+
140+
141+
return (
142+
<Modal
143+
isOpen={isOpen}
144+
onRequestClose={onClose}
145+
shouldCloseOnOverlayClick
146+
contentLabel="Odpisz darowiznę od podatku PIT"
147+
style={{ overlay: overlayStyle, content: contentStyle }}
148+
>
149+
<div style={boxStyle}>
150+
<button
151+
type="button"
152+
aria-label="Zamknij"
153+
style={closeButtonStyle}
154+
onClick={onClose}
155+
>
156+
×
157+
</button>
158+
<h2 style={mainHeadingStyle}>
159+
Odpisz darowiznę od podatku PIT!
160+
</h2>
161+
162+
<p style={paragraphStyle}>
163+
Przy wypełnianiu PIT, pamiętaj o uwzględnianiu darowizn za 2025 r.
164+
</p>
165+
166+
<div style={{ marginTop: '1.5rem', marginBottom: '1rem' }}>
167+
<p
168+
style={{
169+
...paragraphStyle,
170+
fontSize: isMobile ? '1.05rem' : '1.25rem',
171+
fontWeight: 600,
172+
}}
173+
>
174+
Nie pamiętasz, jaka kwota została przekazana na Polę?
175+
</p>
176+
<p style={paragraphStyle}>
177+
Napisz do nas —{' '}
178+
<span style={highlightYellow}>
179+
podamy Ci łączną sumę Twoich wpłat.
180+
</span>
181+
</p>
182+
</div>
183+
184+
<div style={buttonWrapperStyle}>
185+
<button
186+
type="button"
187+
style={buttonStyle}
188+
onClick={handleClick}
189+
>
190+
Wspieram
191+
</button>
192+
</div>
193+
194+
<div>
195+
<p style={bottomInfoStyle}>
196+
1,5% dla Poli KRS:{' '}
197+
<span style={highlightYellow}> 0000128315</span>
198+
</p>
199+
<p style={bottomInfoStyle}>
200+
Cel szczegółowy:{' '}
201+
<span style={highlightYellow}>Aplikacja Pola</span>
202+
</p>
203+
</div>
204+
</div>
205+
</Modal>
206+
);
207+
};
208+
209+
export default MyModal;

‎src/pages/index.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { EAN, ISearchResults } from 'search';
44
import styled from 'styled-components';
55

66
import { PageProps } from 'gatsby';
7-
import React from 'react';
7+
import React, { useEffect, useState } from 'react';
88
import { ConnectedProps, connect } from 'react-redux';
99

1010
import { IPolaState } from '@App/state';
@@ -35,6 +35,7 @@ import { SearchStateName, checkLoaded } from 'search/state/search-reducer';
3535
import { selectedProductDispatcher } from 'search/state/selected-product-dispatcher';
3636

3737
import { Device, color, margin, padding, pageWidth } from '@Styles/theme';
38+
import MyModal from '../components/Modal';
3839

3940
const connector = connect(
4041
(state: IPolaState) => {
@@ -173,6 +174,13 @@ const HomePage = (props: IHomePage) => {
173174
const isLoaded = checkLoaded(searchState);
174175
const isLoading = searchState === SearchStateName.LOADING;
175176
const isError = searchState === SearchStateName.ERROR;
177+
const [isModalOpen, setIsModalOpen] = useState(false);
178+
179+
useEffect(() => {
180+
if (typeof window === 'undefined') return;
181+
const timer = setTimeout(() => setIsModalOpen(true), 1000); // np. 1s opóźnienie
182+
return () => clearTimeout(timer);
183+
}, []);
176184

177185
return (
178186
<PageLayout location={props.location} page={PageType.HOME}>
@@ -204,6 +212,7 @@ const HomePage = (props: IHomePage) => {
204212
)}
205213
</Content>
206214
</PageSection>
215+
<MyModal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} />
207216
<WrapperResult>
208217
{(isLoaded || isLoading) && (
209218
<SearchResultsHeader

‎yarn.lock‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6675,6 +6675,11 @@ execa@^5.0.0, execa@^5.1.1:
66756675
signal-exit "^3.0.3"
66766676
strip-final-newline "^2.0.0"
66776677

6678+
exenv@^1.2.0:
6679+
version "1.2.2"
6680+
resolved "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz"
6681+
integrity sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw==
6682+
66786683
exit@^0.1.2:
66796684
version "0.1.2"
66806685
resolved "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz"
@@ -12733,7 +12738,7 @@ react-is@^18.2.0:
1273312738
resolved "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz"
1273412739
integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
1273512740

12736-
react-lifecycles-compat@^3.0.4:
12741+
react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4:
1273712742
version "3.0.4"
1273812743
resolved "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz"
1273912744
integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
@@ -12747,6 +12752,16 @@ react-loader-spinner@^5.1.5:
1274712752
styled-components "^5.3.5"
1274812753
styled-tools "^1.7.2"
1274912754

12755+
react-modal@^3.16.3:
12756+
version "3.16.3"
12757+
resolved "https://registry.npmjs.org/react-modal/-/react-modal-3.16.3.tgz"
12758+
integrity sha512-yCYRJB5YkeQDQlTt17WGAgFJ7jr2QYcWa1SHqZ3PluDmnKJ/7+tVU+E6uKyZ0nODaeEj+xCpK4LcSnKXLMC0Nw==
12759+
dependencies:
12760+
exenv "^1.2.0"
12761+
prop-types "^15.7.2"
12762+
react-lifecycles-compat "^3.0.0"
12763+
warning "^4.0.3"
12764+
1275012765
react-onclickoutside@^6.12.2:
1275112766
version "6.12.2"
1275212767
resolved "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.12.2.tgz"

0 commit comments

Comments
 (0)