feat: add foxy donation form

Adds the custom element foxy-donation to the application. Adjust the navigation and documentation
accordingly.

closes #5

README.md

@@ -91,6 +91,7 @@ If you're using the HMAC signing functionality, create a file called `secrets.sh
 ```bash
 export FOXYSTORESECRET=abc123
 ```
+
 Then you'd run this `npm` command:
 
 ```bash
@@ -115,6 +116,7 @@ Load up that URL in your browser and see your site! And, extra cool: If you chan
 1. **Set your own logo:** Replace the `src/static/logo.png` file with your own. Also, replace the _favicon_ files in `src/static/img/`. Alternately, you can change the logo filename or location by editing the `store.js` file. (Try [favicon.io](https://favicon.io/) to make it easy. The placeholder logo is from [DesignEvo free logo creator](https://www.designevo.com/logo-maker/).)
 1. **Set your own theme:** If you are comfortable with CSS and TailwindCSS, go for it. If you aren't, check out the `tailwind.config.js` file in the root directory of the project. By setting these variables, you can start making the website look your own. You can take a look at `/src/assets/stylesheets/app.css` to get a sense for how Tailwind works.
 1. **Set your own videos:** There's a `src/_highlights` folder. In this Each file contains something you want to highlight. Add or remove de `.md` files do add or remove highlights. The first one will be the first video available. They are also used to build the Highlight section of the website.
+1. **Set your donation form configuration:** Edit `src/_data/site.yaml`file. You'll find you can customize the behaviour of the donation form, changing default values, options available and even removing fields altogether.
 1. **ADVANCED: Fetch your data on compile time:** There's a `src/_data/lorem.js` file. It demonstrates how to fetch data from your own API during compile time. This way, you can have your content updated on each new deploy. **Be sure to remove `src/_data/lorem.js` file** if you're not going to use it. It makes real requests during build time. If you are not going to use the data fetched it is simply making unnecessary requests to the server and making your build time slower.
 
 ## Want to dive deeper?
@@ -280,6 +282,7 @@ This minisite includes functionality to make it straightforward to setup the lin
 This minisite comes with an easy to use setup of HMAC validation.
 
 In order to use this feature you need to:
+
 - provide your Store Secret (or the specific "HMAC signature generation" key within your store secret) as an environment variable
 - provide a `code` parameter for each product
 - configure your store to use HMAC validation (a checkbox in the Advanced Settings of your store)
@@ -292,7 +295,7 @@ Navigate to you store admin page in Foxy.io
 
 https://admin.foxycart.com/admin.php
 
-Then, visit the Advanced link:  https://admin.foxycart.com/admin.php?ThisAction=EditAdvancedFeatures
+Then, visit the Advanced link: https://admin.foxycart.com/admin.php?ThisAction=EditAdvancedFeatures
 
 ![](docs/img/step1.png)
 
@@ -308,7 +311,6 @@ To do that, check the "would you like to enable cart validation" box in the same
 
 ![](docs/img/step3.png)
 
-
 #### Second, provide the secret to your deploy
 
 When you click the "Deploy to Netlify" button, Netlify will ask you some questions. One of them is your store secret. If you provide it there, this step will not be necessary.
@@ -347,16 +349,13 @@ price_monthly: 39
 image: /static/img/product9.jpg
 image_alt_text: Non risu potius quam oratione eiciendum? N
 code: WEA4983901
-
 ---
+
 Non risu potius quam oratione eiciendum? Nihil enim hoc differt.
 ```
 
 Notice the code `WEA4983901`. Only products with codes such as this will be signed. Other products **will error when added to the cart**. So just make sure all your products have a code (and that the codes are unique per product).
 
-
-
-
 # Merging New Features to Your Site
 
 When using the Deploy to Netlify button, it creates a clone of this repo, and _not a fork_. As such, it's just a little more work to merge new features from Foxy/eleventy-fundraising-minisite into your own version. First, you'll need to clone the repo locally on your computer. (Can't do this from the Github interface.) Then…
@@ -366,7 +365,6 @@ When using the Deploy to Netlify button, it creates a clone of this repo, and _n
 1. Run `git merge upstream/master`
 1. Review any merge conflicts, commit, and push to your own repo so Netlify deploys.
 
-
 # Where to go from here?
 
 Go ahead and click the deploy button. It will fork this repository for you and deploy a version to production. Go ahead and customize the files at will. You'll find some handy tips along the way.

src/_assets/stylesheets/app.css

@@ -67,4 +67,33 @@ ol li {
 	@apply pb-1;
 }
 
+#content > section {
+	@apply pt-8 p-8 text-left relative;
+}
+
+/**
+ * Set variables for the lumo theme
+ */
+foxy-donation {
+	--lumo-primary-text-color: #05668d;
+	--lumo-primary-color-50pct: rgba(2, 128, 144, 0.5);
+	--lumo-primary-color-10pct: rgba(2, 128, 144, 0.1);
+	--lumo-primary-color: #028090;
+	--lumo-header-text-color: #05668d;
+	--lumo-body-text-color: #028090;
+	--lumo-primary-contrast-color: #fefff5;
+	--lumo-tint-5pct: rgba(240, 243, 189, 0.05);
+	--lumo-tint-10pct: rgba(240, 243, 189, 0.1);
+	--lumo-tint-20pct: rgba(240, 243, 189, 0.2);
+	--lumo-tint-30pct: rgba(240, 243, 189, 0.3);
+	--lumo-tint-40pct: rgba(240, 243, 189, 0.4);
+	--lumo-tint-50pct: rgba(240, 243, 189, 0.5);
+	--lumo-tint-60pct: rgba(240, 243, 189, 0.6);
+	--lumo-tint-70pct: rgba(240, 243, 189, 0.7);
+	--lumo-tint-80pct: rgba(240, 243, 189, 0.8);
+	--lumo-tint-90pct: rgba(240, 243, 189, 0.9);
+	--lumo-tint: #f0f3bd;
+	--lumo-secondary-text-color: #02c39a;
+}
+
 @tailwind utilities;

src/_data/site.yaml

@@ -20,17 +20,40 @@ navigation:
     url: "#about"
     description: Learn about what we're doing
   - name: Donate!
-    url: "#products"
+    url: "#donate"
     description: Help support us
+  - name: Needed items
+    url: "#items"
+    description: Help with a specific item
 
 # The following are the headings for the navigation
 texts:
-  highlightsTitle: "Here are some of our highlights"
-  highlightsText: "Click the links below to load the videos while you browse."
-  aboutTitle: "About Us" # This the heading for the 2nd section, if desired.
-  productsTitle: "Donation Items" # This is the heading for the products / donation items.
+  highlights_title: "Here are some of our highlights"
+  highlights_text: "Click the links below to load the videos while you browse."
+  about_title: "About Us" # This the heading for the 2nd section, if desired.
+  donate_title: "Donate"
+  needed_items_title: "Needed Items" # This is the heading for the products / donation items.
 
 currency_symbol: $
+currency: usd
+
+donation_form:
+  name: "One-Time Donation" # this field is required
+  amount: 100 # this field is required
+  # fields bellow can be ommited to stop the form from using them
+  # you can simply delete them, but it would be best to simply comment it out so you can bring it back if you wish.
+  amounts: "[25, 50, 100, 500,1000]" # must be in JSON format
+  anonymity: false
+  comment: false
+  custom: '["amount", "designation"]' # must be in JSON format
+  designation: '["Area of Greatest Need"]' # must be in JSON format. Sets the default designation value.
+  designations: '["Area of Greatest Need", "Medical Aid", "Economic Relief"]' # Sets the degination options.
+  frequencies: '["0d", "1m", "2m", "3m"]' # must be in JSON format. Sets the frequencies options.
+  frequency: "1m" # set the default frequency option
+  # use 1d for 1 per day (daily contributions)
+  # use 1w for 1 per week (weekly contributions)
+  # use 1m for 1 per month (monthly contributions)
+  # use 1y for 1 per year (yearly contributions)
 
 # Careful! Use quotes around your links.
 social_networks:

src/_layouts/base.njk

@@ -12,6 +12,7 @@
     {% else %}
     <link rel="stylesheet" href="/static/app.compiled.css">
     {% endif %}
+    <script type="module" src="https://static.www.foxycart.com/beta/foxy-elements/0.3.0/foxy-donation.js"></script>
   </head>
   <body class="font-sans">
     {# {% include "nav.njk" %} #}

src/index.njk

@@ -3,7 +3,7 @@ layout: onepage.njk
 title: JAMStack e-commerce with Foxy.io
 ---
 
-<section id="welcome" class="pt-8 p-8 md:p-12 text-left">
+<section id="welcome" class="md:p-12">
   <h1>
     {{ site.title }}
   </h1>
@@ -14,18 +14,12 @@ title: JAMStack e-commerce with Foxy.io
   {% set welcome %}{% include './_data/welcome.md' %}{% endset %}
   {% markdown welcome %}
 
-  {# {% if site.texts.presentation %}
-    <div>
-      {{ site.texts.presentation }}
-    </div>
-  {% endif %} #}
-
   {% if collections.highlight.length > 1 %}
   <h4>
-    {{ site.texts.highlightsTitle }}
+    {{ site.texts.highlights_title }}
   </h4>
 
-  {% markdown site.texts.highlightsText %}
+  {% markdown site.texts.highlights_text %}
 
   <ul>
 
@@ -49,9 +43,9 @@ title: JAMStack e-commerce with Foxy.io
 {% if site.texts.aboutTitle %}
 <hr />
 
-<section id="about" class="pt-8 p-8 md:p-12 text-left relative">
+<section id="about" class="md:p-12">
   {% include 'backToTop.njk' %}
-  <h2>{{ site.texts.aboutTitle }}</h2>
+  <h2>{{ site.texts.about_title }}</h2>
 
   {% set about %}{% include './_data/about.md' %}{% endset %}
   {% if about %}{% markdown about %}{% endif %}
@@ -65,13 +59,35 @@ title: JAMStack e-commerce with Foxy.io
 {% endif %}
 
 <hr />
+<section id="donate" class="md:p-12">
+  {% include 'backToTop.njk' %}
+  <h2>{{ site.texts.donate_title }}</h2>
+  {% set strippedStoreDomain = store.storedomain.replace('.foxycart.com', '') %}
+
+  <foxy-donation store="{{strippedStoreDomain}}"
+                 name="{{site.donation_form.name}}"
+                 amount="{{site.donation_form.amount}}"
+                 currency="{{site.currency}}"
+                 {% if site.donation_form.amounts %} amounts="{{site.donation_form.amounts}}" {% endif %}
+                 {% if site.donation_form.custom %} custom='{{site.donation_form.custom}}' {% endif %}
+                 {% if site.donation_form.designation %} designation='{{site.donation_form.designation}}' {% endif %}
+                 {% if site.donation_form.designations %} designations='{{site.donation_form.designations}}' {% endif %}
+                 {% if site.donation_form.frequencies %} frequencies='{{site.donation_form.frequencies}}' {% endif %}
+                 {% if site.donation_form.frequency %} frequency="{{site.donation_form.frequency}}" {% endif %}
+                 {% if site.donation_form.comment %} comment {% endif %}
+                 {% if site.donation_form.anonymity %} anonymity {% endif %}
+                 >
+  </foxy-donation>
+</section>
 
-<section id="products" class="pt-8 p-8 md:p-12 pb-0 md:pb-0 text-left relative">
+<hr />
+
+<section id="items" class="pb-0 md:p-12 md:pb-0">
   {% include 'backToTop.njk' %}
-  <h2>{{ site.texts.productsTitle }}</h2>
+  <h2>{{ site.texts.needed_items_title }}</h2>
 </section>
 
-<section class="container p-2 pb-4 m-auto flex w-full flex-wrap items-stretch justify-start relative">
+<div class="container p-2 pb-4 m-auto flex w-full flex-wrap items-stretch justify-start relative">
   {% for product in collections.product %}
 
     <div class="flex flex-col items-center w-full lg:w-1/2 p-2">
@@ -154,4 +170,4 @@ title: JAMStack e-commerce with Foxy.io
     </div>
   {% endfor %}
 
-</section>
+</div>