feat(app): Functionality to disable new account creation visually (#122)

joelmeaders · Dec 10, 2024 · bdd7c6e · bdd7c6e
1 parent eacade8
commit bdd7c6e
Show file tree

Hide file tree

Showing 11 changed files with 66 additions and 16 deletions.
diff --git a/santashop-app/src/app/core/services/app-state.service.ts b/santashop-app/src/app/core/services/app-state.service.ts
@@ -79,6 +79,11 @@ export class AppStateService implements OnDestroy {
 		takeUntil(this.destroy$),
 	);
 
+	public readonly createAccountEnabled$ = this.publicDoc$.pipe(
+		map((value) => value.createAccountEnabled),
+		takeUntil(this.destroy$),
+	);
+
 	public readonly appClosureSubscription = combineLatest([
 		this.isMaintenanceModeEnabled$,
 		this.shopClosedWeather$,

diff --git a/santashop-app/src/app/features/v2/sign-in/sign-in.page.html b/santashop-app/src/app/features/v2/sign-in/sign-in.page.html
@@ -69,6 +69,7 @@
 					</ion-card-content>
 
 					<div class="ion-text-center es-mg-top-lg">
+						@if ((createAccountEnabled$ | async) === true) {
 						<ion-button
 							fill="clear"
 							color="tertiary"
@@ -77,6 +78,7 @@
 							{{ "COMMON.CREATE_ACCOUNT" | translate }}
 						</ion-button>
 						<br />
+						}
 						<ion-button
 							fill="clear"
 							color="tertiary"

diff --git a/santashop-app/src/app/features/v2/sign-in/sign-in.page.ts b/santashop-app/src/app/features/v2/sign-in/sign-in.page.ts
@@ -22,6 +22,8 @@ import {
 } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
 import { arrowBackSharp } from 'ionicons/icons';
+import { AppStateService } from '../../../core';
+import { AsyncPipe } from '@angular/common';
 
 @Component({
 	selector: 'app-sign-in',
@@ -31,6 +33,7 @@ import { arrowBackSharp } from 'ionicons/icons';
 	providers: [SignInPageService],
 	standalone: true,
 	imports: [
+		AsyncPipe,
 		IonContent,
 		IonGrid,
 		IonRow,
@@ -48,26 +51,18 @@ import { arrowBackSharp } from 'ionicons/icons';
 		RouterLink,
 		ReactiveFormsModule,
 		TranslateModule,
-		IonContent,
-		IonGrid,
-		IonRow,
-		IonCol,
-		IonCard,
-		IonCardHeader,
-		IonButton,
-		IonIcon,
-		IonLabel,
-		IonCardTitle,
-		IonCardContent,
-		IonList,
-		IonItem,
-		IonInput,
 	],
 })
 export class SignInPage {
 	public readonly form = this.viewService.form;
 
-	constructor(private readonly viewService: SignInPageService) {
+	public readonly createAccountEnabled$ =
+		this.appStateService.createAccountEnabled$;
+
+	constructor(
+		private readonly viewService: SignInPageService,
+		private readonly appStateService: AppStateService,
+	) {
 		addIcons({ arrowBackSharp });
 	}
 

diff --git a/santashop-app/src/app/features/v2/sign-up/sign-up.page.html b/santashop-app/src/app/features/v2/sign-up/sign-up.page.html
@@ -1,5 +1,6 @@
 <ion-content color="light">
 	<ion-grid class="height-max ion-no-padding ion-no-margin">
+		@if ((createAccountEnabled$ | async) === true) {
 		<ion-row
 			class="height-max ion-align-items-center ion-justify-content-center"
 		>
@@ -238,5 +239,14 @@
 				</ion-card>
 			</ion-col>
 		</ion-row>
+		} @else {
+		<ion-row>
+			<ion-col size="12" class="ion-text-center es-pd-top-xxl">
+				<div class="alert">
+					<p>{{ "SIGNUP.CREATE_ACCOUNT_DISABLED" | translate }}</p>
+				</div>
+			</ion-col>
+		</ion-row>
+		}
 	</ion-grid>
 </ion-content>
diff --git a/santashop-app/src/app/features/v2/sign-up/sign-up.page.ts b/santashop-app/src/app/features/v2/sign-up/sign-up.page.ts
@@ -78,6 +78,9 @@ export class SignUpPage {
 
 	@ViewChild('firstName') private readonly firstName?: HTMLIonInputElement;
 
+	public readonly createAccountEnabled$ =
+		this.appStateService.createAccountEnabled$;
+
 	protected readonly closedSubscription =
 		this.appStateService.isRegistrationEnabled$
 			.pipe(

diff --git a/santashop-app/src/app/home/home.page.html b/santashop-app/src/app/home/home.page.html
@@ -24,6 +24,7 @@ <h1>
 		</ion-row>
 
 		<ion-row>
+			@if (createAccountEnabled$ | async) {
 			<ion-col size="12" class="ion-text-center">
 				<p>{{ "SIGNUP.NEW_ACCOUNT_NOTICE" | translate }}</p>
 				<ion-button
@@ -35,6 +36,13 @@ <h1>
 					<strong>{{ "HOME.CREATE_ACCOUNT" | translate }}</strong>
 				</ion-button>
 			</ion-col>
+			} @else {
+			<ion-col size="12" class="ion-text-center es-pd-top-xxl">
+				<div class="alert">
+					<p>{{ "SIGNUP.CREATE_ACCOUNT_DISABLED" | translate }}</p>
+				</div>
+			</ion-col>
+			}
 
 			<ion-col size="12" class="ion-text-center es-pd-top-xxl">
 				<p>{{ "HOME.SIGN_IN_INST" | translate }}</p>

diff --git a/santashop-app/src/app/home/home.page.ts b/santashop-app/src/app/home/home.page.ts
@@ -1,4 +1,9 @@
-import { ChangeDetectionStrategy, Component, OnDestroy } from '@angular/core';
+import {
+	ChangeDetectionStrategy,
+	Component,
+	inject,
+	OnDestroy,
+} from '@angular/core';
 import { Subject } from 'rxjs';
 import { environment } from '../../environments/environment';
 
@@ -16,6 +21,8 @@ import {
 } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
 import { logoFacebook, logoInstagram } from 'ionicons/icons';
+import { AppStateService } from '../core';
+import { AsyncPipe } from '@angular/common';
 
 @Component({
 	selector: 'app-home',
@@ -24,6 +31,7 @@ import { logoFacebook, logoInstagram } from 'ionicons/icons';
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	standalone: true,
 	imports: [
+		AsyncPipe,
 		IonContent,
 		IonGrid,
 		IonRow,
@@ -44,11 +52,14 @@ import { logoFacebook, logoInstagram } from 'ionicons/icons';
 	],
 })
 export class HomePage implements OnDestroy {
+	private readonly appState = inject(AppStateService);
 	private readonly destroy$ = new Subject<void>();
 
 	public readonly environmentName = `${environment.name}_${environment.label}`;
 	public readonly environmentVersion = environment.version;
 
+	public readonly createAccountEnabled$ = this.appState.createAccountEnabled$;
+
 	constructor() {
 		addIcons({ logoFacebook, logoInstagram });
 	}

diff --git a/santashop-app/src/assets/i18n/en.json b/santashop-app/src/assets/i18n/en.json
@@ -50,6 +50,7 @@
 		"SIGNING_IN": "Signing in..."
 	},
 	"SIGNUP": {
+		"CREATE_ACCOUNT_DISABLED": "We're full and cannot accept any more sign-ups right now. Please check our Facebook page for updates if any spots open up.",
 		"NEW_ACCOUNT_NOTICE": "All shoppers must create a new account for 2024, even if you have shopped with us in the past.",
 		"HAVE_ACCOUNT": "Already have an account?",
 		"TITLE1": "Set up your account",

diff --git a/santashop-app/src/assets/i18n/es.json b/santashop-app/src/assets/i18n/es.json
@@ -50,6 +50,7 @@
 		"SIGNING_IN": "Iniciar sesión..."
 	},
 	"SIGNUP": {
+		"CREATE_ACCOUNT_DISABLED": "Estamos llenos y no podemos aceptar más inscripciones en este momento. Consulte nuestra página de Facebook para obtener actualizaciones si se abren lugares.",
 		"NEW_ACCOUNT_NOTICE": "Todos los compradores deben crear una nueva cuenta para 2024, incluso si han comprado con nosotros en el pasado.",
 		"HAVE_ACCOUNT": "¿Ya tienes una cuenta?",
 		"TITLE1": "Configura tu cuenta",

diff --git a/santashop-app/src/global.scss b/santashop-app/src/global.scss
@@ -260,3 +260,16 @@ $es-direction-definitions: (top, bottom, right, left) !default;
 		box-shadow: rgb(255, 172, 94) 0px 20px 30px -10px;
 	}
 }
+
+.alert {
+	border-radius: 12px;
+	padding-inline: 16px;
+	padding-block: 12px;
+	width: auto;
+	max-width: 600px;
+	justify-self: center;
+	background-color: rgba(var(--ion-color-warning-rgb), 0.25);
+	border-color: var(--ion-color-warning);
+	border-width: 1px;
+	border-style: solid;
+}
diff --git a/santashop-models/src/lib/parameters.ts b/santashop-models/src/lib/parameters.ts
@@ -4,6 +4,7 @@ export interface PublicParameters {
 	registrationEnabled: boolean;
 	maintenanceModeEnabled: boolean;
 	weatherModeEnabled: boolean;
+	createAccountEnabled: boolean;
 	messageEn: string;
 	messageEs: string;
 	admin: {