Rewritten account subscription

aimeos · Jan 17, 2022 · 43699be · 43699be
1 parent 2259b73
commit 43699be
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 55 deletions.
diff --git a/client/html/src/Client/Html/Account/Subscription/Detail/Standard.php b/client/html/src/Client/Html/Account/Subscription/Detail/Standard.php
@@ -228,7 +228,7 @@ public function data( \Aimeos\MW\View\Iface $view, array &$tags = [], string &$e
 				}
 			}
 
-			$view->detailItem = $item;
+			$view->subscriptionItem = $item;
 			$view->summaryBasket = $basket;
 			$view->summaryTaxRates = $this->getTaxRates( $basket );
 			$view->summaryNamedTaxes = $this->getNamedTaxes( $basket );

diff --git a/client/html/templates/account/subscription/detail-body-standard.php b/client/html/templates/account/subscription/detail-body-standard.php
@@ -5,6 +5,16 @@
  * @copyright Aimeos (aimeos.org), 2018-2022
  */
 
+/* Available data:
+ * - subscriptionItem : Subscription item
+ * - summaryBasket : Basket
+ * - summaryTaxRates : Prices by tax rates
+ * - summaryNamedTaxes : Prices by tax names
+ * - summaryCostsDelivery : Delivery costs
+ * - summaryCostsPayment : Payment costs
+ */
+
+
 $enc = $this->encoder();
 
 
@@ -97,12 +107,12 @@
 
 
 	<div class="button-group">
-		<a class="btn btn-close" href="<?= $enc->attr( $this->link( 'client/html/account/subscription/url' ) ) ?>">
+		<a class="btn btn-secondary close" href="<?= $enc->attr( $this->link( 'client/html/account/subscription/url' ) ) ?>">
 			<?= $enc->html( $this->translate( 'client', 'Close' ), $enc::TRUST ) ?>
 		</a>
-		<?php if( $this->detailItem->getDateEnd() == null ) : ?>
-			<?php $params = ['sub_action' => 'cancel', 'sub_id' => $this->detailItem->getId()] ?>
-			<a class="btn btn-primary" href="<?= $enc->attr( $this->link( 'client/html/account/subscription/url', $params ) ) ?>">
+		<?php if( $this->subscriptionItem->getDateEnd() == null ) : ?>
+			<?php $params = ['sub_action' => 'cancel', 'sub_id' => $this->subscriptionItem->getId()] ?>
+			<a class="btn btn-primary" href="<?= $enc->attr( $this->link( 'client/html/account/subscription/url', $params, ['account-subscription'] ) ) ?>">
 				<?= $enc->html( $this->translate( 'client', 'Cancel' ), $enc::TRUST ) ?>
 			</a>
 		<?php endif ?>

diff --git a/client/html/templates/account/subscription/lists-body-standard.php b/client/html/templates/account/subscription/lists-body-standard.php
@@ -85,14 +85,15 @@
 
 <?php if( !$this->get( 'listsItems', map() )->isEmpty() ) : ?>
 
-	<div class="account-subscription-list">
+	<div id="account-subscription" class="account-subscription-list">
 		<h1 class="header"><?= $enc->html( $this->translate( 'client', 'Subscriptions' ), $enc::TRUST ) ?></h1>
 
 		<div class="subscription-list">
 
 			<?php foreach( $this->get( 'listsItems', [] ) as $id => $item ) : ?>
 
-				<div class="subscription-item row">
+				<div class="subscription-item row"
+					data-url="<?= $enc->attr( $this->link( 'client/html/account/subscription/url', ['sub_action' => 'detail', 'sub_id' => $id] ) ) ?>">
 
 					<div class="col-12">
 						<h2 class="subscription-basic">
@@ -161,10 +162,8 @@
 					</div>
 
 					<div class="action col-md-2">
-						<?php $params = ['sub_action' => 'detail', 'sub_id' => $id] ?>
-						<a class="btn btn-outline" href="<?= $enc->attr( $this->link( 'client/html/account/subscription/url', $params ) ) ?>">
-							<?= $enc->html( $this->translate( 'client', 'Show' ) ) ?>
-						</a>
+						<a class="btn btn-secondary show" href="#"><?= $enc->html( $this->translate( 'client', 'Show' ) ) ?></a>
+						<a class="btn btn-secondary close hidden" href="#"><?= $enc->html( $this->translate( 'client', 'Close' ) ) ?></a>
 					</div>
 				</div>
 

diff --git a/client/html/tests/Client/Html/Account/Subscription/Lists/StandardTest.php b/client/html/tests/Client/Html/Account/Subscription/Lists/StandardTest.php
@@ -41,7 +41,7 @@ public function testBody()
 
 		$output = $this->object->body();
 
-		$this->assertStringContainsString( '<div class="account-subscription-list">', $output );
+		$this->assertStringContainsString( '<div id="account-subscription" class="account-subscription-list">', $output );
 		$this->assertRegExp( '#<div class="subscription-item#', $output );
 		$this->assertRegExp( '#<h2 class="subscription-basic.*<span class="value[^<]+</span>.*</h2>#smU', $output );
 		$this->assertRegExp( '#<div class="subscription-interval.*<span class="value[^<]+</span>.*</div>#smU', $output );

diff --git a/client/html/themes/default/account-subscription.css b/client/html/themes/default/account-subscription.css
@@ -22,7 +22,7 @@
 	border: 1px solid #D0D0D0;
 	border-color: var(--ai-light, #D0D0D0);
 	padding: 1rem;
-	margin: 1rem 0;
+	margin: 1rem;
 }
 
 .account-subscription-list .name:after {
@@ -54,15 +54,6 @@
 	text-decoration: underline;
 }
 
-.account-subscription-detail .modify {
-	float: right;
-	margin: 0 1rem;
-}
-
-[dir="rtl"] .account-subscription-detail .modify {
-	float: left;
-}
-
 .account-subscription-detail h2 {
 	margin: 0.5rem 0;
 }
@@ -73,7 +64,6 @@
 	margin: 0;
 }
 
-
 .account-subscription-detail .attr-item .name,
 .account-subscription-detail .attr-item .value {
 	min-width: 0;

diff --git a/client/html/themes/default/account-subscription.js b/client/html/themes/default/account-subscription.js
@@ -6,45 +6,35 @@ AimeosAccountSubscription = {
 	/**
 	 * Shows subscription details without page reload
 	 */
-	setupDetailShow: function() {
+	onToggleDetail() {
 
-		$(".account-subscription .subscription-item").on("click", function() {
+		$(".account-subscription").on("click", ".subscription-item .btn.show, .subscription-item .btn.close", (ev) => {
 
-			var target = $(this).parents(".subscription-item");
-			var details = $(".account-subscription-detail", target);
+			const target = $(ev.currentTarget).closest(".subscription-item");
+			const details = $(".account-subscription-detail", target);
 
 			if(details.length === 0) {
 
-				fetch($(this).find('.action a.btn').attr("href")).then(response => {
+				fetch(target.data("url")).then(response => {
 					return response.text();
 				}).then(data => {
-					var doc = document.createElement("html");
-					doc.innerHTML = data;
-
-					var node = $(".account-subscription-detail", doc);
-					node.css("display", "none");
-					target.append(node);
-					slideDown(node.get(0), 300);
+					const doc = $("<html/>").html(data);
+					const node = $(".account-subscription-detail", doc);
+
+					if(node.length) {
+						node.css("display", "none");
+						target.append(node);
+						slideDown(node[0], 300);
+					}
 				});
 
 			} else {
-				slideToggle(details.get(0), 300);
+				slideToggle(details[0], 300);
 			}
 
-			return false;
-		});
-	},
-
+			$(".btn.show", target).toggleClass('hidden');
+			$(".btn.close", target).toggleClass('hidden');
 
-	/**
-	 * Closes the order details without page reload
-	 */
-	setupDetailClose: function() {
-
-		$(".account-subscription .subscription-item").on("click", ".btn-close", function() {
-			$(".account-subscription-detail", $(this).parents(".subscription-item")).each(function() {
-				slideUp(this, 300);
-			});
 			return false;
 		});
 	},
@@ -53,14 +43,12 @@ AimeosAccountSubscription = {
 	/**
 	 * Initializes the account subscription actions
 	 */
-	init: function() {
-
-		this.setupDetailShow();
-		this.setupDetailClose();
+	init() {
+		this.onToggleDetail();
 	}
 };
 
 
-$(function() {
+$(() => {
 	AimeosAccountSubscription.init();
 });
diff --git a/client/html/themes/default/aimeos.css b/client/html/themes/default/aimeos.css
@@ -6,7 +6,7 @@
  */
 
 
- @font-face {
+@font-face {
 	font-family: 'Roboto Condensed';
 	font-style: normal;
 	font-weight: 400;
@@ -102,6 +102,10 @@ img {
 	text-align: start;
 }
 
+.aimeos .hidden {
+	display: none !important;
+}
+
 .aimeos .content-block {
 	margin: 4rem 0;
 }