feat: enterprise let's chat form (#2034)

https://www.notion.so/Custom-Plan-let-s-chat-enterprise-form-58358bd0f51a489089b8c15a798bf2df Co-authored-by: Benjamin Goering <171782+gobengo@users.noreply.github.com>
web3-storage · Oct 18, 2022 · ec2bb57 · ec2bb57
1 parent befb926
commit ec2bb57
Show file tree

Hide file tree

Showing 10 changed files with 316 additions and 97 deletions.
diff --git a/packages/website/components/customStorageForm/customStorageForm.js b/packages/website/components/customStorageForm/customStorageForm.js
@@ -16,7 +16,7 @@ const CustomStorageForm = ({ onClose }) => {
   return (
     <form
       id="kwesForm"
-      className="kwes-form text-left max-w-lg text-lg mx-auto mt-12"
+      className="kwes-form custom-storage-form text-left max-w-lg text-lg mx-auto mt-12"
       action="https://kwesforms.com/api/foreign/forms/rJbS5DK02SKLzypcNzJ3"
     >
       <h3>Enterprise user inquiry</h3>

diff --git a/packages/website/components/customStorageForm/customStorageForm.scss b/packages/website/components/customStorageForm/customStorageForm.scss
@@ -1,4 +1,4 @@
-.kwes-form {
+.custom-storage-form .kwes-form {
   .fields {
     display: grid;
     width: 100%;

diff --git a/packages/website/components/enterpriseTierRequestModal/enterpriseTierRequestModal.js b/packages/website/components/enterpriseTierRequestModal/enterpriseTierRequestModal.js
@@ -0,0 +1,69 @@
+import { useEffect } from 'react';
+import kwesforms from 'kwesforms';
+
+import Modal from 'modules/zero/components/modal/modal';
+import CloseIcon from 'assets/icons/close';
+import Button from 'components/button/button.js';
+import GradientBackground from 'components/gradientbackground/gradientbackground';
+
+const EnterpriseTierRequestModal = ({ isOpen, onClose }) => {
+  useEffect(() => {
+    kwesforms.init();
+  }, []);
+
+  return (
+    <div className="user-request-modal enterprise-tier-inquiry">
+      <Modal
+        className=""
+        closeIcon={<CloseIcon className="file-uploader-close" />}
+        modalState={[isOpen, onClose]}
+        showCloseButton
+      >
+        <div className="user-request-modal__container">
+          <GradientBackground variant="saturated-variant" />
+          <h1 className="user-request-modal__heading">Enterprise Storage Inquiry</h1>
+          <form
+            method="POST"
+            id="enterpriseKwesForm"
+            className="kwes-form"
+            action="https://kwesforms.com/api/foreign/forms/6M733IJbJvlIUBMRbSWB"
+          >
+            <div className="input-container">
+              <label htmlFor="auth-method">Please share your email address. </label>
+              <textarea id="auth-method" name="auth-method" required rows={1} />
+            </div>
+            <div className="input-container">
+              <label htmlFor="links">Please share links (Github, website, etc) for what you&apos;re building. </label>
+              <textarea id="links" name="links" required rows={4} />
+            </div>
+            <div className="input-container">
+              <label htmlFor="data-volume">
+                Please provide a ballpark estimate for your data volume (both in aggregate and over a given month).{' '}
+              </label>
+              <textarea id="data-volume" name="data-volume" required rows={2} />
+            </div>
+            <div className="input-container">
+              <label htmlFor="data-read-type-and-frequency">
+                How do you plan on reading data uploaded to web3.storage (E.g., w3link gateway, other gateway, directly
+                over bitswap, etc.)? How frequently do you plan on reading data?{' '}
+              </label>
+              <textarea id="data-read-type-and-frequency" name="data-read-type-and-frequency" required rows={2} />
+            </div>
+            <div className="input-container">
+              <label htmlFor="additional-info">Is there any additional usage information we should know about? </label>
+              <textarea id="additional-info" name="additional-info" required rows={4} />
+            </div>
+
+            <div className="input-container">
+              <Button className="bg-nslime" type="submit" id="create-new-key">
+                Request
+              </Button>
+            </div>
+          </form>
+        </div>
+      </Modal>
+    </div>
+  );
+};
+
+export default EnterpriseTierRequestModal;
diff --git a/packages/website/components/pinningRequestModal/pinningRequestModal.js b/packages/website/components/pinningRequestModal/pinningRequestModal.js
@@ -30,7 +30,7 @@ const PinningRequestModal = ({ isOpen, onClose }) => {
   }
 
   return (
-    <div className="user-request-modal">
+    <div className="user-request-modal kwes-form-web3-defaults">
       <Modal
         className=""
         closeIcon={<CloseIcon className="file-uploader-close" />}

diff --git a/packages/website/components/storageLimitRequestModal/storageLimitRequestModal.js b/packages/website/components/storageLimitRequestModal/storageLimitRequestModal.js
@@ -29,7 +29,7 @@ const UserRequestModal = ({ isOpen, onClose }) => {
   }
 
   return (
-    <div className="user-request-modal">
+    <div className="user-request-modal kwes-form-web3-defaults">
       <Modal
         className=""
         closeIcon={<CloseIcon className="file-uploader-close" />}

diff --git a/packages/website/components/w3link_form/w3link_form.js b/packages/website/components/w3link_form/w3link_form.js
@@ -8,7 +8,7 @@ const W3linkForm = () => {
 
   return (
     <form
-      className="kwes-form text-left max-w-lg text-lg mx-auto mt-12"
+      className="kwes-form w3-link-form text-left max-w-lg text-lg mx-auto mt-12"
       action="https://kwesforms.com/api/foreign/forms/YKmGgxCJeFWb8c9zWtDk"
     >
       <p>

diff --git a/packages/website/components/w3link_form/w3link_form.scss b/packages/website/components/w3link_form/w3link_form.scss
@@ -1,4 +1,4 @@
-.kwes-form {
+.w3-link-form .kwes-form {
   .fields {
     display: grid;
     width: 100%;

diff --git a/packages/website/pages/pricing.js b/packages/website/pages/pricing.js
@@ -1,3 +1,5 @@
+import { useState } from 'react';
+
 import Img from 'components/cloudflareImage.js';
 import GradientBackground from 'components/gradientbackground/gradientbackground.js';
 import Scroll2Top from 'components/scroll2top/scroll2top.js';
@@ -10,6 +12,7 @@ import BlobCluster from 'public/images/illustrations/blob-cluster.png';
 import Cluster1 from 'public/images/index/cluster-1.png';
 import Button from 'ZeroComponents/button/button';
 import GeneralPageData from '../content/pages/general.json';
+import EnterpriseTierRequestModal from 'components/enterpriseTierRequestModal/enterpriseTierRequestModal';
 import CardListBlock from 'components/cardlistblock/cardlistblock';
 
 const logos = [
@@ -132,96 +135,107 @@ const Card = props => {
   );
 };
 
-const PricingTiers = () => (
-  <>
-    <section id="section_plan_cards" className="sectional">
-      <div className="grid-middle">
-        <div>
-          <div className="column-content">
-            <Card
-              title="Free"
-              price="$0"
-              storageAllocation="5GiB storage"
-              storageOverageRate=""
-              callToAction="GET STARTED"
-              callToActionUrl="/account/payment?plan=free"
-            >
-              <li className="pricing-bullet-1">Easily store your data and make it available on IPFS</li>
-              <li className="pricing-bullet-2">
-                All data is replicated onto the Filecoin storage network for verifiability that your data is safe
-              </li>
-              <li className="pricing-bullet-3">
-                Use the platform&apos;s other services like w3name and w3link to build the next generation of apps
-              </li>
-            </Card>
+const PricingTiers = () => {
+  const [isEnterpriseRequestModelOpen, setIsEnterpriseRequestModelOpen] = useState(false);
+
+  return (
+    <>
+      <section id="section_plan_cards" className="sectional">
+        <div className="grid-middle">
+          <div>
+            <div className="column-content">
+              <Card
+                title="Free"
+                price="$0"
+                storageAllocation="5GiB storage"
+                storageOverageRate=""
+                callToAction="GET STARTED"
+                callToActionUrl="/account/payment?plan=free"
+              >
+                <li className="pricing-bullet-1">Easily store your data and make it available on IPFS</li>
+                <li className="pricing-bullet-2">
+                  All data is replicated onto the Filecoin storage network for verifiability that your data is safe
+                </li>
+                <li className="pricing-bullet-3">
+                  Use the platform&apos;s other services like w3name and w3link to build the next generation of apps
+                </li>
+              </Card>
 
-            <Card
-              title="Lite"
-              price="$3"
-              storageAllocation="15GiB storage"
-              storageOverageRate="+ $0.20/mo per additional GiB"
-              callToAction="CHOOSE THIS PLAN"
-              callToActionUrl="/account/payment?plan=lite"
-            >
-              <li className="pricing-bullet-1">
-                <i>Everything from the Free tier, plus...</i>
-              </li>
-              <li className="pricing-bullet-2">
-                Additional storage for personal usage or projects requiring lower data volumes
-              </li>
-            </Card>
+              <Card
+                title="Lite"
+                price="$3"
+                storageAllocation="15GiB storage"
+                storageOverageRate="+ $0.20/mo per additional GiB"
+                callToAction="CHOOSE THIS PLAN"
+                callToActionUrl="/account/payment?plan=lite"
+              >
+                <li className="pricing-bullet-1">
+                  <i>Everything from the Free tier, plus...</i>
+                </li>
+                <li className="pricing-bullet-2">
+                  Additional storage for personal usage or projects requiring lower data volumes
+                </li>
+              </Card>
 
-            <Card
-              title="Expert"
-              price="$10"
-              isBestValue={true}
-              storageAllocation="60GiB storage"
-              storageOverageRate="+ $0.17/mo per additional GiB"
-              callToAction="CHOOSE THIS PLAN"
-              callToActionUrl="/account/payment?plan=pro"
-            >
-              <li className="pricing-bullet-1">
-                <i>Everything from the Lite tier, plus...</i>
-              </li>
-              <li className="pricing-bullet-2">
-                Our lowest tier price per GiB stored for use cases that require scale
-              </li>
-              <li className="pricing-bullet-3">Early access to additional products that make web3 production-ready</li>
-            </Card>
+              <Card
+                title="Expert"
+                price="$10"
+                isBestValue={true}
+                storageAllocation="60GiB storage"
+                storageOverageRate="+ $0.17/mo per additional GiB"
+                callToAction="CHOOSE THIS PLAN"
+                callToActionUrl="/account/payment?plan=pro"
+              >
+                <li className="pricing-bullet-1">
+                  <i>Everything from the Lite tier, plus...</i>
+                </li>
+                <li className="pricing-bullet-2">
+                  Our lowest tier price per GiB stored for use cases that require scale
+                </li>
+                <li className="pricing-bullet-3">
+                  Early access to additional products that make web3 production-ready
+                </li>
+              </Card>
+            </div>
           </div>
         </div>
-      </div>
-      <div className="grid-middle">
-        <div className="col-12_sm-12_mi-12_ti-12 column-1">
-          <div className="column-content">
-            <div className="pricing-enterprise-users">
-              <div className="enterprise-blob">
-                <Img alt="" src={BlobCluster} />
-              </div>
-              <div className="enterprise-content">
-                <div className="enterprise-title">FOR ENTERPRISE USERS...</div>
-                <div className="enterprise-heading">Custom</div>
-                <div className="enterprise-description">
-                  Looking for way more? Anticipate having a complex integration? Just tell us more about your company
-                  and what you&apos;re building using the form below, and we&apos;ll get back to you shortly.
+        <div className="grid-middle">
+          <div className="col-12_sm-12_mi-12_ti-12 column-1">
+            <div className="column-content">
+              <div className="pricing-enterprise-users">
+                <div className="enterprise-blob">
+                  <Img alt="" src={BlobCluster} />
                 </div>
-                <div className="enterprise-above-call-to-action"></div>
-                <div>
-                  <Button
-                    className="button outline-light enterprise-call-to-action"
-                    href="mailto:support@web3.storage?subject=Enterprise%20Tier%20Inquiry&body=-%20Please%20share%20your%20email%20address.%0D%0A%0D%0A%0D%0A-%20Please%20share%20links%20(Github%2C%20website%2C%20etc)%20for%20what%20you%E2%80%99re%20building.%0D%0A%0D%0A%0D%0A-%20Please%20provide%20a%20ballpark%20estimate%20for%20your%20data%20volume%20(both%20in%20aggregate%20and%20over%20a%20given%20month).%0D%0A%0D%0A%0D%0A-%20How%20do%20you%20plan%20on%20reading%20data%20uploaded%20to%20%5Bweb3.storage%5D(http%3A%2F%2Fweb3.storage)%20(E.g.%2C%20w3link%20gateway%2C%20other%20gateway%2C%20directly%20over%20bitswap%2C%20etc.)%3F%20How%20frequently%20do%20you%20plan%20on%20reading%20data%3F%0D%0A%0D%0A%0D%0A-%20Is%20there%20any%20additional%20usage%20information%20we%20should%20know%20about%3F%0D%0A%0D%0A"
-                  >
-                    LET&apos;S CHAT
-                  </Button>
+                <div className="enterprise-content">
+                  <div className="enterprise-title">FOR ENTERPRISE USERS...</div>
+                  <div className="enterprise-heading">Custom</div>
+                  <div className="enterprise-description">
+                    Looking for way more? Anticipate having a complex integration? Just tell us more about your company
+                    and what you&apos;re building using the form below, and we&apos;ll get back to you shortly.
+                  </div>
+                  <div className="enterprise-above-call-to-action"></div>
+                  <div>
+                    <Button
+                      onClick={() => setIsEnterpriseRequestModelOpen(true)}
+                      className="button outline-light enterprise-call-to-action"
+                    >
+                      LET&apos;S CHAT
+                    </Button>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-    </section>
-  </>
-);
+
+        <EnterpriseTierRequestModal
+          isOpen={isEnterpriseRequestModelOpen}
+          onClose={() => setIsEnterpriseRequestModelOpen(false)}
+        />
+      </section>
+    </>
+  );
+};
 
 const FaqSection = () => (
   <>