Merge branch 'main' into Live

frontend/src/pages/account/help/faq.json

@@ -1,8 +1,26 @@
 [
-	{ "q": "FAQ #1", "a": "LoremIpsum blablabla" },
-	{ "q": "FAQ #2", "a": "LoremIpsum blablabla" },
-	{ "q": "FAQ #3", "a": "LoremIpsum blablabla" },
-	{ "q": "FAQ #4", "a": "LoremIpsum blablabla" },
-	{ "q": "FAQ #5", "a": "LoremIpsum blablabla" },
-	{ "q": "FAQ #6", "a": "LoremIpsum blablabla" }
-]
+	{
+		"q": "Q#1 - Why is login so slow?",
+		"a": "The website uses \"render.com\" to deploy the backend server. It's a service with great free features, safe, compliant with GDPR and with many integrations. One of the drawbacks is that free tiers (such as this), are suspended after a short period of inactivity, and can take up to 50s to get back up running. Therefore, the first request is always slower because it also needs to \"wake up\" the server."
+	},
+	{
+		"q": "Q#2 - Why can't I delete my account?",
+		"a": "This is probably due to ongoing orders (either in process, or still being delivered). Once all orders are delivered, you are then able to delete your account. You should see a notification warning about it, however if that's not the case please use the support contact bellow to warn me about this error."
+	},
+	{
+		"q": "Q#3 - Missing authorization token",
+		"a": "If you see a notification with this message, that means your session expired and for some reason you were not redirected to the appropriate url. Please click the logout button, or simply log back in from a new tab."
+	},
+	{
+		"q": "Q#4 - Unable to contact support",
+		"a": "While the support channels might be facing some unexpected problem, you can contact me directly trough my Linkedin, or email. I'm deeply sorry for the inconvenience."
+	},
+	{
+		"q": "Q#5 - My order was not delivered",
+		"a": "Thank you for your interest in reading the FAQ. I do regret to inform that this is not a real shop and thus we don't sell tea. Also...with all due respect...what were you expecting to find here?"
+	},
+	{
+		"q": "Q#? - ...processing...proccessing...DONE!",
+		"a": "42"
+	}
+]

frontend/src/pages/auth/SignupForm.tsx

@@ -70,7 +70,7 @@ export default function SignupForm({
 				/>
 
 				<Toggle label="Terms & Conditions" onChange={() => { isAccepted ? setIsAccepted(false) : setShow(true) }} checked={isAccepted} />
-				<Dialog show={show} title="Terms & Conditions" onConfirm={() => { setShow(false); setIsAccepted(true) }} >
+				<Dialog show={show} title="Terms & Conditions" onConfirm={() => { setShow(false); setIsAccepted(true) }} justifyBody>
 					{TermsAndConditions.data}
 				</Dialog>
 

frontend/src/pages/shop/ShopSectionContainer.tsx

@@ -24,8 +24,8 @@ export default function ShopSectionContainer({
 
 	return (
 		<div className={"shop-section__wrapper " + className}>
-			{/* FIX: Add skelleton while loading */}
-			{!items && <p>LOADING... PLZ FIX ME</p>}
+
+			{!items && <div className="shop-section shop-section--loading"><h4>Looking for the best Tea ...</h4></div>}
 
 			{items && (
 				<div ref={containerRef} className={"shop-section"} >

frontend/src/resources/terms-and-conditions.json

@@ -1,3 +1,3 @@
 {
-	"data": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu diam sollicitudin, fringilla turpis sit amet, molestie neque. Proin tempor mauris in rutrum molestie. In aliquam velit tortor, a porttitor erat tempus ac. Nam metus ex, tincidunt a turpis vitae, pulvinar volutpat diam. Nunc eu finibus felis. Suspendisse suscipit erat ligula, sit amet pretium urna imperdiet eget. Duis vehicula sollicitudin turpis, viverra faucibus augue luctus nec. Quisque sollicitudin lobortis magna, ac pellentesque nunc scelerisque elementum. Suspendisse justo nibh, eleifend a congue vel, mollis sed nunc. Donec tincidunt quis odio eget imperdiet.Cras vel viverra dolor. Proin vitae dolor ut nibh scelerisque cursus. Proin ut nulla nibh. Donec nec pharetra lacus. Vestibulum non gravida ligula. Praesent feugiat ex vitae ornare placerat. Praesent sodales felis et laoreet dignissim. Phasellus urna nisl, auctor quis tellus tristique, hendrerit pretium dolor. Ut lorem tortor, convallis et tellus et, consequat pretium leo. Aenean lorem eros, malesuada ut diam at, mattis elementum risus. Vivamus ac dignissim elit. Proin aliquam mauris in nulla convallis, in ultrices libero ultricies. Sed ac egestas diam. Pellentesque sit amet aliquet mauris, in hendrerit enim. Fusce erat leo, condimentum eu ultrices et, dictum sit amet eros. Vestibulum enim neque, suscipit ut consectetur non, sagittis non nisi.Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec vel urna et felis luctus cursus eu in ipsum. Mauris placerat est nulla, nec sodales nunc gravida eget. Aliquam et augue quis dolor congue feugiat. Duis a purus et quam mattis mollis malesuada a lectus. Aenean a eros ultrices, pellentesque lacus tempor, iaculis ligula. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In sit amet facilisis eros, in finibus orci. Nullam turpis nisl, eleifend elementum congue vel, pharetra vel urna. Aliquam consectetur libero eu sem auctor gravida.Aliquam erat volutpat. Duis commodo id turpis eu vehicula. Phasellus mattis nisl in lorem convallis, vitae tempus leo sagittis. Maecenas a ligula at ante mattis tristique eu eget velit. Sed blandit orci a quam dignissim, vitae sodales mauris eleifend. Pellentesque malesuada nulla a nisl pharetra, id hendrerit ante molestie. Sed cursus vestibulum magna, a eleifend erat faucibus eu. Mauris lacinia orci a gravida imperdiet. Mauris porttitor tellus sed quam fringilla, eget pulvinar justo euismod. Praesent fermentum erat id enim vestibulum, nec vestibulum lacus pretium. Suspendisse nec est at ex ultrices imperdiet nec id urna. Nulla facilisi. Vestibulum ultrices dapibus dolor at dapibus. Nunc tincidunt malesuada justo vitae euismod.Nullam mattis eu purus in pretium. Phasellus laoreet eros eu dolor molestie, et ultricies ex fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque non diam ut dui fermentum egestas. Vestibulum gravida maximus aliquet. Nulla sed lacus vel justo finibus rutrum viverra id nisl. Nunc interdum nisi non pellentesque mollis. Aliquam faucibus, orci in malesuada tempus, odio nisl ullamcorper est, non placerat tortor magna at arcu. Ut ac libero eleifend, bibendum nibh tincidunt, facilisis odio. Nulla at tortor nunc."
-}
+	"data": "These Terms and Conditions govern the use of the current project (the \"Tea-Shop\" website) and the services offered by Rafael Lopes (the \"Provider\"). By accessing or using the Website, you agree to be bound by these Terms and Conditions.\n Account Creation\nTo access certain features of the Website, you may be required to create an account. You agree to provide accurate and complete information during the registration process. You are responsible for maintaining the confidentiality of your account credentials and for any activities that occur under your account.\nData Privacy\nWe collect certain personal information from you, including but not limited to your email address, username, password, billing information, shipping information, and profile picture. We use this information to provide our services, process orders, and communicate with you.\n-- We DO NOT willingly share anything with any third party services. --\nYou have the right to request the deletion of your personal information. However, we cannot guarantee that all data will be completely and irrevocably deleted.\nDisclaimer of Liability\nThe Website and its content are provided on an \"as is\" basis without warranties of any kind, either express or implied. The Provider disclaims all liability for any damages, losses, or claims arising from the use of the Website or the services offered.\nThe Provider is not responsible for any data breaches or leaks that may occur on the server.\nIndemnification\nYou agree to indemnify and hold harmless the Provider from any claims, damages, liabilities, or costs arising from your use of the Website or your violation of these Terms and Conditions."
+}

frontend/src/sass/components/misc/_image.scss

@@ -7,8 +7,8 @@
 	place-content: center;
 	place-items: center;
 	&__img {
-		width: 100%;
-		height: 100%;
+		max-width: 100%;
+		aspect-ratio: square;
 
 		&--placeholder,
 		&--error {

frontend/src/sass/pages/_shop.scss

@@ -1,7 +1,7 @@
 @use "../base/colors" as colors;
 @use "../utils/layout" as layout;
 @use "../utils/media-queries" as media-query;
-
+@use "../utils/animations" as animations;
 .shop-page {
 	display: flex;
 	flex-direction: column;
@@ -46,6 +46,13 @@
 	padding: 1em;
 	gap: 1em;
 
+	&--loading {
+		// background: radial-gradient(transparent, colors.$bg);
+		place-content: center;
+		place-items: center;
+		@include animations.loading-animation(4);
+	}
+
 	@include media-query.can-hover() {
 		&:has(> *:hover) > * {
 			transition: all 0.5s ease-out !important;

frontend/src/sass/utils/_animations.scss

@@ -5,8 +5,8 @@
 	}
 }
 
-@mixin loading-animation() {
-	animation: loading 2s cubic-bezier(0.8, 0.2, 0.1, 0.8) both infinite;
+@mixin loading-animation($s:2) {
+	animation: loading #{$s}s cubic-bezier(0.8, 0.2, 0.1, 0.8) both infinite;
 }
 
 @keyframes onLoad {