@ikas/component-cli 0.103.0 → 0.105.0

package/templates/create-full/src/components/Login/components/LoginForm/index.tsx

@@ -0,0 +1,181 @@
+import {
+  customerStore,
+  setLoginFormEmail,
+  setLoginFormPassword,
+  submitLoginForm,
+  socialLogin,
+  Router,
+  getLoginForm,
+} from "@ikas/bp-storefront";
+import { observer } from "@ikas/component-utils";
+
+import { Props } from "../../types";
+import Button from "../../../../sub-components/Button";
+import Input from "../../../../sub-components/Input";
+import FormItem from "../../../../sub-components/FormItem";
+import SocialLoginButton from "../../../../sub-components/SocialLoginButton";
+import { GoogleSVG, FacebookSVG } from "../../../../sub-components/icons";
+
+interface LoginFormProps extends Props {
+  loginForm: ReturnType<typeof getLoginForm>;
+}
+
+const LoginForm = observer(function LoginForm({
+  loginForm,
+  title = "Giriş Yap",
+  subtitle = "Hesabınıza giriş yaparak siparişlerinizi\ntakip edebilir ve alışverişe devam edebilirsiniz.",
+  emailLabel = "E-posta",
+  emailPlaceholder = "ornek@email.com",
+  passwordLabel = "Şifre",
+  passwordPlaceholder = "Şifrenizi girin",
+  forgotPasswordText = "Parolamı unuttum",
+  submitButtonText = "Giriş Yap",
+  submittingButtonText = "Giriş yapılıyor...",
+  createAccountText = "Yeni hesap oluştur",
+  showGoogleLogin = false,
+  showFacebookLogin = false,
+  googleButtonText = "Google ile giriş yap",
+  facebookButtonText = "Facebook ile giriş yap",
+  dividerText = "veya",
+}: LoginFormProps) {
+  const showSocialLogin = showGoogleLogin || showFacebookLogin;
+
+  const handleSubmit = async (e: Event) => {
+    e.preventDefault();
+    const success = await submitLoginForm(loginForm);
+    if (success) {
+      Router.navigateToPage("ACCOUNT");
+    }
+  };
+
+  return (
+    <div className="login__container">
+      <div className="login__header">
+        <h1 className="login__title text-xl-medium md:display-xs-medium">
+          {title}
+        </h1>
+        <div
+          className="login__subtitle text-sm-regular"
+          dangerouslySetInnerHTML={{ __html: subtitle }}
+        />
+      </div>
+
+      {loginForm.isFailure && loginForm.responseMessage && (
+        <div className="login__error-banner text-sm-regular">
+          {loginForm.responseMessage}
+        </div>
+      )}
+
+      {showSocialLogin && (
+        <div className="login__social">
+          {showGoogleLogin && (
+            <SocialLoginButton
+              icon={<GoogleSVG />}
+              onClick={() => socialLogin(customerStore, "google")}
+            >
+              {googleButtonText}
+            </SocialLoginButton>
+          )}
+          {showFacebookLogin && (
+            <SocialLoginButton
+              icon={<FacebookSVG />}
+              onClick={() => socialLogin(customerStore, "facebook")}
+            >
+              {facebookButtonText}
+            </SocialLoginButton>
+          )}
+        </div>
+      )}
+
+      {showSocialLogin && (
+        <div className="login__divider">
+          <span className="login__divider-line" />
+          <span className="login__divider-text text-xs-regular">
+            {dividerText}
+          </span>
+          <span className="login__divider-line" />
+        </div>
+      )}
+
+      <form className="login__form" onSubmit={handleSubmit}>
+        <FormItem
+          label={emailLabel}
+          htmlFor="login-email"
+          status={loginForm.email?.hasError ? "error" : "default"}
+          helper={
+            loginForm.email?.hasError ? loginForm.email.message : undefined
+          }
+        >
+          <Input
+            id="login-email"
+            type="email"
+            name="email"
+            autoComplete="email"
+            placeholder={emailPlaceholder}
+            value={loginForm.email?.value ?? ""}
+            onInput={(e: Event) =>
+              setLoginFormEmail(loginForm, (e.target as HTMLInputElement).value)
+            }
+          />
+        </FormItem>
+
+        <FormItem
+          label={passwordLabel}
+          htmlFor="login-password"
+          status={loginForm.password?.hasError ? "error" : "default"}
+          helper={
+            loginForm.password?.hasError
+              ? loginForm.password.message
+              : undefined
+          }
+        >
+          <Input
+            id="login-password"
+            password
+            name="current-password"
+            autoComplete="current-password"
+            placeholder={passwordPlaceholder}
+            value={loginForm.password?.value ?? ""}
+            onInput={(e: Event) =>
+              setLoginFormPassword(
+                loginForm,
+                (e.target as HTMLInputElement).value,
+              )
+            }
+          />
+        </FormItem>
+
+        <div className="login__options">
+          <button
+            type="button"
+            className="login__forgot text-sm-regular"
+            onClick={() => Router.navigateToPage("FORGOT_PASSWORD")}
+          >
+            {forgotPasswordText}
+          </button>
+        </div>
+
+        <Button
+          variant="primary"
+          size="s"
+          className="login__submit-btn"
+          disabled={loginForm.isSubmitting}
+        >
+          {loginForm.isSubmitting ? submittingButtonText : submitButtonText}
+        </Button>
+      </form>
+
+      <div className="login__footer">
+        <button
+          type="button"
+          className="login__create-account text-sm-regular"
+          onClick={() => Router.navigateToPage("REGISTER")}
+        >
+          {createAccountText}
+        </button>
+      </div>
+    </div>
+  );
+});
+
+export default LoginForm;

package/templates/create-full/src/components/Login/index.tsx

@@ -0,0 +1,37 @@
+import {
+  customerStore,
+  initLoginForm,
+  Router,
+  getLoginForm,
+  handleSocialLogin,
+} from "@ikas/bp-storefront";
+import { useRedirectIfLoggedIn } from "../../hooks/useRedirectIfLoggedIn";
+
+import { Props } from "./types";
+import LoginForm from "./components/LoginForm";
+import PageLoader from "../../sub-components/PageLoader";
+
+export function Login(props: Props) {
+  const loginForm = getLoginForm(customerStore);
+
+  const isChecking = useRedirectIfLoggedIn(() => {
+    initLoginForm(loginForm);
+    handleSocialLogin(customerStore).then((result) => {
+      if (result.status === "success") {
+        Router.navigateToPage("ACCOUNT");
+      }
+    });
+  });
+
+  if (isChecking) return <PageLoader />;
+
+  return (
+    <section className="login">
+      <div className="login__wrapper kombos-container">
+        <LoginForm loginForm={loginForm} {...props} />
+      </div>
+    </section>
+  );
+}
+
+export default Login;

package/templates/create-full/src/components/Login/styles.css

@@ -0,0 +1,129 @@
+.login {
+  width: 100%;
+}
+
+.login__wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.login__container {
+  width: 100%;
+  max-width: 29rem;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.login__header {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  text-align: center;
+}
+
+.login__title {
+  color: var(--kombos-gray-900);
+  margin: 0;
+}
+
+.login__subtitle {
+  color: var(--kombos-gray-700);
+  margin: 0;
+  white-space: pre-line;
+}
+
+.login__error-banner {
+  padding: 0.75rem 1rem;
+  background: rgba(255, 60, 72, 0.08);
+  border: 1px solid var(--kombos-error);
+  border-radius: 6px;
+  color: var(--kombos-error);
+}
+
+/* Social Login */
+.login__social {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+/* Divider */
+.login__divider {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.login__divider-line {
+  flex: 1;
+  height: 1px;
+  background: var(--kombos-gray-200);
+}
+
+.login__divider-text {
+  color: var(--kombos-gray-500);
+  white-space: nowrap;
+}
+
+.login__form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.login__options {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.login__forgot {
+  background: none;
+  border: none;
+  padding: 0;
+  color: var(--kombos-gray-900);
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.login__forgot:hover {
+  text-decoration: underline;
+}
+
+.login__submit-btn {
+  width: 100%;
+}
+
+.login__footer {
+  text-align: center;
+}
+
+.login__create-account {
+  background: none;
+  border: none;
+  padding: 0;
+  color: var(--kombos-gray-900);
+  cursor: pointer;
+}
+
+.login__create-account:hover {
+  text-decoration: underline;
+}
+
+@media (min-width: 768px) {
+  .login__wrapper {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .login__wrapper {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+  }
+}

package/templates/create-full/src/components/Login/types.ts

@@ -0,0 +1,18 @@
+// This file is auto-generated — do not edit manually.
+export interface Props {
+  title?: string;
+  subtitle?: string;
+  emailLabel?: string;
+  emailPlaceholder?: string;
+  passwordLabel?: string;
+  passwordPlaceholder?: string;
+  submitButtonText?: string;
+  submittingButtonText?: string;
+  forgotPasswordText?: string;
+  createAccountText?: string;
+  showGoogleLogin?: boolean;
+  googleButtonText?: string;
+  showFacebookLogin?: boolean;
+  facebookButtonText?: string;
+  dividerText?: string;
+}

package/templates/create-full/src/components/Navbar/components/CartSidebar/index.tsx

@@ -0,0 +1,203 @@
+import { useEffect, useState, useCallback } from "preact/hooks";
+import { observer } from "@ikas/component-utils";
+import { useScrollLock } from "../../../../hooks/useScrollLock";
+import { cx } from "../../../../utils/cx";
+import {
+  XSVG,
+  Package1SVG,
+  Handbag1SVG,
+} from "../../../../sub-components/icons";
+import Button from "../../../../sub-components/Button";
+import {
+  cartStore,
+  hasCart,
+  getIkasOrderTotalItemCount,
+  getIkasOrderFormattedTotalFinalPrice,
+  getOrderAdjustmentDisplayName,
+  getOrderAdjustmentFormattedAmount,
+  removeItem,
+  getCheckoutUrlFromCartStore,
+  IkasOrderLineItem,
+  Router,
+} from "@ikas/bp-storefront";
+import type { AspectRatio, ObjectFit } from "../../../../global-types";
+import CartItem from "../../../../sub-components/CartItem";
+
+interface Props {
+  cartTitle: string;
+  emptyCartText: string;
+  checkoutButtonText: string;
+  viewCartButtonText: string;
+  totalText: string;
+  freeShippingText: string;
+  emptyCartButtonText: string;
+  imageAspectRatio?: AspectRatio;
+  imageObjectFit?: ObjectFit;
+  onClose: () => void;
+}
+
+const CartSidebar = observer(function CartSidebar({
+  cartTitle,
+  emptyCartText,
+  checkoutButtonText,
+  viewCartButtonText,
+  totalText,
+  freeShippingText,
+  emptyCartButtonText,
+  imageAspectRatio,
+  imageObjectFit,
+  onClose,
+}: Props) {
+  const [open, setOpen] = useState(false);
+
+  useScrollLock();
+
+  useEffect(() => {
+    requestAnimationFrame(() => setOpen(true));
+  }, []);
+
+  const handleClose = useCallback(() => {
+    setOpen(false);
+    setTimeout(onClose, 300);
+  }, [onClose]);
+
+  const cart = cartStore.cart;
+  const isCartLoading = cartStore.isCartLoading;
+  const cartHasItems = hasCart(cartStore);
+  const itemCount = cart ? getIkasOrderTotalItemCount(cart) : 0;
+  const lineItems = cart?.orderLineItems ?? [];
+  const adjustments = cart?.orderAdjustments ?? [];
+
+  const handleRemove = async (item: IkasOrderLineItem) => {
+    await removeItem(item);
+  };
+
+  return (
+    <div
+      className={cx("kombos-cart-overlay", open && "kombos-cart-overlay--open")}
+    >
+      <div className="kombos-cart-backdrop" onClick={handleClose} />
+      <aside className="kombos-cart-sidebar">
+        {/* Header */}
+        <div className="kombos-cart-sidebar__head">
+          <h3 className="kombos-cart-sidebar__title text-md-medium">
+            {cartTitle} ({itemCount})
+          </h3>
+          <button
+            className="kombos-cart-sidebar__close"
+            onClick={handleClose}
+            aria-label="Close"
+          >
+            <XSVG />
+          </button>
+        </div>
+
+        {/* Free Shipping Banner */}
+        {freeShippingText && (
+          <div className="kombos-cart-sidebar__banner">
+            <Package1SVG />
+            <span className="text-xs-semibold">{freeShippingText}</span>
+          </div>
+        )}
+
+        {/* Loading */}
+        {isCartLoading && (
+          <div className="kombos-cart-sidebar__loading text-sm-regular" />
+        )}
+
+        {/* Empty State */}
+        {!cartHasItems && !isCartLoading && (
+          <div className="kombos-cart-sidebar__empty">
+            <Handbag1SVG />
+            <p className="kombos-cart-sidebar__empty-text text-md-medium">
+              {emptyCartText}
+            </p>
+            <Button
+              variant="primary"
+              size="s"
+              className="kombos-cart-sidebar__empty-btn"
+              onClick={handleClose}
+            >
+              {emptyCartButtonText}
+            </Button>
+          </div>
+        )}
+
+        {/* Cart Items */}
+        {cartHasItems && (
+          <div className="kombos-cart-sidebar__items">
+            {lineItems.map((item) => (
+              <CartItem
+                key={item.id}
+                item={item}
+                onRemove={handleRemove}
+                aspectRatio={imageAspectRatio}
+                objectFit={imageObjectFit}
+              />
+            ))}
+          </div>
+        )}
+
+        {/* Adjustments */}
+        {adjustments.length > 0 && (
+          <div className="kombos-cart-sidebar__adjustments">
+            {adjustments.map((adj: any, i: number) => (
+              <div
+                key={i}
+                className="kombos-cart-sidebar__adj-row text-sm-regular"
+              >
+                <span>{getOrderAdjustmentDisplayName(adj)}</span>
+                <span className="kombos-cart-sidebar__adj-amount text-sm-medium">
+                  {getOrderAdjustmentFormattedAmount(adj)}
+                </span>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {/* Footer */}
+        {cartHasItems && cart && (
+          <div className="kombos-cart-sidebar__footer">
+            <div className="kombos-cart-sidebar__total text-md-semibold">
+              <span>{totalText}</span>
+              <span>{getIkasOrderFormattedTotalFinalPrice(cart)}</span>
+            </div>
+            <div className="kombos-cart-sidebar__footer-buttons">
+              <a
+                href="/cart"
+                className="kombos-cart-sidebar__view-cart-link"
+                onClick={(e: Event) => {
+                  e.preventDefault();
+                  handleClose();
+                  Router.navigateToPage("CART");
+                }}
+              >
+                <Button
+                  variant="secondary"
+                  size="s"
+                  className="kombos-cart-sidebar__view-cart-btn"
+                >
+                  {viewCartButtonText}
+                </Button>
+              </a>
+              <a
+                href={getCheckoutUrlFromCartStore(cartStore)}
+                className="kombos-cart-sidebar__checkout"
+              >
+                <Button
+                  variant="primary"
+                  size="s"
+                  className="kombos-cart-sidebar__checkout-btn"
+                >
+                  {checkoutButtonText}
+                </Button>
+              </a>
+            </div>
+          </div>
+        )}
+      </aside>
+    </div>
+  );
+});
+
+export default CartSidebar;