FB-324-332-website-changes-and-remove-FOUC

[paulinabjacykowska]

This PR contains:

• Add first part of changes in order to fix https://vazco1.atlassian.net/browse/FB-324. The cause of this behaviour is that docusaurus is not doing great with Styled Components - this is mentioned here and here. That is why we will change styled components into classNames and keep all of styles in custom.css file.
• Add custom classNames to all of the buttons to be able to track activity on them on GTM
• Add changes described as points 3-5 in https://docs.google.com/document/d/1bdlzlPVovDcIBtMnX-aNe7LsAQRjr5jBt3qRn28QtwQ/edit

[mkaliszewski]

Isn't it the same type as PricingCardProps? But as I mentioned in a previous comment - I'm not sure we need it at all.

[paulinabjacykowska]

Hm, for now it is but for example what if we will want to pass another prop to the PricingCard component that is not related to this array? Also, this component and array are in different files and I am worried that it would be less readable if we will reuse this PricingCardProps type. But maybe I am wrong about this?

[mkaliszewski]

Okay, let's leave this array typed, but I'd change it a bit around.

For PricingCard.tsx let's do the following:

export type PricingCardData = {
  color: string;
  buttonText: string;
  buttonLink: string;
  title: string;
  price?: string;
  denominator?: string;
  isMostPopular?: boolean;
  benefits: string[] | string;
  btnClassName:
    | 'btn-trial'
    | 'btn-buy-monthly'
    | 'btn-buy-yearly'
    | 'btn-buy-lifelong'
    | 'btn-buy-custom';
};

type PricingCardProps = PricingCardData;

1. Let's add an additional check for btnClassName (as I understand it's for analytics reasons, so let's have it strictly typed)
2. Let's move the type of PricingCardProps to PricingCardData (it will be easier to understand the import of this type in Pricing.tsx)
3. We can say the PricingCardProps is PricingCardData. If we want to add additional props, we can just do type PricingCardProps = { someOtherProp: string } & PricingCardData.

Last of all we can get rid of PricingCard type from Pricing.tsx and import the one from PricingCard.tsx -> we will have only a single source of type, I think it's much less confusing than having 2 different types saying basically the same.

What do you think about that?

[paulinabjacykowska]

I super much like that idea! ❤️