donate-form.html 6.52 KB
Newer Older
1
<div>
peterh-gr's avatar
peterh-gr committed
2
3
  {{ this.intro }}
</div>
4
5
<div class="donate-form">
  <div id="campaign-totals-area"></div>
6
  <div id="giving-form"></div>
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
</div>
<script type="text/javascript" src="https://js.stripe.com/v3/"></script>
<script type="text/javascript" src="https://www.paypal.com/sdk/js?client-id={{ bag('donate', envvars('ENV'), 'paypalClientId') }}&vault=true"></script>
<script type="text/javascript">
  window.reactComponents = [
    {
      id: 'giving-form',
      name: 'GivingForm',
      props: {
        'stripePublishableKey': `{{ bag('donate', envvars('ENV'), 'stripePublishableKey') }}`,
        'frequencyOptions': `{{ this.frequency }}`,
        'pricesOnButtons': {
          'single': [
            parseInt(`{{ this.single_one }}`),
            parseInt(`{{ this.single_two }}`),
            parseInt(`{{ this.single_three }}`),
            parseInt(`{{ this.single_four }}`),
            parseInt(`{{ this.single_five }}`)
          ],
          'monthly': [
            parseInt(`{{ this.monthly_one }}`),
            parseInt(`{{ this.monthly_two }}`),
            parseInt(`{{ this.monthly_three }}`),
            parseInt(`{{ this.monthly_four }}`),
            parseInt(`{{ this.monthly_five }}`)
          ]
        },
        'perks': [
          {
            'name': 'stickers',
            'friendly_name': {
              'single': `{{ this.sticker_perk_single_label }}`,
              'monthly': `{{ this.sticker_perk_monthly_label }}`
            },
            'image': {
              'single': `{{ this.sticker_perk_single_image }}`,
              'monthly': `{{ this.sticker_perk_monthly_image }}`
            },
            'description': {
              'single': `{{ this.sticker_perk_single_description }}`,
              'monthly': `{{ this.sticker_perk_monthly_description }}`,
            },
            'price': {
              'single': parseInt(`{{ this.single_one }}`),
              'monthly': parseInt(`{{ this.monthly_two }}`),
            },
            'options': null,
            'requiredFields': [],
55
          },
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
          {
            'name': 't-shirt',
            'friendly_name': {
              'single': `{{ this.tshirt_perk_single_label }}`,
              'monthly': `{{ this.tshirt_perk_monthly_label }}`
            },
            'image': {
              'single': `{{ this.tshirt_perk_single_image }}`,
              'monthly': `{{ this.tshirt_perk_monthly_image }}`
            },
            'description': {
              'single': `{{ this.tshirt_perk_single_description }}`,
              'monthly': `{{ this.tshirt_perk_monthly_description }}`,
            },
            'price': {
              'single': parseInt(`{{ this.single_two }}`),
              'monthly': parseInt(`{{ this.monthly_three }}`),
            },
            'options': null,
            'requiredFields': ['shirt1Fit', 'shirt1Size'],
          },
          {
            'name': 't-shirt-pack',
            'friendly_name': {
              'single': `{{ this.tshirt_pack_perk_single_label }}`,
              'monthly': `{{ this.tshirt_pack_perk_monthly_label }}`
            },
            'image': {
              'single': `{{ this.tshirt_pack_perk_single_image }}`,
              'monthly': `{{ this.tshirt_pack_perk_monthly_image }}`
            },
            'description': {
              'single': `{{ this.tshirt_pack_perk_single_description }}`,
              'monthly': `{{ this.tshirt_pack_perk_monthly_description }}`,
            },
            'price': {
              'single': parseInt(`{{ this.single_three }}`),
              'monthly': parseInt(`{{ this.monthly_four }}`),
            },
            'options': [
              {
                'name': 'strength-in-numbers',
                'friendlyName': 'Strength in Numbers',
                'image': {
                  'single': `{{ this.tshirt_pack_perk_single_image }}`,
                  'monthly': `{{ this.tshirt_pack_perk_monthly_image }}`
                }
103
              },
104
105
106
107
108
109
110
111
            ],
            'requiredFields': ['shirt1Fit', 'shirt1Size', 'shirt2Fit', 'shirt2Size'],
          },
          {
            'name': 'sweatshirt',
            'friendly_name': {
              'single': `{{ this.sweatshirt_perk_single_label }}`,
              'monthly': `{{ this.sweatshirt_perk_monthly_label }}`
112
            },
113
114
115
116
117
118
119
120
121
122
123
124
125
126
            'image': {
              'single': `{{ this.sweatshirt_perk_single_image }}`,
              'monthly': `{{ this.sweatshirt_perk_monthly_image }}`
            },
            'description': {
              'single': `{{ this.sweatshirt_perk_single_description }}`,
              'monthly': `{{ this.sweatshirt_perk_monthly_description }}`,
            },
            'price': {
              'single': parseInt(`{{ this.single_five }}`),
              'monthly': parseInt(`{{ this.monthly_five }}`),
            },
            'options': null,
            'requiredFields': ['sweatshirtSize'],
127
          },
128
        ],
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
        'shirtFits': {
          'strength-in-numbers': {
            'friendly-name': `{{ this.tshirt_perk_options_label }}`,
            'fits': {
              'slim': {
                'friendly-name': 'Slim',
                'sizes': ['s', 'm', 'l', 'xl', 'xxl']
              },
              'classic': {
                'friendly-name': 'Classic',
                'sizes': ['s', 'm', 'l', 'xl', 'xxl']
              },
            }
          },
          'take-back-internet': {
            'friendly-name': `{{ this.tshirt_pack_second_shirt_options_label }}`,
            'fits': {
              'slim': {
                'friendly-name': 'Slim',
                'sizes': ['s', 'm', 'l', 'xl', 'xxl']
              },
              'classic': {
                'friendly-name': 'Classic',
                'sizes': ['s', 'm', 'l', 'xl', 'xxl']
              },
            }
          },

        },
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
        'defaultFrequencyForBoth': `{{ this.default_frequency_for_both }}`,
        'initialSelectedPrices': {
          'single': parseInt(`{{ this.single_three }}`),
          'monthly': parseInt(`{{ this.monthly_three }}`),
        },
        'donateProccessorBaseUrl': `{{ bag('donate', envvars('ENV'), 'donateProccessorBaseUrl') }}`,
        'successRedirectUrl': `{{ this.success_redirect_url }}`,
      },
    }
  ];
  if (`{{ this.counter }}` == 'True'){
    window.reactComponents.push(
      {
        id: 'campaign-totals-area',
        name: 'CampaignTotals',
        props: {
174
175
176
          'donateProccessorBaseUrl': `{{ bag('donate', envvars('ENV'), 'donateProccessorBaseUrl') }}`,
        },
      }
177
178
179
180
    );
  }
</script>
<script type="text/javascript" src="/static/gen/donate.js"></script>