# Pricing Plans Popup

## Overview

![](https://content.gitbook.com/content/HCmz75EtH7rhYwwnva6o/blobs/wOfRnyl2jb9tnq6TyKLR/122.png)

Use this popup to display pricing plans with different billing frequencies.

## Structure

This popup includes the following:

* A hidden variable called **var - selection** that captures the user's current selection
* A title text and a collapsible description text that can be hidden.
* A toggle tabs group (**Group Main tab\_text**) with two inner tab options (**Group Inner tab 1\_text** and **Group Inner tab 2\_text**)
  * Clicking on each inner tab group will run a workflow to display the inner tab's group text (e.g. Monthly or Annually) in **Group Main tab\_text** and change the current tab view. 
  * Currently clicking on each tab will just change the "/month" and "/year" text in the repeating group.

![Conditional statement in a text element in the repeating group](https://content.gitbook.com/content/HCmz75EtH7rhYwwnva6o/blobs/KxeSkuhzUBzweA8tnk3I/123.png)

* **RepeatingGroup Dummy** displays a list of things
* Clicking on **Button Cancel** and **Button Confirm** will close the popup

## How to set up

* Update the title and description text. 
  * You can hide the description text by selecting **Group Collapsible text** and unchecking the box for *This element is visible on page load*.
* Update the text data sources for **Group Inner tab 1\_text** and **Group Inner tab 2\_text**. Changing the name here will change the toggle tab text.

![](https://content.gitbook.com/content/HCmz75EtH7rhYwwnva6o/blobs/uuMxi15WH0sw74VDVokr/124.png)

* Update **RepeatingGroup Dummy's** data source to the data type you want to display.
  * Update all the inner groups in the repeating group to the new data type
  * Select **Group Inner price\_number**, **Text Basic**, and **Text For hobbyists** and remove all conditional statements on those elements (these are placeholders).
  * Update **var - selection's** data source (this should be the same as the repeating group's data type).
* Add workflow to Button Confirm.

### How to display different content in each tab

* If you want to change a text in the repeating group when the current tab is changed, you should update that text element directly and use the `format as text: yes/no` logic.

![](https://content.gitbook.com/content/HCmz75EtH7rhYwwnva6o/blobs/z2Z8REFquz7FAHtraufE/125.png)

* If you want to display a completely different set of list for the other tab, you should add a conditional statement to the repeating group similar to the following:

![](https://content.gitbook.com/content/HCmz75EtH7rhYwwnva6o/blobs/nMXlkxUj22mQaf4tns8K/126.png)