Initial Commit

inc/checkout/signup-fields/field-templates/class-base-field-template.php

@@ -0,0 +1,175 @@
+<?php
+/**
+ * Base Field Template
+ *
+ * @package WP_Ultimo
+ * @subpackage Checkout\Signup_Fields
+ * @since 2.0.0
+ */
+
+namespace WP_Ultimo\Checkout\Signup_Fields\Field_Templates;
+
+// Exit if accessed directly
+defined('ABSPATH') || exit;
+
+/**
+ * Base Field Template
+ *
+ * @since 2.0.0
+ */
+class Base_Field_Template {
+
+	/**
+	 * Field template id.
+	 *
+	 * Needs to take the following format: field-type/id.
+	 * e.g. pricing-table/clean.
+	 *
+	 * @since 2.0.0
+	 * @var string
+	 */
+	protected $id;
+ /**
+  * @var array
+  */
+ protected $attributes = array();
+
+	/**
+	 * Field Template Constructor
+	 *
+	 * @since 2.0.0
+	 *
+	 * @param array $attributes The attributes passed to the field.
+	 */
+	public function __construct($attributes = array())
+ {
+     $this->attributes = $attributes;
+ } // end __construct;
+
+	/**
+	 * The render type for the template.
+	 *
+	 * Field templates can have two different render types, ajax and dynamic.
+	 * If ajax is selected, when we detect a change in the billing period and other
+	 * sensitive info, an ajax request is made to fetch the new pricing table HTML
+	 * markup.
+	 *
+	 * If dynamic is selected, nothing is done as the template can handle
+	 * reactive updates natively (using Vue.js)
+	 *
+	 * In terms of performance, dynamic is preferred, but ajax should
+	 * work just fine.
+	 *
+	 * @since 2.0.0
+	 * @return string Either ajax or dynamic
+	 */
+	public function get_render_type(): string {
+
+		return 'ajax';
+
+ 	} // end get_render_type;
+
+	/**
+	 * The title of the field template.
+	 *
+	 * This is used on the template selector.
+	 *
+	 * @since 2.0.0
+	 * @return string
+	 */
+	public function get_title() {
+
+		return __('Field Template', 'wp-ultimo');
+
+	} // end get_title;
+
+	/**
+	 * The description of the field template.
+	 *
+	 * This is used on the template selector.
+	 *
+	 * @since 2.0.0
+	 * @return string
+	 */
+	public function get_description() {
+
+		return __('Description', 'wp-ultimo');
+
+	} // end get_description;
+	/**
+	 * The preview image of the field template.
+	 *
+	 * The URL of the image preview.
+	 *
+	 * @since 2.0.0
+	 */
+	public function get_preview(): string {
+
+		return '';
+
+	} // end get_preview;
+
+	/**
+	 * The content of the template.
+	 *
+	 * @since 2.0.0
+	 *
+	 * @param array $attributes The field template attributes.
+	 * @return void
+	 */
+	public function output($attributes) {} // end output;
+
+	/**
+	 * Renders the content.
+	 *
+	 * This method should not be override.
+	 *
+	 * @since 2.0.0
+	 *
+	 * @param array $attributes The field template attributes.
+	 * @return string
+	 */
+	public function render($attributes) {
+
+		ob_start();
+
+		$this->output($attributes);
+
+		return ob_get_clean();
+
+	} // end render;
+
+	/**
+	 * Displays the content on the checkout form as a wrapper.
+	 *
+	 * This method should not be override.
+	 *
+	 * @since 2.0.0
+	 *
+	 * @param array  $attributes The field template attributes.
+	 * @param object $signup_field The base field.
+	 * @return string
+	 */
+	public function render_container($attributes, $signup_field = false) {
+
+		if ($this->get_render_type() === 'ajax') {
+
+			if ($signup_field) {
+
+				$attributes = $signup_field->reduce_attributes($attributes);
+
+			} // end if;
+
+			$markup = sprintf('<dynamic :template="get_template(\'%s\', %s)"></dynamic>', esc_js($this->id), esc_attr(json_encode($attributes)));
+
+		} else {
+
+			$markup = $this->render($attributes);
+
+		} // end if;
+
+		return $markup;
+
+	} // end render_container;
+
+} // end class Base_Field_Template;

inc/checkout/signup-fields/field-templates/order-bump/class-simple-order-bump-field-template.php

@@ -0,0 +1,115 @@
+<?php
+/**
+ * Order Summary Simple
+ *
+ * @package WP_Ultimo
+ * @subpackage Checkout\Signup_Fields
+ * @since 2.0.0
+ */
+
+namespace WP_Ultimo\Checkout\Signup_Fields\Field_Templates\Order_Bump;
+
+// Exit if accessed directly
+defined('ABSPATH') || exit;
+
+use \WP_Ultimo\Checkout\Signup_Fields\Field_Templates\Base_Field_Template;
+
+/**
+ * Template Selection Simple
+ *
+ * @since 2.0.0
+ */
+class Simple_Order_Bump_Field_Template extends Base_Field_Template {
+
+	/**
+	 * Field template id.
+	 *
+	 * Needs to take the following format: field-type/id.
+	 * e.g. pricing-table/clean.
+	 *
+	 * @since 2.0.0
+	 * @var string
+	 */
+	protected $id = 'order-bump/simple';
+
+	/**
+	 * The render type for the template.
+	 *
+	 * Field templates can have two different render types, ajax and dynamic.
+	 * If ajax is selected, when we detect a change in the billing period and other
+	 * sensitive info, an ajax request is made to fetch the new pricing table HTML
+	 * markup.
+	 *
+	 * If dynamic is selected, nothing is done as the template can handle
+	 * reactive updates natively (using Vue.js)
+	 *
+	 * In terms of performance, dynamic is preferred, but ajax should
+	 * work just fine.
+	 *
+	 * @since 2.0.0
+	 * @return string Either ajax or dynamic
+	 */
+	public function get_render_type(): string {
+
+		return 'ajax';
+
+ 	} // end get_render_type;
+
+	/**
+	 * The title of the field template.
+	 *
+	 * This is used on the template selector.
+	 *
+	 * @since 2.0.0
+	 * @return string
+	 */
+	public function get_title() {
+
+		return __('Simple', 'wp-ultimo');
+
+	} // end get_title;
+
+	/**
+	 * The description of the field template.
+	 *
+	 * This is used on the template selector.
+	 *
+	 * @since 2.0.0
+	 * @return string
+	 */
+	public function get_description() {
+
+		return __('A simple layout with minimal styling, just enough to make it usable out-of-the-box.', 'wp-ultimo');
+
+	} // end get_description;
+
+	/**
+	 * The preview of the field template.
+	 *
+	 * @since 2.0.0
+	 * @return string
+	 */
+	public function get_preview(): string {
+
+		return wu_get_asset('checkout-forms/clean-template-selection.png');
+
+	} // end get_preview;
+
+	/**
+	 * The content of the template.
+	 *
+	 * @since 2.0.0
+	 *
+	 * @param array $attributes The field template attributes.
+	 * @return void
+	 */
+	public function output($attributes) {
+
+		/**
+     * Loads the actual order-bump template
+     */
+		wu_get_template('checkout/templates/order-bump/simple', $attributes);
+
+	} // end output;
+
+} // end class Simple_Order_Bump_Field_Template;

inc/checkout/signup-fields/field-templates/order-summary/class-clean-order-summary-field-template.php

@@ -0,0 +1,115 @@
+<?php
+/**
+ * Order Summary Clean
+ *
+ * @package WP_Ultimo
+ * @subpackage Checkout\Signup_Fields
+ * @since 2.0.0
+ */
+
+namespace WP_Ultimo\Checkout\Signup_Fields\Field_Templates\Order_Summary;
+
+// Exit if accessed directly
+defined('ABSPATH') || exit;
+
+use \WP_Ultimo\Checkout\Signup_Fields\Field_Templates\Base_Field_Template;
+
+/**
+ * Order Summary Clean
+ *
+ * @since 2.0.0
+ */
+class Clean_Order_Summary_Field_Template extends Base_Field_Template {
+
+	/**
+	 * Field template id.
+	 *
+	 * Needs to take the following format: field-type/id.
+	 * e.g. pricing-table/clean.
+	 *
+	 * @since 2.0.0
+	 * @var string
+	 */
+	protected $id = 'order-summary/simple';
+
+	/**
+	 * The render type for the template.
+	 *
+	 * Field templates can have two different render types, ajax and dynamic.
+	 * If ajax is selected, when we detect a change in the billing period and other
+	 * sensitive info, an ajax request is made to fetch the new pricing table HTML
+	 * markup.
+	 *
+	 * If dynamic is selected, nothing is done as the template can handle
+	 * reactive updates natively (using Vue.js)
+	 *
+	 * In terms of performance, dynamic is preferred, but ajax should
+	 * work just fine.
+	 *
+	 * @since 2.0.0
+	 * @return string Either ajax or dynamic
+	 */
+	public function get_render_type(): string {
+
+		return 'dynamic';
+
+ 	} // end get_render_type;
+
+	/**
+	 * The title of the field template.
+	 *
+	 * This is used on the template selector.
+	 *
+	 * @since 2.0.0
+	 * @return string
+	 */
+	public function get_title() {
+
+		return __('Clean', 'wp-ultimo');
+
+	} // end get_title;
+
+	/**
+	 * The description of the field template.
+	 *
+	 * This is used on the template selector.
+	 *
+	 * @since 2.0.0
+	 * @return string
+	 */
+	public function get_description() {
+
+		return __('A simple layout with minimal styling, just enough to make it usable out-of-the-box.', 'wp-ultimo');
+
+	} // end get_description;
+
+	/**
+	 * The preview of the field template.
+	 *
+	 * @since 2.0.0
+	 * @return string
+	 */
+	public function get_preview(): string {
+
+		return wu_get_asset('checkout-forms/clean-order-summary.png');
+
+	} // end get_preview;
+
+	/**
+	 * The content of the template.
+	 *
+	 * @since 2.0.0
+	 *
+	 * @param array $attributes The field template attributes.
+	 * @return void
+	 */
+	public function output($attributes) {
+
+		/**
+     * Loads the actual order-summary template
+     */
+		wu_get_template('checkout/templates/order-summary/simple', $attributes);
+
+	} // end output;
+
+} // end class Clean_Order_Summary_Field_Template;

inc/checkout/signup-fields/field-templates/period-selection/class-clean-period-selection-field-template.php

@@ -0,0 +1,114 @@
+<?php
+/**
+ * Template Selection Clean
+ *
+ * @package WP_Ultimo
+ * @subpackage Checkout\Signup_Fields
+ * @since 2.0.0
+ */
+
+namespace WP_Ultimo\Checkout\Signup_Fields\Field_Templates\Period_Selection;
+
+// Exit if accessed directly
+defined('ABSPATH') || exit;
+
+use \WP_Ultimo\Checkout\Signup_Fields\Field_Templates\Base_Field_Template;
+
+/**
+ * Template Selection Clean
+ *
+ * @since 2.0.0
+ */
+class Clean_Period_Selection_Field_Template extends Base_Field_Template {
+
+	/**
+	 * Field template id.
+	 *
+	 * Needs to take the following format: field-type/id.
+	 * e.g. pricing-table/clean.
+	 *
+	 * @since 2.0.0
+	 * @var string
+	 */
+	protected $id = 'period-selection/clean';
+
+	/**
+	 * The render type for the template.
+	 *
+	 * Field templates can have two different render types, ajax and dynamic.
+	 * If ajax is selected, when we detect a change in the billing period and other
+	 * sensitive info, an ajax request is made to fetch the new pricing table HTML
+	 * markup.
+	 *
+	 * If dynamic is selected, nothing is done as the template can handle
+	 * reactive updates natively (using Vue.js)
+	 *
+	 * In terms of performance, dynamic is preferred, but ajax should
+	 * work just fine.
+	 *
+	 * @since 2.0.0
+	 * @return string Either ajax or dynamic
+	 */
+	public function get_render_type(): string {
+
+		return 'dynamic';
+
+ 	} // end get_render_type;
+
+	/**
+	 * The title of the field template.
+	 *
+	 * This is used on the template selector.
+	 *
+	 * @since 2.0.0
+	 * @return string
+	 */
+	public function get_title() {
+
+		return __('Clean', 'wp-ultimo');
+
+	} // end get_title;
+
+	/**
+	 * The description of the field template.
+	 *
+	 * This is used on the template selector.
+	 *
+	 * @since 2.0.0
+	 * @return string
+	 */
+	public function get_description() {
+
+		return __('A simple template with clean markup and no styling, ready to be customized with custom CSS.', 'wp-ultimo');
+
+	} // end get_description;
+
+	/**
+	 * The preview image of the field template.
+	 *
+	 * The URL of the image preview.
+	 *
+	 * @since 2.0.0
+	 * @return string
+	 */
+	public function get_preview(): string {
+
+		return wu_get_asset('checkout-forms/clean-period-selection.png');
+
+	} // end get_preview;
+
+	/**
+	 * The content of the template.
+	 *
+	 * @since 2.0.0
+	 *
+	 * @param array $attributes The field template attributes.
+	 * @return void
+	 */
+	public function output($attributes) {
+
+		wu_get_template('checkout/templates/period-selection/clean', $attributes);
+
+	} // end output;
+
+} // end class Clean_Period_Selection_Field_Template;

inc/checkout/signup-fields/field-templates/period-selection/class-legacy-period-selection-field-template.php

@@ -0,0 +1,114 @@
+<?php
+/**
+ * Template Selection Clean
+ *
+ * @package WP_Ultimo
+ * @subpackage Checkout\Signup_Fields
+ * @since 2.0.0
+ */
+
+namespace WP_Ultimo\Checkout\Signup_Fields\Field_Templates\Period_Selection;
+
+// Exit if accessed directly
+defined('ABSPATH') || exit;
+
+use \WP_Ultimo\Checkout\Signup_Fields\Field_Templates\Base_Field_Template;
+
+/**
+ * Template Selection Clean
+ *
+ * @since 2.0.0
+ */
+class Legacy_Period_Selection_Field_Template extends Base_Field_Template {
+
+	/**
+	 * Field template id.
+	 *
+	 * Needs to take the following format: field-type/id.
+	 * e.g. pricing-table/clean.
+	 *
+	 * @since 2.0.0
+	 * @var string
+	 */
+	protected $id = 'period-selection/legacy';
+
+	/**
+	 * The render type for the template.
+	 *
+	 * Field templates can have two different render types, ajax and dynamic.
+	 * If ajax is selected, when we detect a change in the billing period and other
+	 * sensitive info, an ajax request is made to fetch the new pricing table HTML
+	 * markup.
+	 *
+	 * If dynamic is selected, nothing is done as the template can handle
+	 * reactive updates natively (using Vue.js)
+	 *
+	 * In terms of performance, dynamic is preferred, but ajax should
+	 * work just fine.
+	 *
+	 * @since 2.0.0
+	 * @return string Either ajax or dynamic
+	 */
+	public function get_render_type(): string {
+
+		return 'dynamic';
+
+ 	} // end get_render_type;
+
+	/**
+	 * The title of the field template.
+	 *
+	 * This is used on the template selector.
+	 *
+	 * @since 2.0.0
+	 * @return string
+	 */
+	public function get_title() {
+
+		return __('Legacy', 'wp-ultimo');
+
+	} // end get_title;
+
+	/**
+	 * The description of the field template.
+	 *
+	 * This is used on the template selector.
+	 *
+	 * @since 2.0.0
+	 * @return string
+	 */
+	public function get_description() {
+
+		return __('Implementation of the layout that shipped with WP Ultimo < 1.10.X.', 'wp-ultimo');
+
+	} // end get_description;
+
+	/**
+	 * The preview image of the field template.
+	 *
+	 * The URL of the image preview.
+	 *
+	 * @since 2.0.0
+	 * @return string
+	 */
+	public function get_preview(): string {
+
+		return wu_get_asset('checkout-forms/legacy-period-selection.png');
+
+	} // end get_preview;
+
+	/**
+	 * The content of the template.
+	 *
+	 * @since 2.0.0
+	 *
+	 * @param array $attributes The field template attributes.
+	 * @return void
+	 */
+	public function output($attributes) {
+
+		wu_get_template('checkout/templates/period-selection/legacy', $attributes);
+
+	} // end output;
+
+} // end class Legacy_Period_Selection_Field_Template;

inc/checkout/signup-fields/field-templates/pricing-table/class-legacy-pricing-table-field-template.php

@@ -0,0 +1,114 @@
+<?php
+/**
+ * Template Selection Clean
+ *
+ * @package WP_Ultimo
+ * @subpackage Checkout\Signup_Fields
+ * @since 2.0.0
+ */
+
+namespace WP_Ultimo\Checkout\Signup_Fields\Field_Templates\Pricing_Table;
+
+// Exit if accessed directly
+defined('ABSPATH') || exit;
+
+use \WP_Ultimo\Checkout\Signup_Fields\Field_Templates\Base_Field_Template;
+
+/**
+ * Template Selection Clean
+ *
+ * @since 2.0.0
+ */
+class Legacy_Pricing_Table_Field_Template extends Base_Field_Template {
+
+	/**
+	 * Field template id.
+	 *
+	 * Needs to take the following format: field-type/id.
+	 * e.g. pricing-table/clean.
+	 *
+	 * @since 2.0.0
+	 * @var string
+	 */
+	protected $id = 'pricing-table/legacy';
+
+	/**
+	 * The render type for the template.
+	 *
+	 * Field templates can have two different render types, ajax and dynamic.
+	 * If ajax is selected, when we detect a change in the billing period and other
+	 * sensitive info, an ajax request is made to fetch the new pricing table HTML
+	 * markup.
+	 *
+	 * If dynamic is selected, nothing is done as the template can handle
+	 * reactive updates natively (using Vue.js)
+	 *
+	 * In terms of performance, dynamic is preferred, but ajax should
+	 * work just fine.
+	 *
+	 * @since 2.0.0
+	 * @return string Either ajax or dynamic
+	 */
+	public function get_render_type(): string {
+
+		return 'dynamic';
+
+ 	} // end get_render_type;
+
+	/**
+	 * The title of the field template.
+	 *
+	 * This is used on the template selector.
+	 *
+	 * @since 2.0.0
+	 * @return string
+	 */
+	public function get_title() {
+
+		return __('Legacy', 'wp-ultimo');
+
+	} // end get_title;
+
+	/**
+	 * The description of the field template.
+	 *
+	 * This is used on the template selector.
+	 *
+	 * @since 2.0.0
+	 * @return string
+	 */
+	public function get_description() {
+
+		return __('Implementation of the layout that shipped with WP Ultimo < 1.10.X.', 'wp-ultimo');
+
+	} // end get_description;
+
+	/**
+	 * The preview image of the field template.
+	 *
+	 * The URL of the image preview.
+	 *
+	 * @since 2.0.0
+	 * @return string
+	 */
+	public function get_preview(): string {
+
+		return wu_get_asset('checkout-forms/legacy-pricing-table.png');
+
+	} // end get_preview;
+
+	/**
+	 * The content of the template.
+	 *
+	 * @since 2.0.0
+	 *
+	 * @param array $attributes The field template attributes.
+	 * @return void
+	 */
+	public function output($attributes) {
+
+		wu_get_template('checkout/templates/pricing-table/legacy', $attributes);
+
+	} // end output;
+
+} // end class Legacy_Pricing_Table_Field_Template;

inc/checkout/signup-fields/field-templates/pricing-table/class-list-pricing-table-field-template.php

@@ -0,0 +1,91 @@
+<?php
+/**
+ * Base Field Template
+ *
+ * @package WP_Ultimo
+ * @subpackage Checkout\Signup_Fields
+ * @since 2.0.0
+ */
+
+namespace WP_Ultimo\Checkout\Signup_Fields\Field_Templates\Pricing_Table;
+
+// Exit if accessed directly
+defined('ABSPATH') || exit;
+
+use \WP_Ultimo\Checkout\Signup_Fields\Field_Templates\Base_Field_Template;
+
+/**
+ * Base Field Template
+ *
+ * @since 2.0.0
+ */
+class List_Pricing_Table_Field_Template extends Base_Field_Template {
+
+	/**
+	 * Field template id.
+	 *
+	 * Needs to take the following format: field-type/id.
+	 * e.g. pricing-table/clean.
+	 *
+	 * @since 2.0.0
+	 * @var string
+	 */
+	protected $id = 'pricing-table/list';
+
+	/**
+	 * The title of the field template.
+	 *
+	 * This is used on the template selector.
+	 *
+	 * @since 2.0.0
+	 * @return string
+	 */
+	public function get_title() {
+
+		return __('Simple List', 'wp-ultimo');
+
+	} // end get_title;
+
+	/**
+	 * The description of the field template.
+	 *
+	 * This is used on the template selector.
+	 *
+	 * @since 2.0.0
+	 * @return string
+	 */
+	public function get_description() {
+
+		return __('Simple stylized list with price, recurrence, and the plan description.', 'wp-ultimo');
+
+	} // end get_description;
+
+	/**
+	 * The preview image of the field template.
+	 *
+	 * The URL of the image preview.
+	 *
+	 * @since 2.0.0
+	 * @return string
+	 */
+	public function get_preview(): string {
+
+		return wu_get_asset('checkout-forms/list-pricing-table.png');
+
+	} // end get_preview;
+
+	/**
+	 * The content of the template.
+	 *
+	 * @since 2.0.0
+	 *
+	 * @param array $attributes The field template attributes.
+	 * @return void
+	 */
+	public function output($attributes) {
+
+		wu_get_template('checkout/templates/pricing-table/list', $attributes);
+
+	} // end output;
+
+} // end class List_Pricing_Table_Field_Template;

inc/checkout/signup-fields/field-templates/steps/class-clean-steps-field-template.php

@@ -0,0 +1,112 @@
+<?php
+/**
+ * Template Selection Clean
+ *
+ * @package WP_Ultimo
+ * @subpackage Checkout\Signup_Fields
+ * @since 2.0.0
+ */
+
+namespace WP_Ultimo\Checkout\Signup_Fields\Field_Templates\Steps;
+
+// Exit if accessed directly
+defined('ABSPATH') || exit;
+
+use \WP_Ultimo\Checkout\Signup_Fields\Field_Templates\Base_Field_Template;
+
+/**
+ * Template Selection Clean
+ *
+ * @since 2.0.0
+ */
+class Clean_Steps_Field_Template extends Base_Field_Template {
+
+	/**
+	 * Field template id.
+	 *
+	 * Needs to take the following format: field-type/id.
+	 * e.g. pricing-table/clean.
+	 *
+	 * @since 2.0.0
+	 * @var string
+	 */
+	protected $id = 'steps/clean';
+
+	/**
+	 * The render type for the template.
+	 *
+	 * Field templates can have two different render types, ajax and dynamic.
+	 * If ajax is selected, when we detect a change in the billing period and other
+	 * sensitive info, an ajax request is made to fetch the new pricing table HTML
+	 * markup.
+	 *
+	 * If dynamic is selected, nothing is done as the template can handle
+	 * reactive updates natively (using Vue.js)
+	 *
+	 * In terms of performance, dynamic is preferred, but ajax should
+	 * work just fine.
+	 *
+	 * @since 2.0.0
+	 * @return string Either ajax or dynamic
+	 */
+	public function get_render_type(): string {
+
+		return 'dynamic';
+
+ 	} // end get_render_type;
+
+	/**
+	 * The title of the field template.
+	 *
+	 * This is used on the template selector.
+	 *
+	 * @since 2.0.0
+	 * @return string
+	 */
+	public function get_title() {
+
+		return __('Clean', 'wp-ultimo');
+
+	} // end get_title;
+
+	/**
+	 * The description of the field template.
+	 *
+	 * This is used on the template selector.
+	 *
+	 * @since 2.0.0
+	 * @return string
+	 */
+	public function get_description() {
+
+		return __('A simple layout with minimal styling, just enough to make it usable out-of-the-box.', 'wp-ultimo');
+
+	} // end get_description;
+
+	/**
+	 * The preview of the field template.
+	 *
+	 * @since 2.0.0
+	 * @return string
+	 */
+	public function get_preview(): string {
+
+		return wu_get_asset('checkout-forms/clean-steps.png');
+
+	} // end get_preview;
+
+	/**
+	 * The content of the template.
+	 *
+	 * @since 2.0.0
+	 *
+	 * @param array $attributes The field template attributes.
+	 * @return void
+	 */
+	public function output($attributes) {
+
+		wu_get_template('checkout/templates/steps/clean', $attributes);
+
+	} // end output;
+
+} // end class Clean_Steps_Field_Template;

inc/checkout/signup-fields/field-templates/steps/class-legacy-steps-field-template.php

@@ -0,0 +1,112 @@
+<?php
+/**
+ * Template Selection Clean
+ *
+ * @package WP_Ultimo
+ * @subpackage Checkout\Signup_Fields
+ * @since 2.0.0
+ */
+
+namespace WP_Ultimo\Checkout\Signup_Fields\Field_Templates\Steps;
+
+// Exit if accessed directly
+defined('ABSPATH') || exit;
+
+use \WP_Ultimo\Checkout\Signup_Fields\Field_Templates\Base_Field_Template;
+
+/**
+ * Template Selection Clean
+ *
+ * @since 2.0.0
+ */
+class Legacy_Steps_Field_Template extends Base_Field_Template {
+
+	/**
+	 * Field template id.
+	 *
+	 * Needs to take the following format: field-type/id.
+	 * e.g. pricing-table/clean.
+	 *
+	 * @since 2.0.0
+	 * @var string
+	 */
+	protected $id = 'steps/legacy';
+
+	/**
+	 * The render type for the template.
+	 *
+	 * Field templates can have two different render types, ajax and dynamic.
+	 * If ajax is selected, when we detect a change in the billing period and other
+	 * sensitive info, an ajax request is made to fetch the new pricing table HTML
+	 * markup.
+	 *
+	 * If dynamic is selected, nothing is done as the template can handle
+	 * reactive updates natively (using Vue.js)
+	 *
+	 * In terms of performance, dynamic is preferred, but ajax should
+	 * work just fine.
+	 *
+	 * @since 2.0.0
+	 * @return string Either ajax or dynamic
+	 */
+	public function get_render_type(): string {
+
+		return 'dynamic';
+
+ 	} // end get_render_type;
+
+	/**
+	 * The title of the field template.
+	 *
+	 * This is used on the template selector.
+	 *
+	 * @since 2.0.0
+	 * @return string
+	 */
+	public function get_title() {
+
+		return __('Legacy', 'wp-ultimo');
+
+	} // end get_title;
+
+	/**
+	 * The description of the field template.
+	 *
+	 * This is used on the template selector.
+	 *
+	 * @since 2.0.0
+	 * @return string
+	 */
+	public function get_description() {
+
+		return __('Implementation of the layout that shipped with WP Ultimo < 1.10.X.', 'wp-ultimo');
+
+	} // end get_description;
+
+	/**
+	 * The preview of the field template.
+	 *
+	 * @since 2.0.0
+	 * @return string
+	 */
+	public function get_preview(): string {
+
+		return wu_get_asset('checkout-forms/legacy-steps.png');
+
+	} // end get_preview;
+
+	/**
+	 * The content of the template.
+	 *
+	 * @since 2.0.0
+	 *
+	 * @param array $attributes The field template attributes.
+	 * @return void
+	 */
+	public function output($attributes) {
+
+		wu_get_template('checkout/templates/steps/legacy', $attributes);
+
+	} // end output;
+
+} // end class Legacy_Steps_Field_Template;

inc/checkout/signup-fields/field-templates/steps/class-minimal-steps-field-template.php

@@ -0,0 +1,112 @@
+<?php
+/**
+ * Template Selection Clean
+ *
+ * @package WP_Ultimo
+ * @subpackage Checkout\Signup_Fields
+ * @since 2.0.0
+ */
+
+namespace WP_Ultimo\Checkout\Signup_Fields\Field_Templates\Steps;
+
+// Exit if accessed directly
+defined('ABSPATH') || exit;
+
+use \WP_Ultimo\Checkout\Signup_Fields\Field_Templates\Base_Field_Template;
+
+/**
+ * Template Selection Clean
+ *
+ * @since 2.0.0
+ */
+class Minimal_Steps_Field_Template extends Base_Field_Template {
+
+	/**
+	 * Field template id.
+	 *
+	 * Needs to take the following format: field-type/id.
+	 * e.g. pricing-table/clean.
+	 *
+	 * @since 2.0.0
+	 * @var string
+	 */
+	protected $id = 'steps/minimal';
+
+	/**
+	 * The render type for the template.
+	 *
+	 * Field templates can have two different render types, ajax and dynamic.
+	 * If ajax is selected, when we detect a change in the billing period and other
+	 * sensitive info, an ajax request is made to fetch the new pricing table HTML
+	 * markup.
+	 *
+	 * If dynamic is selected, nothing is done as the template can handle
+	 * reactive updates natively (using Vue.js)
+	 *
+	 * In terms of performance, dynamic is preferred, but ajax should
+	 * work just fine.
+	 *
+	 * @since 2.0.0
+	 * @return string Either ajax or dynamic
+	 */
+	public function get_render_type(): string {
+
+		return 'dynamic';
+
+ 	} // end get_render_type;
+
+	/**
+	 * The title of the field template.
+	 *
+	 * This is used on the template selector.
+	 *
+	 * @since 2.0.0
+	 * @return string
+	 */
+	public function get_title() {
+
+		return __('Minimal', 'wp-ultimo');
+
+	} // end get_title;
+
+	/**
+	 * The description of the field template.
+	 *
+	 * This is used on the template selector.
+	 *
+	 * @since 2.0.0
+	 * @return string
+	 */
+	public function get_description() {
+
+		return __('A simple template with clean markup and no styling, ready to be customized with custom CSS.', 'wp-ultimo');
+
+	} // end get_description;
+
+	/**
+	 * The preview of the field template.
+	 *
+	 * @since 2.0.0
+	 * @return string
+	 */
+	public function get_preview(): string {
+
+		return wu_get_asset('checkout-forms/minimal-steps.png');
+
+	} // end get_preview;
+
+	/**
+	 * The content of the template.
+	 *
+	 * @since 2.0.0
+	 *
+	 * @param array $attributes The field template attributes.
+	 * @return void
+	 */
+	public function output($attributes) {
+
+		wu_get_template('checkout/templates/steps/minimal', $attributes);
+
+	} // end output;
+
+} // end class Minimal_Steps_Field_Template;

inc/checkout/signup-fields/field-templates/template-selection/class-clean-template-selection-field-template.php

@@ -0,0 +1,112 @@
+<?php
+/**
+ * Template Selection Clean
+ *
+ * @package WP_Ultimo
+ * @subpackage Checkout\Signup_Fields
+ * @since 2.0.0
+ */
+
+namespace WP_Ultimo\Checkout\Signup_Fields\Field_Templates\Template_Selection;
+
+// Exit if accessed directly
+defined('ABSPATH') || exit;
+
+use \WP_Ultimo\Checkout\Signup_Fields\Field_Templates\Base_Field_Template;
+
+/**
+ * Template Selection Clean
+ *
+ * @since 2.0.0
+ */
+class Clean_Template_Selection_Field_Template extends Base_Field_Template {
+
+	/**
+	 * Field template id.
+	 *
+	 * Needs to take the following format: field-type/id.
+	 * e.g. pricing-table/clean.
+	 *
+	 * @since 2.0.0
+	 * @var string
+	 */
+	protected $id = 'template-selection/clean';
+
+	/**
+	 * The render type for the template.
+	 *
+	 * Field templates can have two different render types, ajax and dynamic.
+	 * If ajax is selected, when we detect a change in the billing period and other
+	 * sensitive info, an ajax request is made to fetch the new pricing table HTML
+	 * markup.
+	 *
+	 * If dynamic is selected, nothing is done as the template can handle
+	 * reactive updates natively (using Vue.js)
+	 *
+	 * In terms of performance, dynamic is preferred, but ajax should
+	 * work just fine.
+	 *
+	 * @since 2.0.0
+	 * @return string Either ajax or dynamic
+	 */
+	public function get_render_type(): string {
+
+		return 'ajax';
+
+ 	} // end get_render_type;
+
+	/**
+	 * The title of the field template.
+	 *
+	 * This is used on the template selector.
+	 *
+	 * @since 2.0.0
+	 * @return string
+	 */
+	public function get_title() {
+
+		return __('Clean', 'wp-ultimo');
+
+	} // end get_title;
+
+	/**
+	 * The description of the field template.
+	 *
+	 * This is used on the template selector.
+	 *
+	 * @since 2.0.0
+	 * @return string
+	 */
+	public function get_description(): string {
+
+		return __('A simple layout with minimal styling, just enough to make it usable out-of-the-box.', 'wp-ultimo');
+
+	} // end get_description;
+
+	/**
+	 * The preview of the field template.
+	 *
+	 * @since 2.0.0
+	 * @return string
+	 */
+	public function get_preview(): string {
+
+		return wu_get_asset('checkout-forms/clean-template-selection.png');
+
+	} // end get_preview;
+
+	/**
+	 * The content of the template.
+	 *
+	 * @since 2.0.0
+	 *
+	 * @param array $attributes The field template attributes.
+	 * @return void
+	 */
+	public function output($attributes) {
+
+		wu_get_template('checkout/templates/template-selection/clean', $attributes);
+
+	} // end output;
+
+} // end class Clean_Template_Selection_Field_Template;

inc/checkout/signup-fields/field-templates/template-selection/class-legacy-template-selection-field-template.php

@@ -0,0 +1,103 @@
+<?php
+/**
+ * Legacy Field Template Selector
+ *
+ * @package WP_Ultimo
+ * @subpackage Checkout\Signup_Fields
+ * @since 2.0.0
+ */
+
+namespace WP_Ultimo\Checkout\Signup_Fields\Field_Templates\Template_Selection;
+
+// Exit if accessed directly
+defined('ABSPATH') || exit;
+
+use \WP_Ultimo\Checkout\Signup_Fields\Field_Templates\Base_Field_Template;
+
+/**
+ * Legacy Field Template Selector
+ *
+ * @since 2.0.0
+ */
+class Legacy_Template_Selection_Field_Template extends Base_Field_Template {
+
+	/**
+	 * Field template id.
+	 *
+	 * Needs to take the following format: field-type/id.
+	 * e.g. pricing-table/clean.
+	 *
+	 * @since 2.0.0
+	 * @var string
+	 */
+	protected $id = 'template-selection/legacy';
+
+	/**
+	 * Get render type for the template.
+	 *
+	 * @since 2.0.0
+	 * @return string
+	 */
+	public function get_render_type(): string {
+
+		return 'ajax';
+
+	} // end get_render_type;
+
+	/**
+	 * The title of the field template.
+	 *
+	 * This is used on the template selector.
+	 *
+	 * @since 2.0.0
+	 * @return string
+	 */
+	public function get_title() {
+
+		return __('Legacy', 'wp-ultimo');
+
+	} // end get_title;
+
+	/**
+	 * The description of the field template.
+	 *
+	 * This is used on the template selector.
+	 *
+	 * @since 2.0.0
+	 * @return string
+	 */
+	public function get_description() {
+
+		return __('Implementation of the layout that shipped with WP Ultimo < 1.10.X.', 'wp-ultimo');
+
+	} // end get_description;
+
+	/**
+	 * The preview image of the field template.
+	 *
+	 * The URL of the image preview.
+	 *
+	 * @since 2.0.0
+	 * @return string
+	 */
+	public function get_preview(): string {
+
+		return wu_get_asset('checkout-forms/legacy-template-selection.png');
+
+	} // end get_preview;
+
+	/**
+	 * The content of the template.
+	 *
+	 * @since 2.0.0
+	 *
+	 * @param array $attributes The field template attributes.
+	 * @return void
+	 */
+	public function output($attributes) {
+
+		wu_get_template('checkout/templates/template-selection/legacy', $attributes);
+
+	} // end output;
+
+} // end class Legacy_Template_Selection_Field_Template;

inc/checkout/signup-fields/field-templates/template-selection/class-minimal-template-selection-field-template.php

@@ -0,0 +1,101 @@
+<?php
+/**
+ * Template Selection Clean
+ *
+ * @package WP_Ultimo
+ * @subpackage Checkout\Signup_Fields
+ * @since 2.0.0
+ */
+
+namespace WP_Ultimo\Checkout\Signup_Fields\Field_Templates\Template_Selection;
+
+// Exit if accessed directly
+defined('ABSPATH') || exit;
+
+use \WP_Ultimo\Checkout\Signup_Fields\Field_Templates\Base_Field_Template;
+
+/**
+ * Template Selection Minimal
+ *
+ * @since 2.0.0
+ */
+class Minimal_Template_Selection_Field_Template extends Base_Field_Template {
+
+	/**
+	 * Field template id.
+	 *
+	 * Needs to take the following format: field-type/id.
+	 * e.g. pricing-table/clean.
+	 *
+	 * @since 2.0.0
+	 * @var string
+	 */
+	protected $id = 'template-selection/minimal';
+
+	/**
+	 * Get render type for the template.
+	 *
+	 * @since 2.0.0
+	 * @return string
+	 */
+	public function get_render_type(): string {
+
+		return 'ajax';
+
+	} // end get_render_type;
+
+	/**
+	 * The title of the field template.
+	 *
+	 * This is used on the template selector.
+	 *
+	 * @since 2.0.0
+	 * @return string
+	 */
+	public function get_title() {
+
+		return __('Minimal', 'wp-ultimo');
+
+	} // end get_title;
+
+	/**
+	 * The description of the field template.
+	 *
+	 * This is used on the template selector.
+	 *
+	 * @since 2.0.0
+	 * @return string
+	 */
+	public function get_description() {
+
+		return __('A simple template with clean markup and no styling, ready to be customized with custom CSS.', 'wp-ultimo');
+
+	} // end get_description;
+
+	/**
+	 * The preview of the field template.
+	 *
+	 * @since 2.0.0
+	 * @return string
+	 */
+	public function get_preview(): string {
+
+		return wu_get_asset('checkout-forms/minimal-template-selection.png');
+
+	} // end get_preview;
+
+	/**
+	 * The content of the template.
+	 *
+	 * @since 2.0.0
+	 *
+	 * @param array $attributes The field template attributes.
+	 * @return void
+	 */
+	public function output($attributes) {
+
+		wu_get_template('checkout/templates/template-selection/minimal', $attributes);
+
+	} // end output;
+
+} // end class Minimal_Template_Selection_Field_Template;