Skip to content

add pricing calculator

Tyler Williams requested to merge im-203-pricing-calculator into master

Why is this change being made?

Closes https://gitlab.com/gitlab-com/marketing/inbound-marketing/growth/-/issues/203#note_523473320

I moved the index.html.haml file provided in this note in the issue into the repository and made a handful of changes to it:

  1. I moved the CSS into a separate stylesheet
  2. I moved the JavaScript to a file to load in the pricing calculator page via extra_js, and a set of utilities for the calculator so that I could write tests for the calculator in isolation.
  3. I changed some of the markup from the original file to fix accessibility audits in Lighthouse: changed heading order and used the heading style classes to keep visual consistency, added labels and ids to input fields, added specific focus states.
  4. The table layout was causing inputs to overflow on smaller screens (about 425px wide and smaller), so I changed those styles to flexbox instead.

QA

  1. You can check out this branch or go to the review app and visit /pricing/calculator to try it out
  2. I'm pretty sure I got the formula correct, but I wanted to triple check, so I wrote a jest spec for the calculator utilities. I wrote specifications for each tier: base case usage, going over the CI/CD time limit (by either a small amount or a larger amount), going over the storage (by either a small amount or a larger amount), or going over both. It may be faster to check my work with this file, rather than manually entering values in the review app. Here's how to read those test cases:
it('calculates the correct result within tier limits', () => {
  const tier = tiers.free;
  const users = 10;
  const minutes = 400;
  const storage = 10;
  expect(calculateTotal(tier, users, minutes, storage)).toBe(0);
})

Each test case will look basically like this. It specifies the tier (free, premium, ultimate), the number of users, the number of minutes, the number of GB.

Then it runs the calculateTotal function with those values. You can see the assumption I made in toBe(0) here. So in this case, my understanding of the formula is that a free tier with 10 users, 400 minutes, and 10GB has an annual cost of $0. You'll see that reflected in the web form itself.

Remaining questions

  1. There's still placeholder text here. Do we have updated copy for this page?
  2. In the issue, the specs say we project storage consumption per month, but the formula slide does not multiply its overages by 12, like the minutes does, although its input specified per month. Should I multiply the storage limit modifiers by 12 to reflect a monthly charge, or leave it as the formula specifies?
  3. Do we still need to redirect this page? Should that be a separate MR?
  4. There are a lot of comments about the URL structure in the issue, but I'm having trouble finding a final decision there. Is that in scope for this MR, or will we handle it elsewhere?

Approvals

Looks like we want the following folks to approve:

I will assign you each as a reviewer.

Author Checklist

  • Provided a concise title for the MR
  • Added a description to this MR explaining the reasons for the proposed change, per say-why-not-just-what
  • Assign this change to the correct DRI
Edited by Lauren Barker

Merge request reports