45 | );
46 | }
47 |
48 | InputFormControl.propTypes = {
49 | id: PropTypes.string.isRequired,
50 | label: PropTypes.string,
51 | placeholder: PropTypes.string,
52 | type: PropTypes.string,
53 | value: PropTypes.string.isRequired,
54 | onChange: PropTypes.func.isRequired,
55 | };
56 |
57 | export default InputFormControl;
58 |
--------------------------------------------------------------------------------
/data/InkindCardsData.json:
--------------------------------------------------------------------------------
1 | {
2 | "data": [
3 | {
4 | "key": 1,
5 | "title": "Laptop for Families",
6 | "backgroundImageAltText": "Card about Laptops for families",
7 | "backgroundImageSource": "/images/Laptop.jpeg",
8 | "paragraphs": [
9 | "Mail us your used or new laptop. We'll set up the donated laptops in our public computer room for the families to use for free. Some of the donated laptops will go to the families who don't have home computers, or who don't have enough computers for all their children to use."
10 | ],
11 | "isExternal": true,
12 | "link": "https://forms.gle/K5ua2nUyrZ9bv4s3A",
13 | "address": null,
14 | "action": "Donate",
15 | "cause": null,
16 | "actionCost": null
17 | },
18 | {
19 | "key": 2,
20 | "title": "Hygiene Kits",
21 | "backgroundImageAltText": "Card about Hygiene Kits",
22 | "backgroundImageSource": "/images/HygieneKit.webp",
23 | "paragraphs": [
24 | "Order a bulk pack of hygiene kits for us to share with people experiencing homelessness.",
25 | "Each hygiene kit allows an unhoused individual to freshen up and feel more confident about their hygiene for work, school, or even just to have a better day."
26 | ],
27 | "address": "1543 E Palmdale Blvd, Ste E, Palmdale, CA 93550",
28 | "label": "Ship the kits to:",
29 | "isExternal": true,
30 | "link": "https://www.amazon.com/96-Kits-Hygiene-Travel-Charity/dp/B0881YKMBL",
31 | "action": "96 Hygiene Kits for $153",
32 | "cause": null,
33 | "actionCost": null
34 | }
35 | ]
36 | }
37 |
--------------------------------------------------------------------------------
/components/HealthWorkshopCard.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import Card, { CardAction, CardParagraph } from './Card';
4 | import useStripeSession from '../hooks/useStripeSession';
5 |
6 | const actionCost = 2000;
7 |
8 | function HealthWorkshopCard() {
9 | const [handleSubmit, isPending] = useStripeSession();
10 |
11 | const handleOnClick = () =>
12 | handleSubmit({
13 | amount: actionCost,
14 | cause: 'Creating a Health Workshop',
15 | });
16 |
17 | return (
18 |
21 | {`Create 1 Workshop for $${actionCost}`}
22 |
23 | }
24 | backgroundImageAltText="Card about Health Education Workshop"
25 | backgroundImageSource="/images/HealthWorkshop.jpg"
26 | paragraph={
27 | <>
28 |
29 | {
30 | 'Help in establishing one free health education workshop for a community that is facing major disparities in health conditions and to help those people who need care and attention.'
31 | }
32 |
33 |
34 | {
35 | 'Also, your donation will go toward health-themed mini gift bags to motivate people to attend a workshop, equipment such as trainer simulaids for edema and breast disease, venue costs, and to hire public health educators to prepare presentations.'
36 | }
37 |
38 |
39 | }
40 | title={<>{'Health Education Workshop'}}
41 | />
42 | );
43 | }
44 |
45 | export default HealthWorkshopCard;
46 |
--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "browser": true,
4 | "es2021": true,
5 | "node": true,
6 | "jest": true
7 | },
8 | "extends": [
9 | "eslint:recommended",
10 | "plugin:react/recommended",
11 | "prettier",
12 | "plugin:prettier/recommended",
13 | "next"
14 | ],
15 | "parserOptions": {
16 | "ecmaFeatures": {
17 | "jsx": true
18 | },
19 | "ecmaVersion": 12,
20 | "sourceType": "module"
21 | },
22 | "plugins": ["react"],
23 | "settings": {
24 | "react": {
25 | "version": "detect"
26 | }
27 | },
28 | "rules": {
29 | "comma-dangle": [
30 | "error",
31 | {
32 | "arrays": "always-multiline",
33 | "objects": "always-multiline",
34 | "imports": "always-multiline",
35 | "exports": "always-multiline",
36 | "functions": "never"
37 | }
38 | ],
39 | "prefer-template": ["error"],
40 | "react/button-has-type": ["error"],
41 | "react/display-name": ["off"],
42 | "react/jsx-max-depth": ["off"],
43 | "react/jsx-no-literals": ["error"],
44 | "react/jsx-props-no-spreading": ["off"],
45 | // "react/jsx-sort-props": ["error"],
46 | "react/no-multi-comp": ["error", { "ignoreStateless": true }],
47 | "react/require-default-props": ["off"],
48 | "react/self-closing-comp": ["error"],
49 | "semi": ["error", "always"],
50 | "sort-imports": [
51 | "error",
52 | {
53 | "ignoreCase": false,
54 | "ignoreDeclarationSort": false,
55 | "ignoreMemberSort": false,
56 | "memberSyntaxSortOrder": ["none", "all", "multiple", "single"],
57 | "allowSeparatedGroups": true
58 | }
59 | ]
60 | }
61 | }
62 |
--------------------------------------------------------------------------------
/styles/global.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | @font-face {
6 | font-family: 'Roboto';
7 | src: url('/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf');
8 | font-style: normal;
9 | font-weight: 400;
10 | font-display: swap;
11 | }
12 | @font-face {
13 | font-family: 'Roboto';
14 | src: url('/fonts/Source_Sans_Pro/SourceSansPro-Bold.ttf');
15 | font-style: bold;
16 | font-weight: 500;
17 | font-display: swap;
18 | }
19 |
20 | @layer components {
21 | .btn {
22 | @apply tracking-wider text-base font-normal shadow-lg;
23 | }
24 |
25 | .shaded-text {
26 | @apply bg-black bg-opacity-10 py-2 rounded-lg;
27 | }
28 |
29 | .nav-link {
30 | @apply btn btn-ghost btn-sm rounded-btn;
31 | }
32 |
33 | .nav-btn {
34 | @apply btn btn-square btn-ghost;
35 | }
36 |
37 | .nav-icon {
38 | @apply inline-block w-5 h-5 stroke-current;
39 | }
40 |
41 | .side-nav-btn {
42 | @apply btn btn-ghost btn-sm rounded-btn drop-shadow-none;
43 | box-shadow: none; /* We can't use TW class in @apply because it conflicts with .btn, so let's use simple property */
44 | }
45 |
46 | .btn-accent {
47 | @apply btn text-gray-700 shadow-md outline-none border-none bg-teal-light hover:bg-teal-dark hover:text-gray-50;
48 | }
49 | }
50 | @layer utilities {
51 | @variants responsive {
52 | /* Hide scrollbar for Chrome, Safari and Opera */
53 | .no-scrollbar::-webkit-scrollbar {
54 | display: none;
55 | }
56 |
57 | /* Hide scrollbar for IE, Edge and Firefox */
58 | .no-scrollbar {
59 | -ms-overflow-style: none; /* IE and Edge */
60 | scrollbar-width: none; /* Firefox */
61 | }
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/components/email/ThankyouEmail.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import SurveyContainer from './SurveyContainer';
3 | import { useContextTheme } from 'components/ThemeContext';
4 |
5 | export default function ThankyouEmail({ nextComponent }) {
6 | const { theme, textColor } = useContextTheme();
7 |
8 | const handleForwardButtonClick = () => {
9 | nextComponent(2);
10 | };
11 |
12 | const handleBackButtonClick = () => {
13 | nextComponent();
14 | };
15 |
16 | return (
17 |
18 |
{'Thanks you!'}
19 |
20 | {
21 | 'You are now on our mailing list. If you have a moment to take a quick survey, it would greatly help us know how we can better serve the community and when to reach out to you.'
22 | }
23 |
28 | {
29 | 'The page you requested was not found. Always act in kindness by reporting errors like this '
30 | }
31 |
35 |
36 | {'here.'}
37 |
38 |
39 |
40 |
41 |
42 |
43 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 | );
58 | }
59 |
--------------------------------------------------------------------------------
/docs/env_vars.md:
--------------------------------------------------------------------------------
1 | # Environment Variables
2 |
3 | We use environment variables to store secrets such as API keys.
4 |
5 | ## How This Project Sets Per-Environment Variables
6 |
7 | To set environment variables in each environment:
8 |
9 | - Dev: Copy _.env.example_ to _.env_ then replace any sample values with real ones as per below
10 | - Prod: Set the Preview and Production values in [Vercel > Settings > Environment Variables](https://vercel.com/margaritahumanitarian/helpafamily/settings/environment-variables)
11 |
12 | ## Google Maps API Key
13 |
14 | `NEXT_PUBLIC_GMAPS_JS_API_KEY `
15 |
16 | API key for the Maps JavaScript API.
17 |
18 | ### Getting a Key
19 |
20 | Instructions for getting this key: [Maps JavaScript API: Using API Keys > Creating API Keys](https://developers.google.com/maps/documentation/javascript/get-api-key#creating-api-keys)
21 |
22 | In the Google console, name it something like ** NEXT_PUBLIC_GMAPS_JS_API_KEY (Dev, audreyfeldroy)** or ** NEXT_PUBLIC_GMAPS_JS_API_KEY (Prod)**:
23 |
24 | 
25 |
26 | That will help you identify which key is for which environment.
27 |
28 | ### Key Restrictions
29 |
30 | If you're just using this key for local development, it's okay to leave _Key restrictions_ as None like this:
31 |
32 |
33 | For the Vercel preview key, the *Website restrictions* setting will be something like:
34 |
35 | A production key should have these restrictions:
36 |
37 |
38 |
39 | ## Setting Your Key for Local Development
40 |
41 | When you run `yarn dev`, if your Google Maps JS API Key isn't set yet you'll get an error in the browser JS console like:
42 |
43 | > js?v=3.exp&libraries=geometry,drawing,places&key=undefined:100 Google Maps JavaScript API error: InvalidKeyMapError
44 | > https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key-map-error
45 |
46 | To fix that:
47 |
48 | 1. Set this in `.env`, replacing it with your actual key:
49 |
50 | NEXT_PUBLIC_GMAPS_JS_API_KEY = ""
51 |
52 | 2. ???
53 |
--------------------------------------------------------------------------------
/hooks/usePosition.js:
--------------------------------------------------------------------------------
1 | import { useCallback, useEffect, useState } from 'react';
2 |
3 | export function usePosition(ref) {
4 | const [prevElement, setPrevElement] = useState(null);
5 | const [nextElement, setNextElement] = useState(null);
6 | useEffect(() => {
7 | const element = ref.current;
8 | const update = () => {
9 | const rect = element.getBoundingClientRect();
10 | const visibleElements = Array.from(element.children).filter((child) => {
11 | const childRect = child.getBoundingClientRect();
12 | return rect.left <= childRect.left && rect.right >= childRect.right;
13 | });
14 | if (visibleElements.length > 0) {
15 | setPrevElement(getPrevElement(visibleElements));
16 | setNextElement(getNextElement(visibleElements));
17 | }
18 | };
19 |
20 | update();
21 | element.addEventListener('scroll', update, { passive: true });
22 | return () => {
23 | element.removeEventListener('scroll', update, { passive: true });
24 | };
25 | }, [ref]);
26 |
27 | const scrollToElement = useCallback(
28 | (element) => {
29 | const currentNode = ref.current;
30 |
31 | if (!currentNode || !element) return;
32 |
33 | let newScrollPosition;
34 |
35 | newScrollPosition =
36 | element.offsetLeft +
37 | element.getBoundingClientRect().width / 2 -
38 | currentNode.getBoundingClientRect().width / 2;
39 |
40 | currentNode.scroll({
41 | left: newScrollPosition,
42 | behavior: 'smooth',
43 | });
44 | },
45 | [ref]
46 | );
47 |
48 | function getPrevElement(list) {
49 | const sibling = list[0].previousElementSibling;
50 |
51 | if (sibling instanceof HTMLElement) {
52 | return sibling;
53 | }
54 |
55 | return sibling;
56 | }
57 |
58 | function getNextElement(list) {
59 | const sibling = list[list.length - 1].nextElementSibling;
60 | if (sibling instanceof HTMLElement) {
61 | return sibling;
62 | }
63 | return null;
64 | }
65 | const scrollRight = useCallback(
66 | () => scrollToElement(nextElement),
67 | [scrollToElement, nextElement]
68 | );
69 | const scrollLeft = useCallback(
70 | () => scrollToElement(prevElement),
71 | [scrollToElement, prevElement]
72 | );
73 | return {
74 | hasItemsOnLeft: prevElement !== null,
75 | hasItemsOnRight: nextElement !== null,
76 | scrollLeft,
77 | scrollRight,
78 | };
79 | }
80 |
--------------------------------------------------------------------------------
/components/Card/__snapshots__/card.spec.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Test Card component should have snapshot 1`] = `
4 |
5 |
8 |
11 |
14 |
17 |
24 |
25 |
26 |
27 |
30 |
33 | Humanitarian Clinic
34 |
35 |
38 |
41 |
44 | Provide a free, anonymous phone or video telehealth consultation for someone afraid to see a doctor, such as a migrant or refugee who lacks identification.
45 |
47 | {
48 | 'Margarita Humanitarian Foundation is a non-profit organization that provides humanitarian aid to families in need. We are a 501(c)(3) organization and are registered with the IRS as a charitable organization.'
49 | }
50 |
51 |
52 |
55 |
56 |
57 |
58 |
59 |
60 |
91 |
92 | );
93 | }
94 |
95 | export default HeroSection;
96 |
--------------------------------------------------------------------------------
/components/LandingPageNav.js:
--------------------------------------------------------------------------------
1 | // @ts-check
2 | import { useEffect, useState } from 'react';
3 | // import { BsSearch } from 'react-icons/bs';
4 | // import { Routes } from '../models/routes';
5 | import { FaRegHeart } from 'react-icons/fa';
6 |
7 | /**
8 | * ### Landing Page Nav Bar
9 | * This component is used to create the nav bar for the landing page which has opacity and fade in options to work in conjunction with the `LargeHeroSection` component.
10 | *
11 | * fadeInSpeed - change the speed of fade in "ease-in duration-`fadeInSpeed`" | Example: `"700"` : [tailwind durations](https://tailwindcss.com/docs/transition-duration)
12 | *
13 | * @param {Object} props - { fadeInSpeed }
14 | * @param {String} [props.fadeInSpeed = '700' ] - change the speed of fade in "ease-in duration-`fadeInSpeed`" | Example: `"700"` : [tailwind durations](https://tailwindcss.com/docs/transition-duration)
15 | * @returns {JSX.Element} JSX
16 | */
17 | const LandingPageNav = ({ fadeInSpeed = '1000' }) => {
18 | const [navOpacity, setnavOpacity] = useState(0);
19 | useEffect(() => {
20 | setnavOpacity(100);
21 | }, []);
22 | return (
23 |
44 | {
45 | 'Get on our email list and we’ll keep you up to date with all that is going on with your community that we’re involved in.'
46 | }
47 |
48 |
{'Enter Your Email'}
49 |
69 |
70 |
71 |
72 |
73 |
94 |
95 | );
96 | }
97 |
--------------------------------------------------------------------------------
/components/Card/__mocks__/cardData.js:
--------------------------------------------------------------------------------
1 | export const cardData = {
2 | title: 'Humanitarian Clinic',
3 | backgroundImageAltText: 'Card about Humanitarian Clinic',
4 | backgroundImageSource: '/images/Humanitarian.jpg',
5 | paragraphs: [
6 | 'Provide a free, anonymous phone or video telehealth consultation for someone afraid to see a doctor, such as a migrant or refugee who lacks identification.',
7 | ],
8 | isExternal: false,
9 | address: null,
10 | action: 'Help 1 Patient for ',
11 | cause: '1 patient at a free humanitarian clinic',
12 | actionCost: 30,
13 | };
14 |
15 | export const cardDataWithExternalLink = {
16 | title: 'Humanitarian Clinic',
17 | backgroundImageAltText: 'Card about Humanitarian Clinic',
18 | backgroundImageSource: '/images/Humanitarian.jpg',
19 | paragraphs: [
20 | 'Provide a free, anonymous phone or video telehealth consultation for someone afraid to see a doctor, such as a migrant or refugee who lacks identification.',
21 | ],
22 | isExternal: true,
23 | link: 'www.google.com',
24 | address: null,
25 | action: 'Help 1 Patient for ',
26 | cause: '1 patient at a free humanitarian clinic',
27 | actionCost: 30,
28 | };
29 |
30 | export const cardDataWithSimulateHover = {
31 | title: 'Humanitarian Clinic',
32 | backgroundImageAltText: 'Card about Humanitarian Clinic',
33 | backgroundImageSource: '/images/Humanitarian.jpg',
34 | paragraphs: [
35 | 'Provide a free, anonymous phone or video telehealth consultation for someone afraid to see a doctor, such as a migrant or refugee who lacks identification.',
36 | ],
37 | isExternal: true,
38 | simulateHover: true,
39 | link: 'www.google.com',
40 | address: null,
41 | action: 'Help 1 Patient for ',
42 | cause: '1 patient at a free humanitarian clinic',
43 | actionCost: 30,
44 | };
45 |
46 | export const cardDataWithParagraphsMore170 = {
47 | title: 'Humanitarian Clinic',
48 | backgroundImageAltText: 'Card about Humanitarian Clinic',
49 | backgroundImageSource: '/images/Humanitarian.jpg',
50 | paragraphs: [
51 | `Provide a free, anonymous phone or video telehealth consultation for someone afraid to see a doctor, such as a migrant or refugee who lacks identification.
52 | Provide a free, anonymous phone or video telehealth consultation for someone afraid to see a doctor, such as a migrant or refugee who lacks identification.`,
53 | ],
54 | isExternal: true,
55 | simulateHover: true,
56 | link: 'www.google.com',
57 | address: null,
58 | action: 'Help 1 Patient for ',
59 | cause: '1 patient at a free humanitarian clinic',
60 | actionCost: 30,
61 | };
62 |
63 | export const cardDataWithListItems = {
64 | key: 9,
65 | title: 'Doctors as Volunteers',
66 | backgroundImageAltText:
67 | 'We are looking for physicians, NPs, and PAs to volunteer',
68 | backgroundImageSource: '/images/Volunteer.jpg',
69 | paragraphs: [
70 | 'Doctors, NPs, PAs: Give 1-4 Hours/Week',
71 | 'We are looking for physicians, NPs, and PAs to volunteer for 1-4 hours per week with our Humanitarian Clinic program.',
72 | 'At this stage we particularly need expertise with primary care, although specialties will be very helpful as we grow the program and expand our resources.',
73 | 'Scheduling is flexible and based on your availability.',
74 | ],
75 | link: 'mailto:hi@mhfcares.org?subject=Volunteer%20as%20Doctor',
76 | address: null,
77 | isExternal: true,
78 | action: 'Contact Us',
79 | actionCost: null,
80 | cause: 'null',
81 | listItems: [
82 | 'Current medical board license for your region and country',
83 | 'Fluency in English or Spanish',
84 | ],
85 | listLabel: 'Requirements:',
86 | };
87 |
--------------------------------------------------------------------------------
/pages/thank-you.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import Footer from '../components/Footer';
4 | import Image from 'next/image';
5 |
6 | export default function Home() {
7 | return (
8 |
9 |
10 | {'Thank You!'}
11 |
12 |
13 |
14 |
15 |
16 |
17 |
{'Thank You!'}
18 |
19 | {'With gratitude from Margarita Humanitarian Foundation.'}
20 |
21 |
22 | {
23 | 'Thanks so much for your generosity. We promise to use it to help the causes you indicated your support for, and to be extra thoughtful about putting it to good use.'
24 | }
25 |
26 |
27 |
28 |
29 |
30 |
36 |
37 |
38 |
39 | {'Reach Out to Us'}
40 |
41 |
42 | {'Follow Margarita Humanitarian Foundation for more updates: '}
43 |
64 | {
65 | "Your donation is fully tax-deductible. We'll email you a fully-compliant IRS 501(c)(3) donation receipt for your records shortly."
66 | }
67 |
68 |
69 |
70 |
71 | {'About Our Donation Software'}
72 |
73 |
74 | {
75 | 'This page was put together thanks to the kindness of our volunteers. It went live on August 5, 2021, so pardon the dust if you discover any problems. Thanks for your patience and understanding.'
76 | }
77 |
78 |
79 |
80 |
81 |
82 | {'Improve our Donation Software'}
83 |
84 |
85 | {'This donation system is entirely open source on '}
86 |
90 | {'GitHub'}
91 |
92 | {
93 | ". We're looking for volunteer contributors to help make it better. Report bugs or propose ideas for improvements by submitting GitHub issues, or even submit little pull requests as proposals."
94 | }
95 |
32 | {
33 | 'Buy ingredients for 1 hot meal for 60 hungry people. Sample meals include spaghetti with Texas toast and caesar salad, chicken alfredo, enchilada taquitos. Served as take-home meal boxes at Grace Resources in Lancaster, California.'
34 | }
35 |
36 |
37 |
38 |
39 | {
40 | 'Make a donation today and you can help us bring hot meals to the most needy in our society.'
41 | }
42 |
112 | );
113 | }
114 |
115 | export default HotMealDaySection;
116 |
--------------------------------------------------------------------------------
/public/fonts/Source_Sans_Pro/OFL.txt:
--------------------------------------------------------------------------------
1 | Copyright 2010, 2012, 2014 Adobe Systems Incorporated (http://www.adobe.com/), with Reserved Font Name ‘Source’.
2 |
3 | This Font Software is licensed under the SIL Open Font License, Version 1.1.
4 | This license is copied below, and is also available with a FAQ at:
5 | http://scripts.sil.org/OFL
6 |
7 |
8 | -----------------------------------------------------------
9 | SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
10 | -----------------------------------------------------------
11 |
12 | PREAMBLE
13 | The goals of the Open Font License (OFL) are to stimulate worldwide
14 | development of collaborative font projects, to support the font creation
15 | efforts of academic and linguistic communities, and to provide a free and
16 | open framework in which fonts may be shared and improved in partnership
17 | with others.
18 |
19 | The OFL allows the licensed fonts to be used, studied, modified and
20 | redistributed freely as long as they are not sold by themselves. The
21 | fonts, including any derivative works, can be bundled, embedded,
22 | redistributed and/or sold with any software provided that any reserved
23 | names are not used by derivative works. The fonts and derivatives,
24 | however, cannot be released under any other type of license. The
25 | requirement for fonts to remain under this license does not apply
26 | to any document created using the fonts or their derivatives.
27 |
28 | DEFINITIONS
29 | "Font Software" refers to the set of files released by the Copyright
30 | Holder(s) under this license and clearly marked as such. This may
31 | include source files, build scripts and documentation.
32 |
33 | "Reserved Font Name" refers to any names specified as such after the
34 | copyright statement(s).
35 |
36 | "Original Version" refers to the collection of Font Software components as
37 | distributed by the Copyright Holder(s).
38 |
39 | "Modified Version" refers to any derivative made by adding to, deleting,
40 | or substituting -- in part or in whole -- any of the components of the
41 | Original Version, by changing formats or by porting the Font Software to a
42 | new environment.
43 |
44 | "Author" refers to any designer, engineer, programmer, technical
45 | writer or other person who contributed to the Font Software.
46 |
47 | PERMISSION & CONDITIONS
48 | Permission is hereby granted, free of charge, to any person obtaining
49 | a copy of the Font Software, to use, study, copy, merge, embed, modify,
50 | redistribute, and sell modified and unmodified copies of the Font
51 | Software, subject to the following conditions:
52 |
53 | 1) Neither the Font Software nor any of its individual components,
54 | in Original or Modified Versions, may be sold by itself.
55 |
56 | 2) Original or Modified Versions of the Font Software may be bundled,
57 | redistributed and/or sold with any software, provided that each copy
58 | contains the above copyright notice and this license. These can be
59 | included either as stand-alone text files, human-readable headers or
60 | in the appropriate machine-readable metadata fields within text or
61 | binary files as long as those fields can be easily viewed by the user.
62 |
63 | 3) No Modified Version of the Font Software may use the Reserved Font
64 | Name(s) unless explicit written permission is granted by the corresponding
65 | Copyright Holder. This restriction only applies to the primary font name as
66 | presented to the users.
67 |
68 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
69 | Software shall not be used to promote, endorse or advertise any
70 | Modified Version, except to acknowledge the contribution(s) of the
71 | Copyright Holder(s) and the Author(s) or with their explicit written
72 | permission.
73 |
74 | 5) The Font Software, modified or unmodified, in part or in whole,
75 | must be distributed entirely under this license, and must not be
76 | distributed under any other license. The requirement for fonts to
77 | remain under this license does not apply to any document created
78 | using the Font Software.
79 |
80 | TERMINATION
81 | This license becomes null and void if any of the above conditions are
82 | not met.
83 |
84 | DISCLAIMER
85 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
86 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
87 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
88 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
89 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
90 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
91 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
92 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
93 | OTHER DEALINGS IN THE FONT SOFTWARE.
94 |
--------------------------------------------------------------------------------
/public/images/powered-by-vercel.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/components/LargeInfoSection.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable @next/next/no-img-element */
2 | import React, { useRef } from 'react';
3 | import { useContextTheme } from './ThemeContext';
4 | import { useIntersectionObserver } from '../hooks/useIntersectionObserver';
5 | import useStripeSession from '../hooks/useStripeSession';
6 |
7 | function LargeInfoSection({ mirrored, children }) {
8 | const infoBoxRef = useRef(null);
9 | const hrRef = useRef(null);
10 | const [handleSubmit, isPending] = useStripeSession();
11 | const { cardsBackgroundColor, theme } = useContextTheme();
12 |
13 | useIntersectionObserver(infoBoxRef, {
14 | root: null,
15 | rootMargin: '0px',
16 | threshold: 0.5,
17 | });
18 |
19 | useIntersectionObserver(hrRef, {
20 | root: null,
21 | rootMargin: '0px',
22 | threshold: 0.5,
23 | });
24 |
25 | const actionCost = 10;
26 | const handleOnClick = () =>
27 | handleSubmit({
28 | amount: actionCost,
29 | cause: 'Hot Meal Day.',
30 | });
31 | return (
32 |
59 | {/* not a good practice to use index as key will change later */}
60 | {/* {address && {address}}*/}
61 | {action && (
62 |
69 | {action} {isAvailable(actionCost) && `$${actionCost.toString()}`}
70 |
71 | )}
72 |
128 |
136 |
137 | );
138 | }
139 |
--------------------------------------------------------------------------------
/public/images/Astronaut-01.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/data/homeCardsData.json:
--------------------------------------------------------------------------------
1 | {
2 | "data": [
3 | {
4 | "key": 1,
5 | "title": "Hot Meal Day",
6 | "backgroundImageAltText": "Card about Hot Meal Day",
7 | "backgroundImageSource": "/images/HotMealDay.jpg",
8 | "paragraphs": [
9 | "Buy ingredients for 1 hot meal for 60 hungry people. Sample meals include spaghetti with Texas toast and caesar salad, chicken alfredo, enchilada taquitos. Served as take-home meal boxes at Grace Resources in Lancaster, California."
10 | ],
11 | "isExternal": false,
12 | "address": null,
13 | "action": "Feed 60 people for",
14 | "cause": "Hot Meal for 60 Hungry People.",
15 | "actionCost": 250
16 | },
17 | {
18 | "key": 2,
19 | "title": "Laptop for Families",
20 | "backgroundImageAltText": "Card about Laptops for families",
21 | "backgroundImageSource": "/images/Laptop.jpeg",
22 | "paragraphs": [
23 | "Mail us your used or new laptop. We'll set up the donated laptops in our public computer room for the families to use for free. Some of the donated laptops will go to the families who don't have home computers, or who don't have enough computers for all their children to use."
24 | ],
25 | "isExternal": true,
26 | "link": "https://forms.gle/K5ua2nUyrZ9bv4s3A",
27 | "address": null,
28 | "action": "Donate",
29 | "cause": null,
30 | "actionCost": null
31 | },
32 | {
33 | "key": 3,
34 | "title": "Humanitarian Clinic",
35 | "backgroundImageAltText": "Card about Humanitarian Clinic",
36 | "backgroundImageSource": "/images/Humanitarian.jpg",
37 | "paragraphs": [
38 | "Provide a free, anonymous phone or video telehealth consultation for someone afraid to see a doctor, such as a migrant or refugee who lacks identification."
39 | ],
40 | "isExternal": false,
41 | "address": null,
42 | "action": "Help 1 Patient for ",
43 | "cause": "1 patient at a free humanitarian clinic",
44 | "actionCost": 30
45 | },
46 | {
47 | "key": 4,
48 | "title": "Fall Prevention Class",
49 | "backgroundImageAltText": "Fall Prevention Card Provide an elderly person with a 6 week course in fall prevention",
50 | "backgroundImageSource": "/images/FallPrevention.jpg",
51 | "paragraphs": [
52 | "Provide an elderly person with a 6 week course in fall prevention while covering costs such as insurance, curriculum development and review."
53 | ],
54 | "isExternal": false,
55 | "address": null,
56 | "action": "Provide 1 Seat for ",
57 | "cause": "Provide 1 Fall Prevention Class Seat to an Elder",
58 | "actionCost": 100
59 | },
60 | {
61 | "key": 5,
62 | "title": "Hygiene Kits",
63 | "backgroundImageAltText": "Card about Hygiene Kits",
64 | "backgroundImageSource": "/images/HygieneKit.webp",
65 | "paragraphs": [
66 | "Order a bulk pack of hygiene kits for us to share with people experiencing homelessness.",
67 | "Each hygiene kit allows an unhoused individual to freshen up and feel more confident about their hygiene for work, school, or even just to have a better day."
68 | ],
69 | "address": "1543 E Palmdale Blvd, Ste E, Palmdale, CA 93550",
70 | "label": "Ship the kits to:",
71 | "isExternal": true,
72 | "link": "https://www.amazon.com/96-Kits-Hygiene-Travel-Charity/dp/B0881YKMBL",
73 | "action": "96 Hygiene Kits for $153",
74 | "cause": null,
75 | "actionCost": null
76 | },
77 | {
78 | "key": 6,
79 | "title": "Health Education Workshop",
80 | "backgroundImageAltText": "Card about Health Education Workshop",
81 | "backgroundImageSource": "/images/HealthWorkshop.jpg",
82 | "paragraphs": [
83 | "Help in establishing one free health education workshop for a community that is facing major disparities in health conditions and to help those people who need care and attention.",
84 | "Also, your donation will go toward health-themed mini gift bags to motivate people to attend a workshop, equipment such as trainer simulaids for edema and breast disease, venue costs, and to hire public health educators to prepare presentations."
85 | ],
86 | "address": null,
87 | "isExternal": false,
88 | "action": "Create 1 Workshop for",
89 | "cause": "Creating a Health Workshop",
90 | "actionCost": 2000
91 | },
92 | {
93 | "key": 7,
94 | "title": "Electronics Drop-Off Box",
95 | "backgroundImageAltText": "Help families get access to technology",
96 | "backgroundImageSource": "/images/ElectronicsDrop.jpg",
97 | "paragraphs": [
98 | "Any organization or business around the world can help families get access to technology. Put a donation box in your office for used laptops, tablets, and smartphones. Volunteers will pick up the items periodically, fix them up, and provide them to families in need. You can optionally be involved with refurbishment and placement too if you'd like."
99 | ],
100 | "address": null,
101 | "isExternal": true,
102 | "link": "mailto:hi@mhfcares.org",
103 | "action": "hi@mhfcares.org",
104 | "actionCost": null,
105 | "cause": null
106 | },
107 | {
108 | "key": 8,
109 | "title": "Food Distribution Support",
110 | "backgroundImageAltText": "Food Distribution Support Card Provide free food boxes for hungry families",
111 | "backgroundImageSource": "/images/FoodDistribution.jpg",
112 | "paragraphs": [
113 | "Help us cover our staffing costs for providing free food boxes for hungry families, such as paid time to manage volunteers for food distribution events or coordination with community groups."
114 | ],
115 | "address": null,
116 | "isExternal": false,
117 | "action": "Support Food Distribution for",
118 | "actionCost": 150,
119 | "cause": "Producing Food Distribution"
120 | }
121 | ]
122 | }
123 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Instructions for Contributors
2 |
3 | Want to contribute to this repo? That's great! These instructions will help you contribute.
4 |
5 | ## Be Kind
6 |
7 | - Always be kind and have empathy for others.
8 | - Follow the [GitHub code of conduct](https://github.com/github/docs/blob/main/CODE_OF_CONDUCT.md).
9 | - Be patient, as this is a volunteer-driven project.
10 |
11 | ## Stuck? Need Help?
12 |
13 | - Post a comment on the GitHub issue you're working on, with details about where you got stuck.
14 | - If no issue applies to your situation, you can create a new [GitHub issue](https://github.com/margaritahumanitarian/helpafamily/issues).
15 | - You can also ask for help in the [Margarita Humanitarian Foundation chat room on Element](https://app.element.io/#/room/#mhf:matrix.org)
16 |
17 | ## Contribution Workflow
18 |
19 | 1. Please follow the [Installation](#installation) steps.
20 | 2. Please create a new branch and name it with the changes you are making. E.g. `fix-card-sort-order`
21 | 3. Make your code changes. You can preview your changes by [Running the project locally](#running-the-project-locally)
22 | 4. Run `yarn format` to ensure your code is following our linter and formatter rules. You may have to fix some linting issues manually.
23 | 5. Send us a pull request.
24 |
25 | Please ensure your repository is up to date before making a pull request, this project is very active so something may have been changed already! [Learn to sync your branch](https://docs.github.com/en/desktop/contributing-and-collaborating-using-github-desktop/keeping-your-local-repository-in-sync-with-github/syncing-your-branch).
26 |
27 | We will then review your pull request, during this process you may receive feedback and questions about your request.
28 |
29 | We may request or make changes where necessary. Feedback will always be kind, considerate, and constructive! We are very grateful for all contributions!
30 |
31 | ## Important Note On Style
32 |
33 | We are using **Tailwind** and **DaisyUI**. But if you feel the need to use **css** there are [some guidelines](https://margaritahumanitarian.gitbook.io/help-a-family-manual/contributing-to-the-repository/mhf-css-guide).
34 |
35 | - Avoid the `inline style` attribute.
36 | - Avoid `css modules` unless you are working on a whole page.
37 | - Use the `styled jsx` library and follow [these conventions](https://nextjs.org/blog/styling-next-with-styled-jsx).
38 |
39 | **Note:** Styled JSX is scoped, so you can be more free with the class names, just make sure it stayes scoped as for example in the case of sub components or a wrapper component.
40 |
41 | ```js
42 |
43 |
44 | // MyComponent is considered scoped
45 |
46 |
54 | ```
55 |
56 | ### JSX/React style guide
57 |
58 | We are building a convention to follow [here](https://margaritahumanitarian.gitbook.io/help-a-family-manual/contributing-to-the-repository/mhf-javascript-react-style-guide). As an example, use arrow functions while creating components.
59 |
60 | ```js
61 | const MyComponent = () => {...}
62 | ```
63 |
64 | ### Soon-ish
65 |
66 | > We are working on a visual style guide. Until then we ask that you try to match the current look and colors when styling. You may receive feedback about changes that aren't yet outlined. Bear with us!
67 |
68 | ## PR Peer Review
69 |
70 | ### We are looking forward to everyone's contributions at all levels
71 |
72 | If you feel you want to help by reviewing pull requests, no matter your level:
73 |
74 | 1. We're excited to see that!
75 | 2. We ask that you use our [peer review checklist](https://gist.github.com/audreyfeldroy/cc71cebbc3efae4fbf028d3e5ed37f84#peer-and-higher-additional-checklist-items) in your reviews and comments.
76 |
77 | Copy/paste this into your comment:
78 |
79 | ```md
80 | # Peer Checklist Items
81 |
82 | - [ ] Review is clear as to what changes need to be made if any
83 | - [ ] Requests for changes are made as code suggestions whenever possible
84 | - [ ] PR review is submitted with "Request Changes" or "Approved" marked
85 | - [ ] If Review contains multiple suggestions they are in a bulleted list
86 | - [ ] Link to relevant issues if referencing them
87 | - [ ] PR follows [MHF Javascript/React Style Guide](https://margaritahumanitarian.gitbook.io/help-a-family-manual/contributing-to-the-repository/mhf-javascript-react-style-guide)
88 | - [ ] PR follows [MHF CSS Guide](https://margaritahumanitarian.gitbook.io/help-a-family-manual/contributing-to-the-repository/mhf-css-guide)
89 | - [ ] Submitter's comments follow Code of Conduct
90 | ```
91 |
92 | Again, we encourage everyone at **all levels** to participate in this process as it will help you grow as a developer.
93 |
94 | ## Installation
95 |
96 | Fork this repo, then:
97 |
98 | ```md
99 | git clone
100 | cd helpafamily/
101 | cp .env.example .env
102 | ```
103 |
104 | Then,
105 |
106 | ### If you're familiar with Docker
107 |
108 | `docker-compose build` (it builds the docker container - needed only the first time or whenever the container gets removed)
109 |
110 | ### If you don't wish to use Docker
111 |
112 | `yarn install`
113 |
114 | ## Running the project locally
115 |
116 | ### without Docker
117 |
118 | Once you have finished the [Installation](#installation) process you can run the project with
119 |
120 | ```md
121 | yarn dev
122 | ```
123 |
124 | ### with Docker
125 |
126 | `docker-compose up` (it runs the app inside the container)
127 |
128 | and opening [http://127.0.0.1:3000](http://127.0.0.1:3000)
129 |
130 | ## FAQ
131 |
132 | ### I contributed. Can I use this project in my coding portfolio?
133 |
134 | Yes, absolutely! Contributors are certainly allowed to:
135 |
136 | - List their contributions on their resumes
137 | - Pin or feature this repo on their GitHub profiles
138 | - Put the project on their portfolio websites as something they contributed to
139 | - Share this repo as an example of something they contributed to
140 | - Say on LinkedIn that they did volunteer work for Margarita Humanitarian Foundation
141 | - Refer to this project in any other way that is honest and ethical
142 |
143 | We do have strict ethical standards. Contributors aren't allowed to:
144 |
145 | - Remove commit history and say they created the project entirely themselves
146 | - Do anything unethical or dishonest with the project
147 |
--------------------------------------------------------------------------------
/components/SVGBackgrounds.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { useContextTheme } from './ThemeContext';
3 |
4 | export function SVGCardBackground(props) {
5 | const { theme } = useContextTheme();
6 |
7 | return (
8 |
38 | );
39 | }
40 | export function SVGHotMealDaySectionBackground(props) {
41 | const { theme } = useContextTheme();
42 |
43 | return (
44 |
64 | );
65 | }
66 | export function SVGQuotes({ className }) {
67 | const { theme } = useContextTheme();
68 |
69 | return (
70 |
87 | );
88 | }
89 | export function SVGPlane(props) {
90 | const { theme } = useContextTheme();
91 |
92 | return (
93 |
105 | );
106 | }
107 |
--------------------------------------------------------------------------------
/components/Footer.js:
--------------------------------------------------------------------------------
1 | import Image from 'next/image';
2 | import Link from 'next/link';
3 | import React from 'react';
4 | import { useContextTheme } from 'components/ThemeContext';
5 |
6 | const LineItem = ({ title, link }) => (
7 |
108 | {`Mail us your used or new laptop. We'll set up the donated laptops in our public computer room for the families to use for free. Some of the donated laptops will go to the families who don't have home computers, or who don't have enough computers for all their children to use.`}
109 |
33 | For the Vercel preview key, the *Website restrictions* setting will be something like:
34 |
35 | A production key should have these restrictions:
36 |
37 | 
38 |
39 | ## Setting Your Key for Local Development
40 |
41 | When you run `yarn dev`, if your Google Maps JS API Key isn't set yet you'll get an error in the browser JS console like:
42 |
43 | > js?v=3.exp&libraries=geometry,drawing,places&key=undefined:100 Google Maps JavaScript API error: InvalidKeyMapError
44 | > https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key-map-error
45 |
46 | To fix that:
47 |
48 | 1. Set this in `.env`, replacing it with your actual key:
49 |
50 | NEXT_PUBLIC_GMAPS_JS_API_KEY = "
24 |
25 | 
42 |