# Pricing Plans Popup

## Overview

![](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MgCIhbSvG91cVm0a_eX%2F-MgCOGu9iJ-j6kUZW8OE%2FScreen%20Shot%202021-08-03%20at%2012.01.23%20PM.png?alt=media\&token=c0be1812-85fa-4d20-b507-5ef30204b052)

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://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MgCIhbSvG91cVm0a_eX%2F-MgCTVLBOVfUsCmbmoYf%2FScreen%20Shot%202021-08-03%20at%2012.24.44%20PM.png?alt=media\&token=83d87514-2961-4966-8fab-c2eb39cb3381)

* **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://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MgCIhbSvG91cVm0a_eX%2F-MgCSP4swyzS1gpeqfmj%2FScreen%20Shot%202021-08-03%20at%2012.19.38%20PM.png?alt=media\&token=927d02da-a520-45c7-b3d3-258e3df3dfe4)

* 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://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MgCIhbSvG91cVm0a_eX%2F-MgCxBQPzsi-MK4MN37S%2FScreen%20Shot%202021-08-03%20at%202.38.37%20PM.png?alt=media\&token=955d3745-6a4e-42a3-aa3d-bc6a7c5b6cb9)

* 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://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MgCIhbSvG91cVm0a_eX%2F-MgCU0GlkvXQNRC_2oNE%2FScreen%20Shot%202021-08-03%20at%2012.27.01%20PM.png?alt=media\&token=677bce2a-678e-40d8-822e-f96f3f006c99)