Adding Paywalls v2 docs to Cody's new structure

docs/tools/paywalls/creating-paywalls-v2.mdx

@@ -0,0 +1,72 @@
+---
+title: Creating Paywalls (v2 - Beta)
+slug: creating-paywalls-v2
+hidden: false
+---
+
+Use the Paywall Editor to design a fully customizable paywall.
+
+## Concepts
+
+| Concept              | Description                                                                                                                      |
+| :------------------- | :------------------------------------------------------------------------------------------------------------------------------- |
+| Components           | RevenueCat's predefined UI elements that can be added to a paywall.                                                              |
+| Component properties | The properties of each component that can be configured to modify it's style and behavior (e.g. its width, height, border, etc). |
+| Templates            | The paywalls that RevenueCat has already created that you can use as a starting point to build your own paywall from.            |
+
+## Available components
+
+Components are the individual building blocks of your paywall that can be arranged and configured to create your own custom layout.
+
+| Component       | Description                                                                             |
+| :-------------- | :-------------------------------------------------------------------------------------- |
+| Text            | An element for displaying text.                                                         |
+| Image           | An element for displaying uploaded images.                                              |
+| Stack           | A group                                                                                 |
+| Package         | An element for describing and selecting a package to be purchased.                      |
+| Purchase button | The call to action that envokes a purchase attempt of the selected package.             |
+| Button          | An element that can be interacted with to navigate somewhere else                       |
+| Footer          | A configurable portion of your paywall whose position can be fixed and uniquely styled. |
+
+:::info Parent components
+Stacks, packages, buttons, and the footer are all parents components which can contain other child components within them to be jointly controlled.
+:::
+
+[Learn more about each component.](/tools/paywalls/creating-paywalls-v2/components)
+
+## Getting started
+
+You can start creating your paywall by either:
+
+1. Choosing a template, or
+2. Starting from scratch
+
+Unless you have a very specific, custom design in mind that you're looking to create; **we recommend starting with a template.** You can customize any aspect of your paywall once select a template, it's simply a starting point to explore from.
+
+### Using the editor
+
+Once you've selected a template or picked starting from scratch, you'll land on our Paywall Editor, which has the following sections:
+
+1. **Layers**: The list of components on your paywall, their hierarchy, and their options (rename, duplicate, etc).
+2. **Component properties**: The list of configurable properties of the component you've selected.
+3. **Preview**: The preview of your paywall.
+4. **Control panel**: The options to change the locale, light/dark mode, and other preview settings to see how your paywall looks in various scenarios. The control panel is also where you can manage localizations through one page instead of modifying them component-by-component.
+
+### Arranging components
+
+Components can be added to a paywall in two ways:
+
+1. Directly to the main paywall with the **+ Add Component** button
+2. Directly within a complex component, such as a stack, with the **+** button in that component's row in the layers panel.
+
+Once a component has been added to a paywall, you can determine its order by dragging it vertically in the stack, or determine its parent component by dragging it underneath the desired parent and indenting it horizontally.
+
+:::tip Parent & child components
+A child component will be subject to the axis, alignment, distribution, and child spacing properties of the parent component; and will be impacted by other properties such as margin & padding.
+:::
+
+## FAQs
+
+| Question                                          | Answer |
+| :------------------------------------------------ | :----- |
+| How do I manage each localization for my paywall? | aasdf  |

docs/tools/paywalls/creating-paywalls-v2/additional-paywall-states.mdx

@@ -0,0 +1,52 @@
+---
+title: Additional Paywall States
+slug: additional-paywall-states
+hidden: false
+---
+
+# Additional states
+
+[some preamble]
+
+## Light mode / dark mode
+
+Paywalls are configured for light mode by default, but if your app supports dark mode you can additionally configure colors and images to be used for dark mode.
+
+To configure your paywall for dark mode:
+
+1. Click on `Light mode` in the settings above the paywall preview
+2. Click `Dark mode` in the dropdown to preview & edit your paywall in dark mode
+3. While in dark mode, all configurable elements (colors & images) will display the moon icon next to them instead of the sun icon.
+
+![Dark mode icons](/images/paywalls-dark-mode.png)
+
+:::tip
+You can also click the sun/moon icon to switch between light and dark mode as you're working with each property.
+:::
+
+## Intro offer eligibility
+
+All text fields can be configured to have unique strings based on whether the customer viewing the paywall is or is not eligible for an introductory offer.
+
+To configure a custom string for a text component based on intro offer eligibility:
+
+1. Click on the text component in the Layers panel you'd like to configure
+2. Click the `+` icon next to `Text field for an introductory offer` to expand that property and enter a custom string
+
+:::tip Play Store Offers
+On the Play Store, customers may be presented multiple offers to begin their subscription. If that's the case for your app, use the `Play Store only: Text field for multiple introductory offers` property to configure a custom string for those customers, and consider using the secondary offer variables to reference the correct price and duration of the second offer if needed.
+:::
+
+## Selected state of packages
+
+When multiple packages are offered to a customer, one will be selected by default, and they may optionally select any of the other packages to purchase before tapping the purchase button. Your paywall should style the selected state and the default state of the package uniquely to make it clear to the customer which one is currently selected, such as by including a unique icon within the package, differentiating the border color or background color, etc.
+
+To configure the selected state of each package:
+
+1. Click on the package component in the Layers panel you'd like to configure
+2. Click on the `Selected` tab at the top of that package's properties panel
+3. While on the selected tab, all changes to any properties will only apply to the selected state of that component
+
+[screenshot]
+
+Any changes you make to the default state of the package will also apply to the selected state unless you've manually set that property's selected state to something else. In other words, when you change properties like margin & padding on the default state, we'll apply that to the selected state too so you don't need to make the same changes twice; and when you update the border color of the selected state, we won't overwrite that if you update the border of the default state later on.

docs/tools/paywalls/creating-paywalls-v2/component-properties.mdx

@@ -0,0 +1,67 @@
+---
+title: Component Properties
+slug: component-properties
+hidden: false
+---
+
+# Component properties
+
+Paywalls are made up of individual components that you add and arrange, and those components each have their own properties to be configured that define how it looks and behaves.
+
+### Position properties
+
+:::
+Position properties only apply to parent components, since they control how the child components are arranged relative to one another.
+:::
+
+A parent component's **axis** controls whether its child components are arranged horizontally, vertically, or three-dimensionally.
+
+[illustration]
+
+**Alignment** determines how components are arranged against that axis; such as top, center, or bottom aligned elements across a horizontal axis.
+
+[illustration]
+
+**Distribution** determines how components are spaced along the defined axis. The available options are:
+
+[illustration]
+
+Last, **child spacing** determines exactly how much space should be set between each child component.
+
+### Size properties
+
+Each component's **width** and **height** can be sized to:
+
+1. Fit the space needed for the content
+2. Fill the available space for the component
+3. Occupy a fixed space
+
+[illustration]
+
+### Layout properties
+
+Each component's spacing can be configured through **margin** (added space outside of the component to create distance from adjacent components) and **padding** (added space within the component to create distance between the content and the edge of the component).
+
+By default, you can configure horizontal and vertical margin and padding simultaneously, or you can click on the icon to the right of the property to switch to configuring each value uniquely.
+
+[screenshot]
+
+### Appearance properties
+
+Each component may have a configurable **background color**, which can be a solid color or a gradient, and may have a specified opacity level.
+
+A component's **shape** can additionally be configured to select between rectangle and pill.
+
+Last, if the rectangle shape is used, then its **corner radius** can also be configured.
+
+[screenshot]
+
+### Border properties
+
+Parent components can additionally have a specified **border color** and **border width** to create visual separation between them and other components.
+
+### Drop shadow
+
+Parent components can have a drop shadow configured for them via a customizable **position** (x and y axis offset), **blur** (size of the shadow effect), and **color**.
+
+[screenshot]

docs/tools/paywalls/creating-paywalls-v2/components.mdx

@@ -0,0 +1,127 @@
+---
+title: Components
+slug: components
+hidden: false
+---
+
+# Components
+
+Components are the individual building blocks of your paywall that can be arranged and configured to create your own custom layout.
+
+| Component       | Description                                                                             |
+| :-------------- | :-------------------------------------------------------------------------------------- |
+| Text            | An element for displaying text.                                                         |
+| Image           | An element for displaying uploaded images.                                              |
+| Button          | An element that can be interacted with to navigate somewhere else                       |
+| Stack           | A group                                                                                 |
+| Package         | An element for describing and selecting a package to be purchased.                      |
+| Purchase button | The call to action that envokes a purchase attempt of the selected package.             |
+| Footer          | A configurable portion of your paywall whose position can be fixed and uniquely styled. |
+
+:::info Parent components
+Stacks, packages, buttons, and the footer are all complex components which can contain other components within them.
+:::
+
+## Common component properties
+
+Most components have common properties such as padding, margin, border, and more that can be used to control their look and layout. To learn more about these common component properties, [click here.](/tools/paywalls/creating-paywalls-v2/component-properties)
+
+## Text component
+
+The text component allows you to enter custom strings to display on your paywall. These strings can be sized, formatted, aligned, and colored however you'd like using the available properties.
+
+Text components can additionally be embedded in other parent components like stacks or buttons to position them relative to other components within the parent.
+
+All text components support variables, which are dynamic values that will be set based on the package being referenced. When a text component is within a package, its variable values will always refer to that package; and text components outside of a package will always refer to the currently selected package.
+
+[Learn more about variables.](/tools/paywalls/creating-paywalls-v2/components)
+
+In addition, all text components support having a unique value for customers that are eligible for intro offers, so that you can reference those offers anywhere on your paywall. You can set this value using the `Text field for an introductory offer` property on any text component.
+
+[Learn more about setting unique values for customers eligible for intro offers.](/tools/paywalls/creating-paywalls-v2/additional-paywall-states)
+
+## Image component
+
+The image component allows you to upload an image to display anywhere on your paywall.
+
+Whenever you upload an image, we'll save it in a Media Gallery for your Project, allowing you to reuse it in any paywall.
+
+:::tip
+Uploaded images must be smaller than 2MB, and we recommend keeping them under 1MB, especially if your paywall is initialized very early in your onboarding flow, to ensure all images have been loaded by the time a customer visits the paywall.
+:::
+
+In addition to the standard properties that are common to other components, images have a few unique ones that can be used to more granularly control how your image is displayed.
+
+#### Fit mode
+
+An image's fit mode can be set to `Fit` so it is resized to fit the available space without cropping, or `Fill`, where it will fill the available space and crop where necessary.
+
+#### Mask
+
+An image's mask shape can be set to:
+
+- Rectangle, with an optional corner radius setting
+- Circle
+- Concave
+- Convex
+
+##### Overlay
+
+An image can have a overlay applied of a solid color or a gradient, along with a transparency property, to allow you to do things like:
+
+1. Add a background image with a semi-transparent overlay color that matches your app's branding
+2. Apply a gradient overlay to smoothly transition from the image to your paywall's background color
+
+## Stack
+
+The stack component allows you to create a container of underlying components that can be jointly configured.
+
+Stacks, and all other parent components, have position properties that determine how the child components are arranged within the parent. This allows you to control the axis on which those components are aligned, how they're aligned, how they're distributed, and the spacing between each child component.
+
+![Stack properties](/images/paywalls-stack-properties.png)
+
+To add a component to a stack, click the `+` button in that stack's row in the Components Panel. You can also drag any existing component into a stack, or click the `...` button on existing component to `Embed in stack`, placing it within a new stack.
+
+![Stack options](/images/paywalls-stack-options.png)
+
+## Package
+
+The package component allows you to add a package to your paywall which your customer may select to purchase. Since a package is a parent component, you can add any other components within it to style your package however you'd like.
+
+At the top of the properties list, you'll need to select the package from your Offering that this package component should reference, and then decide whether this package should be selected by default when a customer loads your paywall.
+
+![Package properties](/images/paywalls-package-properties.png)
+
+In addition, package's are unique in that they can have both a **Default** and a **Selected** state configured for them, so that you can add unique styling to differentiate the two; such as a unique icon, border color, or background.
+
+[Learn more about selected state styling.](/tools/paywalls/creating-paywalls-v2/additional-paywall-states)
+
+:::tip
+The package component defines the selectable that a customer may tap on to select the package, so be sure to create suitable margin between it and other elements to make it easy for customers to tap on the correct package.
+:::
+
+## Purchase button
+
+The purchase button is tied to your packages, and is how a customer begins the purchase process with the store.
+
+It's shape can be configured as a pill, or a rectangle with a configurable border radius; and as a parent component it can also contain other components within it, which you might use to show multiple lines of text, an icon, etc.
+
+## Button
+
+For all other buttons you may wish to add on your paywall, you can use the button component. The key difference between a button and other stacks is that it has configurable **Actions**.
+
+You can choose from the following actions:
+
+1. Restore Purchases
+2. Navigate back
+3. Navigate to
+
+**Navigate to** additionally supports navigating to your Privacy Policy, Terms of Service, or any other custom URL of your choosing. URLs can be opened via In-App Browser, External Browser, or Deep Link.
+
+## Footer
+
+If you'd like to have a fixed footer at the bottom of your paywall, you can add one using the footer component. This is especially important if you want to add optional content to your paywall that a customer may want to explore if they're interested, but don't necessarily want things like the purchase button buried beneath that content.
+
+Once added, the footer component will always be fixed to the bottom of your paywall, and its size will be relative to its properties and the size of the components within it.
+
+To differentiate between your fixed footer and your other paywall content, we'll add a drop shadow to your footer by default, though this can be customized or removed if you'd prefer.