feat: add upgrade access button to user settings page

[babblebey]

Description

This Pull Request adds the StripeCheckoutButton component to the User Settings page.

More Information in Review Comment HERE

What type of PR is this? (check all applicable)

• 🍕 Feature
• 🐛 Bug Fix
• 📝 Documentation Update
• 🎨 Style
• 🧑‍💻 Code Refactor
• 🔥 Performance Improvements
• ✅ Test
• 🤖 Build
• 🔁 CI
• 📦 Chore (Release)
• ⏩ Revert

Related Tickets & Documents

Fixes #1394

Mobile & Desktop Screenshots/Recordings

screencast-localhost_3000-2023.07.20-20_43_11.webm

Added tests?

• 👍 yes
• 🙅 no, because they aren't needed
• 🙋 no, because I need help

Added to documentation?

• 📜 README.md
• 📓 docs.opensauced.pizza
• 🍕 dev.to/opensauced
• 📕 storybook
• 🙅 no documentation needed

[optional] Are there any post-deployment tasks we need to perform?

NA

[optional] What gif best describes this PR or how it makes you feel?

[netlify]

✅ Deploy Preview for oss-insights ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	f065db8
🔍 Latest deploy log	https://app.netlify.com/sites/oss-insights/deploys/64bbb5dbf4da38000847da4e
😎 Deploy Preview	https://deploy-preview-1398--oss-insights.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for design-insights ready!

Name	Link
🔨 Latest commit	f065db8
🔍 Latest deploy log	https://app.netlify.com/sites/design-insights/deploys/64bbb5dbf4da38000847da50
😎 Deploy Preview	https://deploy-preview-1398--design-insights.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[babblebey]

Changes Made to make the StripeCheckoutButton component more flexible:

• Modified the StripeCheckoutButton component to accept children and props of type StripeCheckoutButtonProps. The children prop allows users to customize the text content of the button, while the props can be used to pass additional styling or behavior options.
• Removed the unnecessary <div> element and replaced it with a <form> element to wrap the Button. This ensures better semantic structure for form submission.
• Removed the redundant <p> element around the <form> element, as it is no longer necessary.
• Updated the Button component usage to spread the props object so that any additional props provided to StripeCheckoutButton can be passed down to the Button component.

Overall, these changes have made the StripeCheckoutButton component more flexible and reusable, allowing users to easily customize the button's appearance and behavior based on their specific use cases. Sample Use Cases seen below

The dashboard Reports Component use case

<>
  <Text>Upgrade to a subscription to gain access to generate custom reports!</Text>
  <p className="flex justify-center py-4 px-2">
    // HERE
    <StripeCheckoutButton variant="primary" className="w-52 h-[38px] flex justify-center"/>
  </p>
</>

The User Settings page use case

<div className="flex flex-col gap-6 order-first md:order-last">
  <div className="flex flex-col gap-3">
    <label className="text-2xl font-normal text-light-slate-11">Upgrade Access</label>
    <div className="w-full sm:max-w-[330px]">
      <Text>Upgrade to a subscription to gain access to generate custom reports!</Text>
    </div>
  </div>
  // HERE
  <StripeCheckoutButton variant="primary" />
</div>

The User Settings page use case (with custom button content)

<StripeCheckoutButton variant="primary">
  Subscribe Now
</StripeCheckoutButton>

[brandonroberts]

@babblebey changes look better. Got some build/test failures on the PR preview

[babblebey]

changes look better. Got some build/test failures on the PR preview

I was out of sync with the new build configuration #1396

Now Fixed 🍕

[brandonroberts]

@babblebey thanks. One more addition is that button shouldn't be displayed if the user account already has access. The hasReports property from the useSession hook gives you this info https://github.com/open-sauced/insights/blob/beta/lib/hooks/useSession.ts#L43

Should be good to go then

[babblebey]

thanks. One more addition is that button shouldn't be displayed if the user account already has access.

Haha, funny how I didn't think about that logic

Will do 🍕

[github-actions]

🎉 This PR is included in version 1.57.0-beta.4 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀