Skip to content

Commit

Permalink
Add donations page
Browse files Browse the repository at this point in the history
  • Loading branch information
@AdityaKhatri
AdityaKhatri committed Aug 28, 2024
1 parent 5b5fed4 commit bca3804
Show file tree
Hide file tree
Showing 10 changed files with 273 additions and 1 deletion.
4 changes: 3 additions & 1 deletion Dockerfile
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
FROM node:17-buster-slim AS base
FROM node:18-bullseye AS base

MAINTAINER togglecorp info@togglecorp.com

Expand All @@ -8,6 +8,8 @@ RUN apt-get update -y \

WORKDIR /code

RUN git config --global --add safe.directory /code

FROM base AS full-client

COPY ./package.json ./yarn.lock /code/
Expand Down
6 changes: 6 additions & 0 deletions app/Base/components/Navbar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -233,6 +233,12 @@ function Navbar(props: Props) {
)}
</div>
)}
<SmartButtonLikeLink
route={routes.donations}
variant="general"
>
{strings.donationsButtonLabel}
</SmartButtonLikeLink>
<SelectInput
nonClearable
variant="general"
Expand Down
6 changes: 6 additions & 0 deletions app/Base/components/Routes/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,12 @@ function Routes(props: Props) {
>
{routes.login.load({ className })}
</Route>
<Route
exact
path={routes.donations.path}
>
{routes.donations.load({ className })}
</Route>
<Route
exact
path={routes.register.path}
Expand Down
55 changes: 55 additions & 0 deletions app/Base/configs/lang.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,10 @@ export const navbar = {
en: 'Search all books',
ne: 'किताब खोज्नुहोस्',
},
donationsButtonLabel: {
en: 'Donations',
ne: 'योगदान',
},
signUpButtonLabel: {
en: 'Register',
ne: 'दर्ता',
Expand Down Expand Up @@ -118,6 +122,57 @@ export const navbar = {
},
};

export const donations = {
donationsHeading: {
en: 'Donations',
ne: 'योगदान',
},
donationsDescription1: {
en: 'At Kitab Bazar, we believe in the power of early reading to shape young minds. Driven by the importance of early literacy and aligned with the government-mandated PMEC standard, we are dedicated to ensuring that every grade in schools has book corners filled with enriching supplementary materials.',
ne: 'किताब बजारमा, हामी युवा दिमागलाई आकार दिन प्रारम्भिक पढाइको शक्तिमा विश्वास गर्छौं। प्रारम्भिक साक्षरताको महत्त्वबाट सञ्चालित र सरकारले-अनिवार्य PMEC मापदण्डसँग पङ्क्तिबद्ध, हामी विद्यालयहरूमा प्रत्येक कक्षामा पूरक सामग्रीहरूले भरिएको पुस्तक कुनाहरू छन् भनी सुनिश्चित गर्न समर्पित छौं।',
},
donationsDescription2: {
en: 'With your donation, Kitab Bazar can ensure that every school, even in remote areas, has book corners filled with stories, poems, and songs that inspire a love for reading. Your contribution fuels the future of young minds.',
ne: 'तपाईंको दानले, किताब बजारले दुर्गम क्षेत्रहरूमा समेत प्रत्येक विद्यालयमा कथा, कविता र गीतहरूले भरिएको पुस्तक कुनाहरू छन् भनी सुनिश्चित गर्न सक्छ जसले पढ्नको लागि प्रेमलाई प्रेरित गर्दछ। तपाईंको योगदानले युवा दिमागको भविष्यलाई इन्धन गर्छ ।',
},
donationsDescription3: {
en: 'Thank you for your generosity!',
ne: 'तपाईंको उदारता को लागी धन्यवाद!',
},
donateMoneyHeading: {
en: 'Donate',
ne: 'योगदान',
},
donateMoneyDescription: {
en: 'To make the donation, please follow this link.',
ne: 'दान गर्न, कृपया यो लिङ्क पछ्याउनुहोस्।',
},
donateSecondHandBooksHeading: {
en: 'Donate Second Hand Books',
ne: 'दोस्रो हात पुस्तकहरू दान गर्नुहोस्',
},
donateSecondHandBooksDescription: {
en: 'Please fill the form below to donate second hand books.',
ne: 'सेकेन्ड ह्यान्ड पुस्तकहरू दान गर्न कृपया तलको फारम भर्नुहोस्।',
},
donateBooksFromWebsiteHeading: {
en: 'Donate Books from Website',
ne: 'वेबसाइटबाट पुस्तकहरू दान गर्नुहोस्',
},
donateBooksFromWebsiteDescription: {
en: 'Follow the general book purchasing process and contact us for further confirmation',
ne: 'सामान्य पुस्तक खरिद प्रक्रिया पछ्याउनुहोस् र थप पुष्टिको लागि हामीलाई सम्पर्क गर्नुहोस्',
},
linkToTheFormButtonLabel: {
en: 'Link to the Form',
ne: 'फारमको लिङ्क',
},
contactUsAt: {
en: 'Contact us at: +977 9762416156',
ne: 'हामीलाई सम्पर्क गर्नुहोस्: +977 9762416156',
},
};

export const login = {
loginHeaderLabel: {
en: 'Login',
Expand Down
10 changes: 10 additions & 0 deletions app/Base/configs/routes.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,15 @@ const login = wrap({
},
visibility: 'is-not-authenticated',
});
const donations = wrap({
path: '/donations/',
title: `${title} - Donations`,
navbarVisibility: true,
component: lazy(() => import('#views/Donations')),
componentProps: {
},
visibility: 'is-anything',
});
const forgotPassword = wrap({
path: '/forgot-password/',
title: `${title} - Forgot Password`,
Expand Down Expand Up @@ -140,6 +149,7 @@ const eBook = wrap({
const routes = {
register,
login,
donations,
home,
myProfile,
wishList,
Expand Down
Binary file added app/resources/img/donate-books.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/resources/img/donate-website.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/resources/img/money.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
120 changes: 120 additions & 0 deletions app/views/Donations/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
import React from 'react';
import { _cs } from '@togglecorp/fujs';
import {
Container,
Heading,
ButtonLikeLink,
} from '@the-deep/deep-ui';
import { IoOpenOutline } from 'react-icons/io5';

import { donations } from '#base/configs/lang';
import DonateMoney from '#resources/img/money.png';
import DonateBooks from '#resources/img/donate-books.png';
import DonateWebsite from '#resources/img/donate-website.png';
import useTranslation from '#base/hooks/useTranslation';

import styles from './styles.css';

interface Props {
className?: string;
}

function Donations(props: Props) {
const { className } = props;
const strings = useTranslation(donations);

return (
<div className={_cs(styles.about, className)}>
<div className={styles.pageContent}>
<Container
className={styles.donationsText}
heading={strings.donationsHeading}
>
<p>
{strings.donationsDescription1}
</p>
<p>
{strings.donationsDescription2}
</p>
<p>
{strings.donationsDescription3}
</p>
</Container>
<div className={styles.donateCards}>
<div className={styles.donateItem}>
<img
className={styles.icon}
src={DonateMoney}
alt="logo"
/>
<Heading
size="extraSmall"
>
{strings.donateMoneyHeading}
</Heading>
<div className={styles.description}>
{strings.donateMoneyDescription}
</div>
<div className={styles.endWrapper}>
<ButtonLikeLink
to="https://forms.gle/iAPt8skLHCcCLY6w7"
actions={<IoOpenOutline />}
className={styles.button}
variant="tertiary"
>
{strings.linkToTheFormButtonLabel}
</ButtonLikeLink>
</div>
</div>
<div className={styles.donateItem}>
<img
className={styles.icon}
src={DonateBooks}
alt="logo"
/>
<Heading
size="extraSmall"
>
{strings.donateSecondHandBooksHeading}
</Heading>
<div className={styles.description}>
{strings.donateSecondHandBooksDescription}
</div>
<div className={styles.endWrapper}>
<ButtonLikeLink
to="https://forms.gle/2eLYuiDxRnMemgc99"
actions={<IoOpenOutline />}
className={styles.button}
variant="tertiary"
>
{strings.linkToTheFormButtonLabel}
</ButtonLikeLink>
</div>
</div>
<div className={styles.donateItem}>
<img
className={styles.icon}
src={DonateWebsite}
alt="logo"
/>
<Heading
size="extraSmall"
>
{strings.donateBooksFromWebsiteHeading}
</Heading>
<div className={styles.description}>
{strings.donateBooksFromWebsiteDescription}
</div>
<div className={styles.endWrapper}>
<div className={styles.description}>
{strings.contactUsAt}
</div>
</div>
</div>
</div>
</div>
</div>
);
}

export default Donations;
73 changes: 73 additions & 0 deletions app/views/Donations/styles.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
.about {
display: flex;
align-items: center;
flex-direction: column;
padding: var(--dui-spacing-extra-large);

.page-content {
display: flex;
flex-wrap: wrap;
width: 100%;
max-width: var(--kitab-page-max-width);
gap: var(--dui-spacing-medium);

* {
overflow: unset;
}

.donations-text {
background-color: unset;
padding: var(--dui-spacing-large);
}

.donate-cards {
display: grid;
grid-gap: var(--dui-spacing-large);
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
padding: var(--dui-spacing-large);
width: 100%;

.donate-item {
display: flex;
align-items: center;
flex-direction: column;
justify-content: flex-end;
gap: var(--dui-spacing-large);
border: var(--dui-width-separator-thin) solid var(--dui-color-separator);
border-radius: var(--kitab-radius-border);
background-color: var(--dui-color-foreground);
padding: var(--dui-spacing-large);
min-width: 15rem;
height: 18rem;

.icon {
width: 5rem;
height: 5rem;
object-fit: contain;
}

.description {
text-align: center;
color: var(--dui-color-label);
font-size: var(--dui-font-size-medium);
}

.end-wrapper {
display: flex;
align-items: flex-end;
flex-grow: 1;

.button {
justify-self: flex-end;
}
}
}

@media (max-width: 435px) {
.donate-item {
min-width: 13rem;
}
}
}
}
}

0 comments on commit bca3804

Please sign in to comment.