# Pricing Plans Popup

## Overview

![](https://271263854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnL1n10Xf3r4xIND5AZqa%2Fuploads%2FPLoy4BTydbjkrZXRnMXe%2F122.png?alt=media\&token=b9b14edf-620d-4e66-8639-5133bd9d9907)

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://271263854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnL1n10Xf3r4xIND5AZqa%2Fuploads%2FHdSbiTbV2DlmZOUVFyeb%2F123.png?alt=media\&token=de4ed58b-7401-468b-a543-14e4e41a4212)

* **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://271263854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnL1n10Xf3r4xIND5AZqa%2Fuploads%2F9z9ZvuxBTRax4AV9Qorg%2F124.png?alt=media\&token=c9f3e245-1169-4d8a-a95e-de9c53a04112)

* 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://271263854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnL1n10Xf3r4xIND5AZqa%2Fuploads%2F1YUEs9mTIeSxJ8YsRNUY%2F125.png?alt=media\&token=47349972-412d-41ac-a9b0-2b1e98f5bde4)

* 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://271263854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnL1n10Xf3r4xIND5AZqa%2Fuploads%2FzHYnV6qc70O03wyIDq9X%2F126.png?alt=media\&token=f3c35143-6ccd-4d69-aefe-6bb1f533b3ac)