@gp-australia-pacific/gpap-frontend-functions

1.1.8
Need help reading this?

Overview

Helper functions & CSS

These get published to NPM and from there to places like UNPKG, e.g. at https://unpkg.com/browse/@gp-australia-pacific/gpap-frontend-functions/

Once on the CDN, can be added to webpages directly.

Add the latest version of the helper scripts & CSS (e.g. in the HTML head):

<script src="https://unpkg.com/@gp-australia-pacific/gpap-frontend-functions@latest"></script>
<link rel="stylesheet" href="https://unpkg.com/@gp-australia-pacific/gpap-frontend-functions@latest/dist/gp-donate.css">

Examples

Disclaimer toggler

In the JavaScript:

  var recurringId = 'donate-disclaimer-rg';
  var oneOffId = 'donate-disclaimer-oo';
  var newFreq = donations.getToggler(oneOffId, recurringId);

In the HTML below the donate form:

  <div class="donate-disclaimer-container gp-text-slate">
    <p id="donate-disclaimer-oo" class="gp-hidden">
      Your generous one-time gift helps fund our campaigns for a better and greener future.
    </p>
    <p id="donate-disclaimer-rg" class="gp-hidden">
      Your account will be debited today, then every subsequent 4 weeks. <a href="https://www.greenpeace.org.au/contact/">Get in touch with us to</a> arrange an alternative date.
    </p>
  </div>

Contributing

  1. Make a change

  2. Submit a Pull Request

  3. Once merged, run npm run pub (note that trying to use Yarn will result in an error publishing to the Yarn registry; use npm and it will publish correctly to the NPM registry).

Documentation

View API docs online or locally via yarn docs:serve.

Generate it:

yarn global add documentation
yarn docs:build
open docs/index.html

Publish it:

yarn docs:publish

donationInfo

SIDE EFFECT: We add to a global: document.donationInfo is set to be a DonationInfoObject.

This is meant as a convenience to users, so the getInfo function need not be invoked directly. This is safe, since by the time we execute, the URL params are already set.

donationInfo
Example
```
var firstName = document.donationInfo.firstName;
```

DonationInfoObject

Information about a donation.

DonationInfoObject

Type: Object

Properties
amount (string)
firstName (string)
recurring (boolean)
meta (Object)
transaction (Object) : info about the transaction

getInfo

Get donation info from donate redirect URL parameters. This is designed for compatibility with GPAP donation pages.

Rather than calling this function, you can just use the global `document.donationInfo`.

getInfo(): DonationInfoObject
Returns
DonationInfoObject:

getToggler

Gets a frequency toggler function.

getToggler(oneOffId: string, recurringId: string): Function
Parameters
oneOffId (string) the ID of a <div> to be shown when the frequency is one-off.
recurringId (string) the ID of a <div> to be shown when the frequency is recurring.
Returns
Function: whose name can be passed as the frequency-hook to the donation element.

getType

Get the gift type based on info from the URL parameters.

getType(): string
Returns
string: 'donation' | 'regular donation'