Select plan modal screen

[RyRy79261]

Is your feature request related to a problem? Please describe.
The plan selection modal needs to be added

This modal should query the API for a list of Products (including a flag indicating whether the current user can migrate to the plan).

If a product is chosen by the user which they are not allowed to downgrade to, then an error message should be displayed notifying the user why it is not possible to migrate to the selected plan. The Submit button should also be disabled.

Describe the solution you'd like
In order to translate the content of the available plans, the copy will be managed by the UI. Teams is not included in current scope, please exclude

The component and data fetching for the plans from the API are already implemented, but the styling and location in the modal need to be updated in line with the mockups below.

After the Select this plan and pay is clicked, the default card should be billed, if the user has a card on file. If no card has been added, the the Add card modal should be displayed.

Using the schema below as a guide, there will be either an array of plan option data set as constants, indexed by productIDs in the codebase, or bespoke components mapped to the product IDs we receive from the API, that make use of generalised layout components.

Hover/selection states should change the background & border using animation.transform as transition timing.

Learn more link should link out to landing page (@sweetpea22 to clarify)

Suggestion 1, full configuration in constant array:

interface IPlan {
   title: string
   flag?: string | { color: string, text: string}
   storageOffer: string
   features: string
   priceBreakdown: string | ReactNode
}
export const Plans: {[key: string]: IPlan} = {
   "abc-123": {
       title: "Basic",
       flag?: undefined,
       storageOffer: "1tb",
       features: "Basic permissions controls",
       priceBreakdown: "Free"
   }
}

Suggestion 2, bespoke component from generalised layout components:

<PlanCard>
   <TopSection>
       <div>
          { Title }
       </div>
       { flag && <Flag>{ flag }</Flag>  }
   </TopSection>
   <Content>
      <Typography> ## Set height
         { storageOffer }
      </Typography>
      <Typography> ## Set height
         { features }
      </Typography>
      <Typography> ## Set height
         { priceBreakdown }
      </Typography>
   </Content>
</PlanCard>

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context

[RyRy79261]

@tanmoyAtb @Tbaut @FSM1 Hey team! Can you please add your planning poker estimates with ZenHub