@ikas/component-cli 0.103.0 → 0.105.0

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

@@ -0,0 +1,10 @@
+// This file is auto-generated — do not edit manually.
+export interface Props {
+  cookieContent: string;
+  buttonText?: string;
+  position?: boolean;
+  showCloseIcon?: boolean;
+  backgroundColor?: string;
+  textColor?: string;
+  buttonTextColor?: string;
+}

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

@@ -0,0 +1,168 @@
+import { useState, useEffect } from "preact/hooks";
+import {
+  customerStore,
+  activateCustomer,
+  resendCustomerActivationMail,
+  Router,
+} from "@ikas/bp-storefront";
+
+import { Props } from "./types";
+import { cx } from "../../utils/cx";
+import { CheckCircleSVG, XCircleSVG } from "../../sub-components/icons";
+import SpinnerIcon from "../../sub-components/SpinnerIcon";
+import Button from "../../sub-components/Button";
+import FormItem from "../../sub-components/FormItem";
+import Input from "../../sub-components/Input";
+
+type Status = "loading" | "success" | "error";
+type ResendStatus = "idle" | "sending" | "success" | "error";
+
+export function CustomerEmailVerification({
+  title = "E-posta Doğrulama",
+  successTitle = "E-posta Doğrulandı",
+  successMessage = "E-posta adresiniz başarıyla doğrulandı. Artık giriş yapabilirsiniz.",
+  errorTitle = "Doğrulama Başarısız",
+  errorMessage = "E-posta doğrulama bağlantısı geçersiz veya süresi dolmuş.",
+  loadingMessage = "E-posta adresiniz doğrulanıyor, lütfen bekleyin...",
+  loginButtonText = "Giriş Yap",
+  resendTitle = "Doğrulama E-postasını Tekrar Gönder",
+  emailLabel = "E-posta",
+  emailPlaceholder = "ornek@email.com",
+  resendButtonText = "Tekrar Gönder",
+  resendingButtonText = "Gönderiliyor...",
+  resendSuccessMessage = "Doğrulama e-postası başarıyla gönderildi.",
+  resendErrorMessage = "E-posta gönderilemedi. Lütfen tekrar deneyin.",
+}: Props) {
+  const [status, setStatus] = useState<Status>("loading");
+  const [email, setEmail] = useState("");
+  const [resendStatus, setResendStatus] = useState<ResendStatus>("idle");
+
+  useEffect(() => {
+    let cancelled = false;
+
+    activateCustomer(customerStore)
+      .then((success) => {
+        if (!cancelled) setStatus(success ? "success" : "error");
+      })
+      .catch(() => {
+        if (!cancelled) setStatus("error");
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const resending = resendStatus === "sending";
+
+  const handleResend = async () => {
+    const trimmed = email.trim();
+    if (!trimmed || resending) return;
+    setResendStatus("sending");
+
+    const success = await resendCustomerActivationMail(customerStore, trimmed);
+    setResendStatus(success ? "success" : "error");
+  };
+
+  return (
+    <section className="customer-email-verification">
+      <div className="customer-email-verification__wrapper kombos-container">
+        <div className="customer-email-verification__container">
+          {status === "loading" && (
+            <div className="customer-email-verification__state">
+              <h1 className="customer-email-verification__title text-xl-medium md:display-xs-medium">
+                {title}
+              </h1>
+              <SpinnerIcon className="customer-email-verification__spinner" />
+              <p className="customer-email-verification__state-text text-md-regular">
+                {loadingMessage}
+              </p>
+            </div>
+          )}
+
+          {status === "success" && (
+            <div className="customer-email-verification__state">
+              <div className="customer-email-verification__icon customer-email-verification__icon--success">
+                <CheckCircleSVG />
+              </div>
+              <h1 className="customer-email-verification__title text-xl-medium md:display-xs-medium">
+                {successTitle}
+              </h1>
+              <p className="customer-email-verification__message text-md-regular">{successMessage}</p>
+              <Button
+                className="customer-email-verification__action-btn"
+                variant="primary"
+                size="s"
+                onClick={() => Router.navigateToPage("LOGIN")}
+              >
+                {loginButtonText}
+              </Button>
+            </div>
+          )}
+
+          {status === "error" && (
+            <div className="customer-email-verification__state">
+              <div className="customer-email-verification__icon customer-email-verification__icon--error">
+                <XCircleSVG />
+              </div>
+              <h1 className="customer-email-verification__title text-xl-medium md:display-xs-medium">
+                {errorTitle}
+              </h1>
+              <p className="customer-email-verification__message text-md-regular">{errorMessage}</p>
+
+              <div className="customer-email-verification__resend">
+                <h2 className="customer-email-verification__resend-title text-md-semibold md:text-lg-semibold">
+                  {resendTitle}
+                </h2>
+                <form
+                  className="customer-email-verification__resend-form"
+                  onSubmit={(e) => {
+                    e.preventDefault();
+                    handleResend();
+                  }}
+                >
+                  <FormItem label={emailLabel} htmlFor="customer-email-verification-email">
+                    <Input
+                      id="customer-email-verification-email"
+                      type="email"
+                      name="email"
+                      autoComplete="email"
+                      placeholder={emailPlaceholder}
+                      value={email}
+                      onInput={(e) =>
+                        setEmail((e.target as HTMLInputElement).value)
+                      }
+                    />
+                  </FormItem>
+                  <Button
+                    className="customer-email-verification__resend-btn"
+                    variant="primary"
+                    size="s"
+                    disabled={resending || !email.trim()}
+                  >
+                    {resending ? resendingButtonText : resendButtonText}
+                  </Button>
+                </form>
+
+                {(resendStatus === "success" || resendStatus === "error") && (
+                  <div
+                    className={cx(
+                      "customer-email-verification__banner text-sm-regular",
+                      `customer-email-verification__banner--${resendStatus}`,
+                    )}
+                  >
+                    {resendStatus === "success"
+                      ? resendSuccessMessage
+                      : resendErrorMessage}
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default CustomerEmailVerification;

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

@@ -0,0 +1,118 @@
+.customer-email-verification {
+  width: 100%;
+}
+
+.customer-email-verification__wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.customer-email-verification__container {
+  width: 100%;
+  max-width: 29rem;
+}
+
+.customer-email-verification__state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  text-align: center;
+}
+
+.customer-email-verification__spinner {
+  font-size: 2.5rem;
+  color: var(--kombos-gray-500);
+}
+
+.customer-email-verification__state-text {
+  color: var(--kombos-gray-500);
+  margin: 0;
+}
+
+.customer-email-verification__icon {
+  font-size: 3rem;
+}
+
+.customer-email-verification__icon--success {
+  color: var(--kombos-success);
+}
+
+.customer-email-verification__icon--error {
+  color: var(--kombos-error);
+}
+
+.customer-email-verification__title {
+  color: var(--kombos-gray-900);
+  margin: 0;
+}
+
+.customer-email-verification__message {
+  color: var(--kombos-gray-500);
+  margin: 0;
+}
+
+.customer-email-verification__action-btn {
+  width: 100%;
+  margin-top: 0.5rem;
+}
+
+.customer-email-verification__resend {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-top: 1rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--kombos-gray-200);
+}
+
+.customer-email-verification__resend-title {
+  color: var(--kombos-gray-900);
+  margin: 0;
+  text-align: left;
+}
+
+.customer-email-verification__resend-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.customer-email-verification__resend-btn {
+  width: 100%;
+}
+
+.customer-email-verification__banner {
+  padding: 0.75rem 1rem;
+  border-radius: 6px;
+}
+
+.customer-email-verification__banner--success {
+  background: rgba(18, 183, 106, 0.08);
+  border: 1px solid var(--kombos-success);
+  color: var(--kombos-success);
+}
+
+.customer-email-verification__banner--error {
+  background: rgba(255, 60, 72, 0.08);
+  border: 1px solid var(--kombos-error);
+  color: var(--kombos-error);
+}
+
+@media (min-width: 768px) {
+  .customer-email-verification__wrapper {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .customer-email-verification__wrapper {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+  }
+}

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

@@ -0,0 +1,17 @@
+// This file is auto-generated — do not edit manually.
+export interface Props {
+  title?: string;
+  successTitle?: string;
+  successMessage?: string;
+  errorTitle?: string;
+  errorMessage?: string;
+  loadingMessage?: string;
+  loginButtonText?: string;
+  resendTitle?: string;
+  emailLabel?: string;
+  emailPlaceholder?: string;
+  resendButtonText?: string;
+  resendingButtonText?: string;
+  resendSuccessMessage?: string;
+  resendErrorMessage?: string;
+}

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

@@ -0,0 +1,27 @@
+import { getDefaultSrc } from "@ikas/bp-storefront";
+
+import { Props } from "./types";
+
+export function FeatureItem({ image, text }: Props) {
+  const src = image ? getDefaultSrc(image) : undefined;
+
+  return (
+    <div className="kombos-feature-item">
+      {src && (
+        <img
+          className="kombos-feature-item__icon"
+          src={src}
+          alt={image?.altText || ""}
+        />
+      )}
+      {text && (
+        <div
+          className="kombos-feature-item__text text-sm-medium"
+          dangerouslySetInnerHTML={{ __html: text }}
+        />
+      )}
+    </div>
+  );
+}
+
+export default FeatureItem;

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

@@ -0,0 +1,19 @@
+.kombos-feature-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.5rem;
+}
+
+.kombos-feature-item__icon {
+  width: 2rem;
+  height: 2rem;
+  overflow: hidden;
+  object-fit: contain;
+  flex-shrink: 0;
+}
+
+.kombos-feature-item__text {
+  color: var(--kombos-gray-900);
+  text-align: center;
+}

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

@@ -0,0 +1,7 @@
+// This file is auto-generated — do not edit manually.
+import type { IkasImage } from "@ikas/bp-storefront";
+
+export interface Props {
+  image?: IkasImage | null;
+  text?: string;
+}

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

@@ -0,0 +1,25 @@
+// import { IkasComponentRenderer } from "@ikas/bp-storefront";
+
+import { IkasComponentRenderer } from "@ikas/bp-storefront";
+import { Props } from "./types";
+
+export function Features(props: Props) {
+  const { backgroundColor, components } = props;
+
+  return (
+    <section
+      className="kombos-features"
+      style={backgroundColor ? { backgroundColor } : undefined}
+    >
+      <div className="kombos-container kombos-features__container">
+        <IkasComponentRenderer
+          id="features"
+          components={components}
+          parentProps={props}
+        />
+      </div>
+    </section>
+  );
+}
+
+export default Features;

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

@@ -0,0 +1,39 @@
+.kombos-features {
+  width: 100%;
+}
+
+.kombos-features__container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 1.5rem;
+  padding: 2rem 1rem;
+}
+
+.kombos-features__container > * > * > * {
+  width: calc(50% - 0.75rem);
+  flex-shrink: 0;
+}
+
+@media (min-width: 640px) {
+  .kombos-features__container > * > * > * {
+    width: calc(33.33% - 1rem);
+  }
+}
+
+@media (min-width: 768px) {
+  .kombos-features__container {
+    padding: 3rem 2rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .kombos-features__container {
+    padding: 3rem 4.5rem;
+  }
+
+  .kombos-features__container > * > * > * {
+    width: auto;
+    flex: 1 0 calc(16.66% - 1.25rem);
+  }
+}

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

@@ -0,0 +1,5 @@
+// This file is auto-generated — do not edit manually.
+export interface Props {
+  backgroundColor?: string;
+  components?: any;
+}

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

@@ -0,0 +1,154 @@
+import {
+  IkasNavigationLink,
+  IkasComponentRenderer,
+  createMediaSrcset,
+  getDefaultSrc,
+} from "@ikas/bp-storefront";
+import { Props } from "./types";
+import { IkasLogoSVG } from "../../sub-components/icons";
+
+export function Footer(props: Props) {
+  const {
+    logo,
+    description,
+    copyrightText = "© 2026 ikas Mağazası. Tüm Hakları Saklıdır",
+    linkColor,
+    linkHoverColor,
+    contactTitle = "İletişim Bilgileri",
+    contactEmail,
+    contactPhone,
+    footerLinks,
+    socialMediaIcons,
+  } = props;
+
+  const columns = footerLinks?.links ?? [];
+  const hasContact = !!(contactEmail || contactPhone);
+  const hasSocials = socialMediaIcons?.length > 0;
+
+  return (
+    <footer
+      className="kombos-footer"
+      style={{
+...(linkColor ? { "--footer-link-color": linkColor } : {}),
+        ...(linkHoverColor
+          ? { "--footer-link-hover-color": linkHoverColor }
+          : {}),
+      }}
+    >
+      <div className="kombos-footer__wrapper kombos-container">
+        <div className="kombos-footer__top">
+          {/* Brand column */}
+          <div className="kombos-footer__brand">
+            {logo && (
+              <div className="kombos-footer__logo-wrap">
+                <img
+                  src={getDefaultSrc(logo)}
+                  srcSet={createMediaSrcset(logo)}
+                  sizes="96px"
+                  alt={logo?.altText || "Logo"}
+                  className="kombos-footer__logo-img"
+                  loading="lazy"
+                  decoding="async"
+                />
+              </div>
+            )}
+
+            {description && (
+              <div
+                className="kombos-footer__desc text-sm-regular"
+                dangerouslySetInnerHTML={{ __html: description }}
+              />
+            )}
+
+            {hasSocials && (
+              <div className="kombos-footer__socials">
+                <IkasComponentRenderer
+                  id="footer-socials"
+                  components={socialMediaIcons}
+                  parentProps={props}
+                />
+              </div>
+            )}
+          </div>
+
+          {/* Link columns */}
+          {(columns.length > 0 || hasContact) && (
+            <div className="kombos-footer__columns">
+              {columns.map((column: IkasNavigationLink, i: number) => (
+                <div key={i} className="kombos-footer__col">
+                  <p className="kombos-footer__col-title text-sm-medium">
+                    {column.label}
+                  </p>
+                  {column.subLinks?.length > 0 && (
+                    <nav className="kombos-footer__col-links">
+                      {column.subLinks.map(
+                        (link: IkasNavigationLink, j: number) => (
+                          <a
+                            key={j}
+                            href={link.href}
+                            className="kombos-footer__col-link text-sm-regular"
+                            target={link.openInNewTab ? "_blank" : undefined}
+                            rel={
+                              link.openInNewTab
+                                ? "noopener noreferrer"
+                                : undefined
+                            }
+                          >
+                            {link.label}
+                          </a>
+                        ),
+                      )}
+                    </nav>
+                  )}
+                </div>
+              ))}
+
+              {/* Contact column */}
+              {hasContact && (
+                <div className="kombos-footer__col">
+                  <p className="kombos-footer__col-title text-sm-medium">
+                    {contactTitle}
+                  </p>
+                  <div className="kombos-footer__col-links">
+                    {contactEmail && (
+                      <a
+                        href={`mailto:${contactEmail}`}
+                        className="kombos-footer__col-link text-sm-regular"
+                      >
+                        {contactEmail}
+                      </a>
+                    )}
+                    {contactPhone && (
+                      <a
+                        href={`tel:${contactPhone.replace(/\s/g, "")}`}
+                        className="kombos-footer__col-link text-sm-regular"
+                      >
+                        {contactPhone}
+                      </a>
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Bottom bar */}
+        <div className="kombos-footer__bottom">
+          <div
+            className="kombos-footer__copyright text-xs-regular"
+            dangerouslySetInnerHTML={{ __html: copyrightText }}
+          />
+          <div className="kombos-footer__badge">
+            <IkasLogoSVG className="kombos-footer__badge-logo" />
+            <span className="kombos-footer__badge-text text-xs-medium">
+              E-Ticaret Altyapısı ile Hazırlanmıştır.
+            </span>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+export default Footer;