|
1 | | -import Script from "next/script"; |
2 | | -import React from "react"; |
| 1 | +import { FC } from 'react' |
| 2 | +import Script from 'next/script' |
3 | 3 |
|
4 | | -type NewsletterProps = {}; |
| 4 | +interface NewsletterProps {} |
5 | 5 |
|
6 | | -const Newsletter: React.FC<NewsletterProps> = () => { |
| 6 | +const Newsletter: FC<NewsletterProps> = () => { |
7 | 7 | return ( |
8 | 8 | <> |
9 | 9 | <Script |
10 | 10 | id="mauticform-script-websitenewslettersubscription" |
| 11 | + strategy="afterInteractive" |
11 | 12 | dangerouslySetInnerHTML={{ |
12 | 13 | __html: ` |
13 | | - /** This section is only needed once per page if manually copying **/ |
14 | | - if (typeof MauticSDKLoaded == 'undefined') { |
15 | | - var MauticSDKLoaded = true; |
16 | | - var head = document.getElementsByTagName('head')[0]; |
17 | | - var script = document.createElement('script'); |
18 | | - script.type = 'text/javascript'; |
19 | | - script.src = 'https://mautic.int.ethswarm.org/index.php/media/js/mautic-form.js'; |
20 | | - script.onload = function() { |
21 | | - MauticSDK.onLoad(); |
22 | | - }; |
23 | | - head.appendChild(script); |
24 | | - var MauticDomain = 'https://mautic.int.ethswarm.org/index.php'; |
25 | | - var MauticLang = { |
26 | | - 'submittingMessage': "Please wait..." |
| 14 | + if (typeof window !== 'undefined') { |
| 15 | + if (typeof MauticSDKLoaded == 'undefined') { |
| 16 | + var MauticSDKLoaded = true; |
| 17 | + var head = document.getElementsByTagName('head')[0]; |
| 18 | + var script = document.createElement('script'); |
| 19 | + script.type = 'text/javascript'; |
| 20 | + script.src = 'https://mautic.int.ethswarm.org/index.php/media/js/mautic-form.js'; |
| 21 | + script.onload = function() { |
| 22 | + MauticSDK.onLoad(); |
| 23 | + }; |
| 24 | + head.appendChild(script); |
| 25 | + var MauticDomain = 'https://mautic.int.ethswarm.org/index.php'; |
| 26 | + var MauticLang = { |
| 27 | + 'submittingMessage': "Please wait..." |
| 28 | + } |
| 29 | + } else if (typeof MauticSDK != 'undefined') { |
| 30 | + MauticSDK.onLoad(); |
| 31 | + } |
27 | 32 | } |
28 | | - }else if (typeof MauticSDK != 'undefined') { |
29 | | - MauticSDK.onLoad(); |
30 | | - } |
31 | | - `, |
| 33 | + `, |
32 | 34 | }} |
33 | 35 | /> |
34 | | - <div |
35 | | - id="mauticform_wrapper_websitenewslettersubscription" |
36 | | - className="mt-4 mauticform_wrapper" |
37 | | - > |
| 36 | + <div id="mauticform_wrapper_websitenewslettersubscription" className="mauticform_wrapper"> |
38 | 37 | <form |
39 | 38 | autoComplete="false" |
40 | 39 | role="form" |
41 | 40 | method="post" |
42 | | - action="https://mautic.int.ethswarm.org/form/submit?formId=4" |
| 41 | + action="https://mautic.int.ethswarm.org/index.php/form/submit?formId=5" |
43 | 42 | id="mauticform_websitenewslettersubscription" |
44 | 43 | data-mautic-form="websitenewslettersubscription" |
45 | 44 | encType="multipart/form-data" |
46 | 45 | > |
47 | | - <div |
48 | | - className="mb-4 text-xs mauticform-error" |
49 | | - id="mauticform_websitenewslettersubscription_error" |
50 | | - ></div> |
51 | | - <div |
52 | | - className="mb-4 text-xs mauticform-message" |
53 | | - id="mauticform_websitenewslettersubscription_message" |
54 | | - ></div> |
55 | 46 | <div className="mauticform-innerform"> |
56 | | - <div |
57 | | - className="!flex items-start justify-center w-full gap-4 mauticform-page-wrapper mauticform-page-1 " |
58 | | - data-mautic-form-page="1" |
59 | | - > |
| 47 | + <div className="mauticform-page-wrapper mautic-page-1" data-mautic-form-page="1"> |
60 | 48 | <div |
61 | 49 | id="mauticform_websitenewslettersubscription_email_address" |
62 | | - className="flex-grow mauticform-row mauticform-email mauticform-field-1" |
| 50 | + className="mauticform-row mauticform-email mauticform-field-1" |
63 | 51 | > |
64 | | - <label className="sr-only" htmlFor="email"> |
| 52 | + <label className="sr-only" htmlFor="mauticform_input_websitenewslettersubscription_email_address"> |
65 | 53 | Enter your email address |
66 | 54 | </label> |
67 | | - <input |
68 | | - id="mauticform_input_websitenewslettersubscription_email_address" |
69 | | - name="mauticform[email_address]" |
70 | | - className="w-full text-[#F6F7F9] text-sm rounded-full duration-100 bg-white bg-opacity-10 border-none focus:ring-1 focus:ring-gray-300 placeholder-[#F6F7F9] px-8 py-3" |
71 | | - type="email" |
72 | | - required={true} |
73 | | - placeholder={"Enter your email address"} |
74 | | - /> |
75 | | - |
76 | | - <div className="mt-4 text-[10px] text-[#F6F7F9] text-opacity-50"> |
77 | | - By clicking on Subscribe you consent to usage of your given |
78 | | - e-mail address for receiving communication and news about the |
79 | | - Swarm project. Data will be controlled and processed by Swarm |
80 | | - Foundation. |
| 55 | + {/* This is the input field that needed fixing. */} |
| 56 | + <div className="flex items-center bg-[#2D3843] rounded-full p-1"> |
| 57 | + <input |
| 58 | + id="mauticform_input_websitenewslettersubscription_email_address" |
| 59 | + name="mauticform[email_address]" |
| 60 | + placeholder="Enter your email address" |
| 61 | + className="flex-grow bg-transparent text-white placeholder-gray-400 px-4 py-2 focus:outline-none" |
| 62 | + type="email" |
| 63 | + /> |
| 64 | + <button |
| 65 | + type="submit" |
| 66 | + name="mauticform[submit]" |
| 67 | + id="mauticform_input_websitenewslettersubscription_submit" |
| 68 | + className="bg-[#F6F7F9] text-black rounded-full p-2 hover:bg-gray-200" |
| 69 | + > |
| 70 | + <svg |
| 71 | + className="w-5 h-5" |
| 72 | + fill="none" |
| 73 | + stroke="currentColor" |
| 74 | + viewBox="0 0 24 24" |
| 75 | + xmlns="http://www.w3.org/2000/svg" |
| 76 | + > |
| 77 | + <path |
| 78 | + strokeLinecap="round" |
| 79 | + strokeLinejoin="round" |
| 80 | + strokeWidth="2" |
| 81 | + d="M14 5l7 7m0 0l-7 7m7-7H3" |
| 82 | + ></path> |
| 83 | + </svg> |
| 84 | + </button> |
81 | 85 | </div> |
82 | 86 | </div> |
83 | | - |
84 | | - <button |
85 | | - type="submit" |
86 | | - name="mauticform[submit]" |
87 | | - id="mauticform_input_websitenewslettersubscription_submit" |
88 | | - value="" |
89 | | - className="flex-shrink-0 px-4 py-3 text-sm font-semibold bg-white rounded-full focus:outline-none bg-opacity-10" |
90 | | - > |
91 | | - {`->`} |
92 | | - </button> |
93 | 87 | </div> |
94 | 88 | </div> |
95 | | - |
96 | | - <input |
97 | | - type="hidden" |
98 | | - name="mauticform[formId]" |
99 | | - id="mauticform_websitenewslettersubscription_id" |
100 | | - value="4" |
101 | | - /> |
102 | | - <input |
103 | | - type="hidden" |
104 | | - name="mauticform[return]" |
105 | | - id="mauticform_websitenewslettersubscription_return" |
106 | | - value="" |
107 | | - /> |
108 | | - <input |
109 | | - type="hidden" |
110 | | - name="mauticform[formName]" |
111 | | - id="mauticform_websitenewslettersubscription_name" |
112 | | - value="websitenewslettersubscription" |
113 | | - /> |
114 | | - <input |
115 | | - name="mauticform[gdpr_accepted]" |
116 | | - id="mauticform_radiogrp_radio_gdpr_accepted_Yes0" |
117 | | - type="hidden" |
118 | | - value="1" |
119 | | - /> |
120 | | - <input |
121 | | - name="mauticform[i_consent_to_gathering_an]" |
122 | | - id="mauticform_radiogrp_radio_i_consent_to_gathering_an_Yes0" |
123 | | - type="hidden" |
124 | | - value="1" |
125 | | - /> |
126 | 89 | </form> |
127 | 90 | </div> |
128 | 91 | </> |
129 | | - ); |
130 | | -}; |
| 92 | + ) |
| 93 | +} |
| 94 | + |
| 95 | +export default Newsletter |
131 | 96 |
|
132 | | -export default Newsletter; |
0 commit comments