@sociallane/elements 1.0.0

package/packages/widgets/pricing-table/templates/wrapper.php

@@ -0,0 +1,164 @@
+<?php
+/**
+ * Template: Pricing Table Wrapper
+ *
+ * AVAILABLE DATA ($view):
+ * - show_headline, show_description, show_toggle
+ * - headline, headline_tag, description
+ * - billing_period, monthly_label, yearly_label
+ * - plans (array of plan data)
+ * - classes, widget_id
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+if ( empty( $view ) ) {
+	return;
+}
+
+$anim          = $view['animation'] ?? [];
+$section_attrs = sociallane_section_animation_attrs( $anim );
+$headline_attrs = sociallane_headline_animation_attrs( $anim );
+$section_id = 'pricing-table-' . $view['widget_id'];
+$has_heading = $view['show_headline'] && ! empty( $view['headline'] );
+?>
+
+<?php // ========== PRICING TABLE START ========== ?>
+
+<section
+	id="<?php echo esc_attr( $section_id ); ?>"
+	class="sl-pricing-table <?php echo esc_attr( $view['classes']['section'] ); ?> py-16 md:py-20 lg:py-24"
+	<?php echo $section_attrs ? ' ' . $section_attrs : ''; ?>
+	data-billing-period="<?php echo esc_attr( $view['billing_period'] ); ?>"
+	<?php if ( $has_heading ) : ?>aria-labelledby="<?php echo esc_attr( $section_id ); ?>-heading"<?php endif; ?>
+>
+	<div class="container mx-auto px-4 sm:px-6 lg:px-8">
+		<?php if ( $has_heading || ( $view['show_description'] && ! empty( $view['description'] ) ) ) : ?>
+			<header class="text-center max-w-3xl mx-auto mb-12 md:mb-16" id="<?php echo esc_attr( $section_id ); ?>-heading">
+				<?php if ( $view['show_headline'] && ! empty( $view['headline'] ) ) : ?>
+					<<?php echo $view['headline_tag']; ?>
+						class="<?php echo esc_attr( $view['classes']['headline'] ); ?> text-3xl sm:text-4xl font-bold font-heading leading-tight"
+						<?php echo ! empty( $headline_attrs ) ? ' ' . $headline_attrs : ''; ?>
+					>
+						<?php echo $view['headline']; ?>
+					</<?php echo $view['headline_tag']; ?>>
+				<?php endif; ?>
+
+				<?php if ( $view['show_description'] && ! empty( $view['description'] ) ) : ?>
+					<p class="<?php echo esc_attr( $view['classes']['description'] ); ?> mt-4 text-base md:text-lg leading-relaxed">
+						<?php echo $view['description']; ?>
+					</p>
+				<?php endif; ?>
+
+				<?php if ( $view['show_toggle'] ) : ?>
+					<div class="mt-8 flex justify-center" role="group" aria-label="<?php echo esc_attr__( 'Billing period', 'sociallane-elements' ); ?>">
+						<div class="sl-pricing-toggle inline-flex p-1 rounded-full <?php echo esc_attr( $view['classes']['toggle_bg'] ); ?>">
+							<button
+								type="button"
+								data-period="monthly"
+								class="sl-pricing-toggle-btn px-4 py-2 text-sm font-medium rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 dark:focus:ring-offset-neutral-900 <?php echo $view['billing_period'] === 'monthly' ? esc_attr( $view['classes']['toggle_active'] ) : esc_attr( $view['classes']['toggle_inactive'] ); ?>"
+								aria-pressed="<?php echo $view['billing_period'] === 'monthly' ? 'true' : 'false'; ?>"
+							>
+								<?php echo $view['monthly_label']; ?>
+							</button>
+							<button
+								type="button"
+								data-period="yearly"
+								class="sl-pricing-toggle-btn px-4 py-2 text-sm font-medium rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 dark:focus:ring-offset-neutral-900 <?php echo $view['billing_period'] === 'yearly' ? esc_attr( $view['classes']['toggle_active'] ) : esc_attr( $view['classes']['toggle_inactive'] ); ?>"
+								aria-pressed="<?php echo $view['billing_period'] === 'yearly' ? 'true' : 'false'; ?>"
+							>
+								<?php echo $view['yearly_label']; ?>
+							</button>
+						</div>
+					</div>
+				<?php endif; ?>
+			</header>
+		<?php elseif ( $view['show_toggle'] ) : ?>
+			<div class="mb-12 flex justify-center" role="group" aria-label="<?php echo esc_attr__( 'Billing period', 'sociallane-elements' ); ?>">
+				<div class="sl-pricing-toggle inline-flex p-1 rounded-full <?php echo esc_attr( $view['classes']['toggle_bg'] ); ?>">
+					<button
+						type="button"
+						data-period="monthly"
+						class="sl-pricing-toggle-btn px-4 py-2 text-sm font-medium rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 dark:focus:ring-offset-neutral-900 <?php echo $view['billing_period'] === 'monthly' ? esc_attr( $view['classes']['toggle_active'] ) : esc_attr( $view['classes']['toggle_inactive'] ); ?>"
+						aria-pressed="<?php echo $view['billing_period'] === 'monthly' ? 'true' : 'false'; ?>"
+					>
+						<?php echo $view['monthly_label']; ?>
+					</button>
+					<button
+						type="button"
+						data-period="yearly"
+						class="sl-pricing-toggle-btn px-4 py-2 text-sm font-medium rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 dark:focus:ring-offset-neutral-900 <?php echo $view['billing_period'] === 'yearly' ? esc_attr( $view['classes']['toggle_active'] ) : esc_attr( $view['classes']['toggle_inactive'] ); ?>"
+						aria-pressed="<?php echo $view['billing_period'] === 'yearly' ? 'true' : 'false'; ?>"
+					>
+						<?php echo $view['yearly_label']; ?>
+					</button>
+				</div>
+			</div>
+		<?php endif; ?>
+
+		<?php if ( ! empty( $view['plans'] ) ) : ?>
+			<?php $stagger_attrs = sociallane_stagger_attrs( $anim ); ?>
+			<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8" <?php echo $stagger_attrs ? ' ' . $stagger_attrs : ''; ?>>
+				<?php foreach ( $view['plans'] as $plan ) : ?>
+					<?php
+					$card = $plan;
+					$card['classes'] = $view['classes'];
+					$card['billing_period'] = $view['billing_period'];
+					include __DIR__ . '/partials/pricing-card.php';
+					?>
+				<?php endforeach; ?>
+			</div>
+		<?php endif; ?>
+	</div>
+</section>
+
+<?php if ( $view['show_toggle'] && ! empty( $view['plans'] ) ) : ?>
+<script>
+(function() {
+	var section = document.getElementById('<?php echo esc_js( $section_id ); ?>');
+	if (!section) return;
+
+	var activeClasses = <?php echo wp_json_encode( explode( ' ', $view['classes']['toggle_active'] ) ); ?>;
+	var inactiveClasses = <?php echo wp_json_encode( explode( ' ', $view['classes']['toggle_inactive'] ) ); ?>;
+
+	function setButtonState(btn, isActive) {
+		(inactiveClasses || []).forEach(function(c) { if (c) btn.classList.remove(c); });
+		(activeClasses || []).forEach(function(c) { if (c) btn.classList.remove(c); });
+		(isActive ? activeClasses : inactiveClasses).forEach(function(c) { if (c) btn.classList.add(c); });
+	}
+
+	section.querySelectorAll('.sl-pricing-toggle-btn').forEach(function(btn) {
+		btn.addEventListener('click', function() {
+			var period = this.getAttribute('data-period');
+			if (!period) return;
+
+			section.setAttribute('data-billing-period', period);
+
+			section.querySelectorAll('.sl-pricing-toggle-btn').forEach(function(b) {
+				var isActive = b.getAttribute('data-period') === period;
+				b.setAttribute('aria-pressed', isActive ? 'true' : 'false');
+				setButtonState(b, isActive);
+			});
+
+			section.querySelectorAll('.sl-pricing-card').forEach(function(card) {
+				var priceMonthly = card.querySelector('.sl-price-monthly');
+				var priceYearly = card.querySelector('.sl-price-yearly');
+				var annualDetail = card.querySelector('.sl-annual-detail');
+				var annualLink = card.querySelector('.sl-annual-link-wrap');
+
+				if (priceMonthly) priceMonthly.classList.toggle('hidden', period !== 'monthly');
+				if (priceYearly) priceYearly.classList.toggle('hidden', period !== 'yearly');
+				if (annualDetail) annualDetail.classList.toggle('hidden', period !== 'yearly');
+				if (annualLink) annualLink.classList.toggle('hidden', period !== 'yearly');
+			});
+		});
+	});
+})();
+</script>
+<?php endif; ?>
+
+<?php // ========== PRICING TABLE END ========== ?>

package/packages/widgets/sales-dashboard/data/view.php

@@ -0,0 +1,158 @@
+<?php
+/**
+ * Data Preparation: Sales Dashboard
+ *
+ * Builds template-ready $view: header, profile card, competitors card,
+ * speed/source/global feature cards. All theme classes (light + dark) in $view['classes'].
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Prepare view data for Sales Dashboard widget
+ *
+ * @param array  $settings  Raw Elementor settings
+ * @param string $widget_id  Unique widget ID
+ * @return array Template-ready data
+ */
+function prepare_sales_dashboard_view( array $settings, string $widget_id ): array {
+	$show_eyebrow  = ( $settings['show_eyebrow'] ?? 'yes' ) === 'yes';
+	$show_headline = ( $settings['show_headline'] ?? 'yes' ) === 'yes';
+	$eyebrow       = $show_eyebrow ? esc_html( $settings['eyebrow'] ?? '' ) : '';
+	$headline      = $show_headline ? wp_kses_post( $settings['headline'] ?? '' ) : '';
+	$headline_tag  = in_array( $settings['headline_tag'] ?? 'h2', [ 'h1', 'h2', 'h3' ], true )
+		? $settings['headline_tag']
+		: 'h2';
+
+	$show_profile     = ( $settings['show_profile_card'] ?? 'yes' ) === 'yes';
+	$show_competitors = ( $settings['show_competitors_card'] ?? 'yes' ) === 'yes';
+	$show_speed       = ( $settings['show_speed_card'] ?? 'yes' ) === 'yes';
+	$show_source      = ( $settings['show_source_card'] ?? 'yes' ) === 'yes';
+	$show_global      = ( $settings['show_global_card'] ?? 'yes' ) === 'yes';
+
+	$profile = [
+		'show'       => $show_profile,
+		'image_url'  => '',
+		'image_alt'  => '',
+		'name'       => '',
+		'title'      => '',
+		'budget'     => '',
+		'tabs'       => [],
+		'summary'    => [],
+		'insight_eyebrow' => '',
+		'insight_heading' => '',
+		'insight_text'   => '',
+	];
+	if ( $show_profile ) {
+		$img = $settings['profile_image'] ?? [];
+		$profile['image_url'] = ! empty( $img['url'] ) ? esc_url( $img['url'] ) : '';
+		$profile['image_alt'] = esc_attr( $settings['profile_image_alt'] ?? '' );
+		$profile['name']     = esc_html( $settings['profile_name'] ?? '' );
+		$profile['title']    = esc_html( $settings['profile_title'] ?? '' );
+		$profile['budget']   = esc_html( $settings['profile_budget'] ?? '' );
+		foreach ( $settings['profile_tabs'] ?? [] as $tab ) {
+			$profile['tabs'][] = [ 'label' => esc_html( $tab['label'] ?? '' ) ];
+		}
+		foreach ( $settings['profile_summary'] ?? [] as $row ) {
+			$profile['summary'][] = [
+				'label' => esc_html( $row['label'] ?? '' ),
+				'value' => esc_html( $row['value'] ?? '' ),
+			];
+		}
+		$profile['insight_eyebrow']  = esc_html( $settings['profile_insight_eyebrow'] ?? 'INSIGHT' );
+		$profile['insight_heading']  = esc_html( $settings['profile_insight_heading'] ?? '' );
+		$profile['insight_text']     = wp_kses_post( $settings['profile_insight_text'] ?? '' );
+	}
+
+	$competitors = [
+		'show'          => $show_competitors,
+		'title'         => '',
+		'dropdown_label' => '',
+		'filter_badge'  => 0,
+		'rows'          => [],
+		'analysis_eyebrow' => '',
+		'analysis_heading' => '',
+		'analysis_text'   => '',
+	];
+	if ( $show_competitors ) {
+		$competitors['title']          = esc_html( $settings['competitors_title'] ?? 'Competitors' );
+		$competitors['dropdown_label'] = esc_html( $settings['competitors_dropdown_label'] ?? __( 'All competitors', 'sociallane-elements' ) );
+		$competitors['filter_badge']   = max( 0, (int) ( $settings['competitors_filter_badge'] ?? 0 ) );
+		foreach ( $settings['competitors_rows'] ?? [] as $row ) {
+			$competitors['rows'][] = [
+				'competitor_name' => esc_html( $row['competitor_name'] ?? '' ),
+				'stage'           => esc_html( $row['stage'] ?? '' ),
+				'next_meeting'    => esc_html( $row['next_meeting'] ?? '' ),
+				'badge_style'     => in_array( $row['next_meeting_style'] ?? 'later', [ 'tomorrow', 'soon', 'later' ], true )
+					? $row['next_meeting_style']
+					: 'later',
+			];
+		}
+		$competitors['analysis_eyebrow']  = esc_html( $settings['competitors_analysis_eyebrow'] ?? 'ANALYSIS' );
+		$competitors['analysis_heading']  = esc_html( $settings['competitors_analysis_heading'] ?? '' );
+		$competitors['analysis_text']     = wp_kses_post( $settings['competitors_analysis_text'] ?? '' );
+	}
+
+	$feature = function ( string $key ) use ( $settings ) {
+		$show = ( $settings[ 'show_' . $key . '_card' ] ?? 'yes' ) === 'yes';
+		return [
+			'show'    => $show,
+			'eyebrow' => $show ? esc_html( $settings[ $key . '_eyebrow' ] ?? '' ) : '',
+			'heading' => $show ? esc_html( $settings[ $key . '_heading' ] ?? '' ) : '',
+			'text'    => $show ? wp_kses_post( $settings[ $key . '_text' ] ?? '' ) : '',
+		];
+	};
+	$speed  = $feature( 'speed' );
+	$source = $feature( 'source' );
+	$global = $feature( 'global' );
+
+	$animation = sociallane_animation_view_data( $settings, [ 'headline' => true, 'stagger' => true ] );
+	$classes = [
+		'section'           => 'bg-white dark:bg-neutral-900 text-neutral-900 dark:text-neutral-100',
+		'eyebrow'           => 'text-neutral-500 dark:text-neutral-400 text-sm font-semibold uppercase tracking-wider',
+		'headline'          => 'text-neutral-900 dark:text-white font-bold',
+		'card'              => 'bg-white dark:bg-neutral-800 rounded-xl border border-neutral-200 dark:border-neutral-700 shadow-sm overflow-hidden',
+		'card_profile_gradient' => 'bg-gradient-to-r from-amber-50/90 via-rose-50/90 to-violet-100/90 dark:from-neutral-800 dark:via-neutral-700 dark:to-neutral-700',
+		'profile_name'      => 'text-neutral-900 dark:text-white font-bold',
+		'profile_meta'      => 'text-neutral-600 dark:text-neutral-300 text-sm',
+		'profile_tab'       => 'text-neutral-600 dark:text-neutral-400 text-sm border-b-2 border-transparent pb-2',
+		'profile_tab_active'=> 'text-neutral-900 dark:text-white font-medium border-neutral-900 dark:border-white',
+		'summary_label'     => 'text-neutral-500 dark:text-neutral-400 text-sm',
+		'summary_value'     => 'text-neutral-900 dark:text-white text-sm',
+		'insight_eyebrow'   => 'text-neutral-500 dark:text-neutral-400 text-xs font-semibold uppercase tracking-wider',
+		'insight_heading'   => 'text-neutral-900 dark:text-white font-bold',
+		'insight_text'      => 'text-neutral-600 dark:text-neutral-300 text-sm',
+		'table_title'       => 'text-neutral-900 dark:text-white font-bold',
+		'dropdown'          => 'text-neutral-600 dark:text-neutral-300 text-sm border border-neutral-300 dark:border-neutral-600 rounded-md px-3 py-1.5 bg-white dark:bg-neutral-800',
+		'filter_btn'        => 'text-neutral-600 dark:text-neutral-400 border border-neutral-300 dark:border-neutral-600 rounded-md px-3 py-1.5 text-sm',
+		'badge'             => 'text-xs font-medium rounded-full px-2 py-0.5',
+		'badge_tomorrow'    => 'bg-red-500/90 text-white',
+		'badge_soon'        => 'bg-amber-500/90 text-white',
+		'badge_later'       => 'bg-neutral-200 dark:bg-neutral-600 text-neutral-700 dark:text-neutral-200',
+		'table_cell'        => 'text-neutral-900 dark:text-white text-sm',
+		'table_cell_muted'  => 'text-neutral-500 dark:text-neutral-400 text-sm',
+		'feature_eyebrow'   => 'text-neutral-500 dark:text-neutral-400 text-xs font-semibold uppercase tracking-wider',
+		'feature_heading'   => 'text-neutral-900 dark:text-white font-bold',
+		'feature_text'      => 'text-neutral-600 dark:text-neutral-300 text-sm',
+	];
+
+	return [
+		'show_eyebrow'   => $show_eyebrow,
+		'show_headline'  => $show_headline,
+		'eyebrow'        => $eyebrow,
+		'headline'       => $headline,
+		'headline_tag'   => $headline_tag,
+		'profile'        => $profile,
+		'competitors'    => $competitors,
+		'speed'          => $speed,
+		'source'         => $source,
+		'global'         => $global,
+		'classes'        => $classes,
+		'widget_id'      => $widget_id,
+		'animation'      => $animation,
+	];
+}

package/packages/widgets/sales-dashboard/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@sociallane/widget-sales-dashboard",
+  "version": "1.0.0",
+  "private": true,
+  "description": "SocialLane Elements widget: sales-dashboard",
+  "peerDependencies": {
+    "@sociallane/core": "^1.0.0"
+  },
+  "scripts": {
+    "build": "echo \"No widget-specific build\""
+  }
+}