feat: add TOS agree before confirm (#1919)

<img width="658" alt="Screen Shot 2022-09-21 at 3 25 04 PM" src="https://user-images.githubusercontent.com/1189523/191621167-59ccfe2b-4bbf-4e90-a478-06e9259151bd.png"> Co-authored-by: Benjamin Goering <171782+gobengo@users.noreply.github.com>
web3-storage · Sep 25, 2022 · aacde20 · aacde20
1 parent edceaa3
commit aacde20
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 10 deletions.
diff --git a/packages/website/components/account/paymentTable.js/paymentTable.js b/packages/website/components/account/paymentTable.js/paymentTable.js
@@ -1,3 +1,5 @@
+import Tooltip from 'ZeroComponents/tooltip/tooltip.js';
+import InfoIcon from '../../../assets/icons/info';
 import Button from '../../button/button.js';
 
 const PaymentTable = ({ plans, currentPlan, isEarlyAdopter, setPlanSelection, setIsPaymentPlanModalOpen }) => {
@@ -19,9 +21,19 @@ const PaymentTable = ({ plans, currentPlan, isEarlyAdopter, setPlanSelection, se
               <div></div>
               <div>
                 <p>Base Storage Capacity</p>
-                <p>Additional Storage</p>
+                <p>
+                  Additional Storage{' '}
+                  <Tooltip content="For Free users, this is a hard limit. For Lite and Pro users, this is a charge for storage use above your limit.">
+                    <InfoIcon />
+                  </Tooltip>
+                </p>
                 <p>Bandwidth</p>
-                <p>Block Limits</p>
+                <p>
+                  Block Limits{' '}
+                  <Tooltip content="For Free users, this is a hard limit. For Lite and Pro users, this is a soft limit with overage fees. Please refer to <a href='/terms'>Terms of Service</a> for exact amounts.">
+                    <InfoIcon />
+                  </Tooltip>
+                </p>
               </div>
             </div>
             {plans.map(plan => (
@@ -60,12 +72,11 @@ const PaymentTable = ({ plans, currentPlan, isEarlyAdopter, setPlanSelection, se
                     </Button>
                   )}
 
-                  {currentPlan?.id === plan.id ||
-                    (isEarlyAdopter && plan.id === 'earlyAdopter' && (
-                      <Button variant="light" disabled={true} className="">
-                        Current Plan
-                      </Button>
-                    ))}
+                  {(currentPlan?.id === plan.id || (isEarlyAdopter && plan.id === 'earlyAdopter')) && (
+                    <Button variant="light" disabled={true} className="">
+                      Current Plan
+                    </Button>
+                  )}
                 </div>
               </div>
             ))}

diff --git a/packages/website/components/accountPlansModal/accountPlansModal.js b/packages/website/components/accountPlansModal/accountPlansModal.js
@@ -41,6 +41,8 @@ export async function putUserPayment(pm_id, plan_id) {
  * @param {any} obj.savedPaymentMethod
  * @param {(v: boolean) => void} obj.setHasPaymentMethods
  * @param {(v: boolean) => void} obj.setEditingPaymentMethod
+ * @param {(v: boolean) => void} obj.setHasAcceptedTerms
+ * @param {boolean} obj.hasAcceptedTerms
  */
 const AccountPlansModal = ({
   isOpen,
@@ -51,6 +53,8 @@ const AccountPlansModal = ({
   savedPaymentMethod,
   setHasPaymentMethods,
   setEditingPaymentMethod,
+  setHasAcceptedTerms,
+  hasAcceptedTerms,
   stripePromise,
 }) => {
   const [isCreatingSub, setIsCreatingSub] = useState(false);
@@ -76,10 +80,28 @@ const AccountPlansModal = ({
           </div>
         )}
 
+        <div className="billing-card card-transparent">
+          <div className="billing-terms-toggle">
+            <input
+              type="checkbox"
+              id="agreeTerms"
+              checked={hasAcceptedTerms}
+              onChange={() => setHasAcceptedTerms(!hasAcceptedTerms)}
+            />
+            <label htmlFor="agreeTerms">
+              I agree to the{' '}
+              <a href="/terms/" rel="noreferrer" target="_blank">
+                web3.storage
+              </a>{' '}
+              Terms of Service
+            </label>
+          </div>
+        </div>
+
         <div className="account-plans-confirm">
           <Button
             variant="light"
-            disabled={!savedPaymentMethod || isCreatingSub}
+            disabled={!savedPaymentMethod || isCreatingSub || !hasAcceptedTerms}
             onClick={async () => {
               setIsCreatingSub(true);
               await putUserPayment(savedPaymentMethod.id, currentPlan.id);

diff --git a/packages/website/components/accountPlansModal/accountPlansModal.scss b/packages/website/components/accountPlansModal/accountPlansModal.scss
@@ -69,8 +69,52 @@
   display: flex;
   width: 100%;
   justify-content: space-between;
+  .button.disabled {
+    opacity: 0.5;
+  }
 }
 
 .add-payment-method-cta + .account-plans-confirm {
   opacity: 0.5;
 }
+
+.billing-terms-toggle {
+  width: 100%;
+  position: relative;
+  line-height: 1.5;
+  font-size: 13px;
+  display: grid;
+  align-items: center;
+  grid-template-columns: 1em auto;
+  gap: 0.75em;
+  input {
+    display: grid;
+    place-content: center;
+    appearance: none;
+    font: inherit;
+    color: currentColor;
+    width: 1.15em;
+    height: 1.15em;
+    border: 0.15em solid currentColor;
+    border-radius: 0.15em;
+    transform: translateY(-0.075em);
+    cursor: pointer;
+  }
+  input[type='checkbox']::before {
+    content: '';
+    width: 0.65em;
+    height: 0.65em;
+    transform: scale(0);
+    transition: 120ms transform ease-in-out;
+    box-shadow: inset 1em 1em #fff;
+    pointer-events: none;
+  }
+
+  input[type='checkbox']:checked::before {
+    transform: scale(1);
+  }
+
+  a {
+    color: $cyan;
+  }
+}
diff --git a/packages/website/pages/account/payment.js b/packages/website/pages/account/payment.js
@@ -26,6 +26,7 @@ const PaymentSettingsPage = props => {
   const [savedPaymentMethod, setSavedPaymentMethod] = useState(/** @type {PaymentMethod} */ ({}));
   const [editingPaymentMethod, setEditingPaymentMethod] = useState(false);
   const [loadingUserSettings, setLoadingUserSettings] = useState(true);
+  const [hasAcceptedTerms, setHasAcceptedTerms] = useState(false);
 
   /**
    * @typedef {Object} Plan
@@ -158,14 +159,19 @@ const PaymentSettingsPage = props => {
         </div>
         <AccountPlansModal
           isOpen={isPaymentPlanModalOpen}
-          onClose={() => setIsPaymentPlanModalOpen(false)}
+          onClose={() => {
+            setIsPaymentPlanModalOpen(false);
+            setHasAcceptedTerms(false);
+          }}
           planList={planList}
           planSelection={planSelection}
           setCurrentPlan={setCurrentPlan}
           savedPaymentMethod={savedPaymentMethod}
           stripePromise={stripePromise}
           setHasPaymentMethods={setHasPaymentMethods}
           setEditingPaymentMethod={setEditingPaymentMethod}
+          setHasAcceptedTerms={setHasAcceptedTerms}
+          hasAcceptedTerms={hasAcceptedTerms}
         />
       </>
     </>