@ikas/code-components-mcp 0.104.0 → 0.106.0

package/data/section-templates/recover-password-section/types.ts

@@ -0,0 +1,12 @@
+export interface Props {
+  title?: string;
+  subtitle?: string;
+  passwordLabel?: string;
+  passwordPlaceholder?: string;
+  passwordAgainLabel?: string;
+  passwordAgainPlaceholder?: string;
+  submitButtonText?: string;
+  submittingButtonText?: string;
+  successMessage?: string;
+  loginLinkText?: string;
+}

package/data/section-templates/recover-password-section/utils/cx.ts

@@ -0,0 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function cx(...classes: any[]): string {
+  return classes.filter(Boolean).join(" ");
+}

package/data/section-templates/register-section/_meta.json

@@ -0,0 +1,4 @@
+{
+  "title": "Register Section",
+  "description": "Customer registration form with name, email, password fields, validation, terms acceptance, and social login. Uses customerStore.register() with full error handling."
+}

package/data/section-templates/register-section/components/RegisterForm/index.tsx

@@ -0,0 +1,326 @@
+import {
+  customerStore,
+  getRegisterForm,
+  setRegisterFormFirstName,
+  setRegisterFormLastName,
+  setRegisterFormEmail,
+  setRegisterFormPassword,
+  setRegisterFormIsMarketingAccepted,
+  setRegisterFormIsMembershipAgreementAccepted,
+  submitRegisterForm,
+  socialLogin,
+  Router,
+} 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 Checkbox from "../../../../sub-components/Checkbox";
+import SocialLoginButton from "../../../../sub-components/SocialLoginButton";
+import { GoogleSVG, FacebookSVG } from "../../../../sub-components/icons";
+
+interface RegisterFormProps extends Props {
+  registerForm: ReturnType<typeof getRegisterForm>;
+}
+
+const RegisterForm = observer(function RegisterForm({
+  registerForm,
+  title = "Hesap Oluştur",
+  subtitle = "Hemen ücretsiz hesap oluşturun ve alışverişe başlayın.",
+  firstNameLabel = "İsim",
+  lastNameLabel = "Soyisim",
+  emailLabel = "E-posta",
+  passwordLabel = "Şifre",
+  firstNamePlaceholder,
+  lastNamePlaceholder,
+  emailPlaceholder,
+  passwordPlaceholder = "Şifrenizi girin",
+  submitButtonText = "Kayıt Ol",
+  submittingButtonText = "Kayıt yapılıyor...",
+  loginLinkText = "Zaten hesabınız var mı? Giriş yapın",
+  marketingConsentText = "Kampanya ve promosyonlardan e-posta ile haberdar olmak istiyorum",
+  agreementConsentText = "Üyelik sözleşmesini kabul ediyorum",
+  googleButtonText = "Google ile kayıt ol",
+  facebookButtonText = "Facebook ile kayıt ol",
+  dividerText = "veya",
+  showGoogleLogin = false,
+  showFacebookLogin = false,
+  marketingConsentLink,
+  agreementConsentLink,
+}: RegisterFormProps) {
+  const resolvedFirstNamePlaceholder = firstNamePlaceholder || firstNameLabel;
+  const resolvedLastNamePlaceholder = lastNamePlaceholder || lastNameLabel;
+  const resolvedEmailPlaceholder = emailPlaceholder || emailLabel;
+
+  const showSocialLogin = showGoogleLogin || showFacebookLogin;
+
+  const handleSubmit = async (e: Event) => {
+    e.preventDefault();
+    const success = await submitRegisterForm(registerForm);
+    if (success) {
+      Router.navigateToPage("ACCOUNT");
+    }
+  };
+
+  return (
+    <div className="register__container">
+      <div className="register__header">
+        <h1 className="register__title text-xl-medium md:display-xs-medium">
+          {title}
+        </h1>
+        <div
+          className="register__subtitle text-sm-regular"
+          dangerouslySetInnerHTML={{ __html: subtitle }}
+        />
+      </div>
+
+      {registerForm.isFailure && registerForm.responseMessage && (
+        <div className="register__error-banner text-sm-regular">
+          {registerForm.responseMessage}
+        </div>
+      )}
+
+      {showSocialLogin && (
+        <div className="register__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="register__divider">
+          <span className="register__divider-line" />
+          <span className="register__divider-text text-xs-regular">
+            {dividerText}
+          </span>
+          <span className="register__divider-line" />
+        </div>
+      )}
+
+      <form className="register__form" onSubmit={handleSubmit}>
+        <FormItem
+          label={firstNameLabel}
+          htmlFor="register-first-name"
+          status={registerForm.firstName?.hasError ? "error" : "default"}
+          helper={
+            registerForm.firstName?.hasError
+              ? registerForm.firstName.message
+              : undefined
+          }
+        >
+          <Input
+            id="register-first-name"
+            name="given-name"
+            autoComplete="given-name"
+            placeholder={resolvedFirstNamePlaceholder}
+            value={registerForm.firstName?.value ?? ""}
+            onInput={(e: Event) =>
+              setRegisterFormFirstName(
+                registerForm,
+                (e.target as HTMLInputElement).value,
+              )
+            }
+          />
+        </FormItem>
+
+        <FormItem
+          label={lastNameLabel}
+          htmlFor="register-last-name"
+          status={registerForm.lastName?.hasError ? "error" : "default"}
+          helper={
+            registerForm.lastName?.hasError
+              ? registerForm.lastName.message
+              : undefined
+          }
+        >
+          <Input
+            id="register-last-name"
+            name="family-name"
+            autoComplete="family-name"
+            placeholder={resolvedLastNamePlaceholder}
+            value={registerForm.lastName?.value ?? ""}
+            onInput={(e: Event) =>
+              setRegisterFormLastName(
+                registerForm,
+                (e.target as HTMLInputElement).value,
+              )
+            }
+          />
+        </FormItem>
+
+        <FormItem
+          label={emailLabel}
+          htmlFor="register-email"
+          status={registerForm.email?.hasError ? "error" : "default"}
+          helper={
+            registerForm.email?.hasError
+              ? registerForm.email.message
+              : undefined
+          }
+        >
+          <Input
+            id="register-email"
+            type="email"
+            name="email"
+            autoComplete="email"
+            placeholder={resolvedEmailPlaceholder}
+            value={registerForm.email?.value ?? ""}
+            onInput={(e: Event) =>
+              setRegisterFormEmail(
+                registerForm,
+                (e.target as HTMLInputElement).value,
+              )
+            }
+          />
+        </FormItem>
+
+        <FormItem
+          label={passwordLabel}
+          htmlFor="register-password"
+          status={registerForm.password?.hasError ? "error" : "default"}
+          helper={
+            registerForm.password?.hasError
+              ? registerForm.password.message
+              : undefined
+          }
+        >
+          <Input
+            id="register-password"
+            password
+            name="new-password"
+            autoComplete="new-password"
+            placeholder={passwordPlaceholder}
+            value={registerForm.password?.value ?? ""}
+            onInput={(e: Event) =>
+              setRegisterFormPassword(
+                registerForm,
+                (e.target as HTMLInputElement).value,
+              )
+            }
+          />
+        </FormItem>
+
+        <div className="register__consents">
+          <div className="register__consent-field">
+            <div className="register__consent-row">
+              <Checkbox
+                checked={registerForm.isMarketingAccepted?.value ?? false}
+                onChange={(checked) =>
+                  setRegisterFormIsMarketingAccepted(registerForm, checked)
+                }
+              />
+              {marketingConsentLink?.href ? (
+                <a
+                  className="register__consent-label text-sm-regular"
+                  href={marketingConsentLink.href}
+                  target={
+                    marketingConsentLink.openInNewTab ? "_blank" : undefined
+                  }
+                  rel={
+                    marketingConsentLink.openInNewTab
+                      ? "noopener noreferrer"
+                      : undefined
+                  }
+                  dangerouslySetInnerHTML={{ __html: marketingConsentText }}
+                />
+              ) : (
+                <span
+                  className="register__consent-label text-sm-regular"
+                  dangerouslySetInnerHTML={{ __html: marketingConsentText }}
+                />
+              )}
+            </div>
+            {registerForm.isMarketingAccepted?.hasError && (
+              <span className="register__consent-error text-xs-regular">
+                {registerForm.isMarketingAccepted.message}
+              </span>
+            )}
+          </div>
+
+          <div className="register__consent-field">
+            <div className="register__consent-row">
+              <Checkbox
+                checked={
+                  registerForm.isMembershipAgreementAccepted?.value ?? false
+                }
+                onChange={(checked) =>
+                  setRegisterFormIsMembershipAgreementAccepted(
+                    registerForm,
+                    checked,
+                  )
+                }
+                status={
+                  registerForm.isMembershipAgreementAccepted?.hasError
+                    ? "error"
+                    : "default"
+                }
+              />
+              {agreementConsentLink?.href ? (
+                <a
+                  className="register__consent-label text-sm-regular"
+                  href={agreementConsentLink.href}
+                  target={
+                    agreementConsentLink.openInNewTab ? "_blank" : undefined
+                  }
+                  rel={
+                    agreementConsentLink.openInNewTab
+                      ? "noopener noreferrer"
+                      : undefined
+                  }
+                  dangerouslySetInnerHTML={{ __html: agreementConsentText }}
+                />
+              ) : (
+                <span
+                  className="register__consent-label text-sm-regular"
+                  dangerouslySetInnerHTML={{ __html: agreementConsentText }}
+                />
+              )}
+            </div>
+            {registerForm.isMembershipAgreementAccepted?.hasError && (
+              <span className="register__consent-error text-xs-regular">
+                {registerForm.isMembershipAgreementAccepted.message}
+              </span>
+            )}
+          </div>
+        </div>
+
+        <Button
+          variant="primary"
+          size="s"
+          className="register__submit-btn"
+          disabled={registerForm.isSubmitting}
+        >
+          {registerForm.isSubmitting ? submittingButtonText : submitButtonText}
+        </Button>
+      </form>
+
+      <div className="register__footer">
+        <button
+          type="button"
+          className="register__login-link text-sm-medium"
+          onClick={() => Router.navigateToPage("LOGIN")}
+        >
+          {loginLinkText}
+        </button>
+      </div>
+    </div>
+  );
+});
+
+export default RegisterForm;

package/data/section-templates/register-section/hooks/useRedirectIfLoggedIn.ts

@@ -0,0 +1,35 @@
+import { useEffect, useState } from "preact/hooks";
+import {
+  customerStore,
+  waitForCustomerStoreInit,
+  Router,
+} from "@ikas/bp-storefront";
+
+/**
+ * Redirects logged-in users to the account page.
+ * Returns `true` while the check is in progress (use to hide content and prevent flash).
+ * Calls `onGuest` only if the user is not logged in.
+ */
+export function useRedirectIfLoggedIn(onGuest: () => void): boolean {
+  const [isChecking, setIsChecking] = useState(true);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    waitForCustomerStoreInit(customerStore).then(() => {
+      if (!isMounted) return;
+      if (customerStore.customer) {
+        Router.navigateToPage("ACCOUNT");
+        return;
+      }
+      onGuest();
+      setIsChecking(false);
+    });
+
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
+  return isChecking;
+}

package/data/section-templates/register-section/ikas-config-snippet.json

@@ -0,0 +1,244 @@
+{
+  "id": "{{PROJECT_ID}}-register",
+  "name": "Register",
+  "type": "section",
+  "entry": "./src/components/Register/index.tsx",
+  "styles": "./src/components/Register/styles.css",
+  "props": [
+    {
+      "name": "title",
+      "displayName": "Başlık",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Hesap Oluştur",
+      "groupId": "content"
+    },
+    {
+      "name": "subtitle",
+      "displayName": "Alt Başlık",
+      "type": "RICH_TEXT",
+      "required": false,
+      "defaultValue": "<p>Hemen ücretsiz hesap oluşturun ve alışverişe başlayın.</p>",
+      "groupId": "content"
+    },
+    {
+      "name": "firstNameLabel",
+      "displayName": "İsim Etiketi",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "İsim",
+      "groupId": "firstName"
+    },
+    {
+      "name": "firstNamePlaceholder",
+      "displayName": "İsim Placeholder",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "İsim",
+      "groupId": "firstName"
+    },
+    {
+      "name": "lastNameLabel",
+      "displayName": "Soyisim Etiketi",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Soyisim",
+      "groupId": "lastName"
+    },
+    {
+      "name": "lastNamePlaceholder",
+      "displayName": "Soyisim Placeholder",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Soyisim",
+      "groupId": "lastName"
+    },
+    {
+      "name": "emailLabel",
+      "displayName": "E-posta Etiketi",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "E-posta",
+      "groupId": "email"
+    },
+    {
+      "name": "emailPlaceholder",
+      "displayName": "E-posta Placeholder",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "ornek@email.com",
+      "groupId": "email"
+    },
+    {
+      "name": "passwordLabel",
+      "displayName": "Şifre Etiketi",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Şifre",
+      "groupId": "password"
+    },
+    {
+      "name": "passwordPlaceholder",
+      "displayName": "Şifre Placeholder",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Şifrenizi girin",
+      "groupId": "password"
+    },
+    {
+      "name": "submitButtonText",
+      "displayName": "Kayıt Butonu Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Kayıt Ol",
+      "groupId": "buttons"
+    },
+    {
+      "name": "submittingButtonText",
+      "displayName": "Kayıt Yapılıyor Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Kayıt yapılıyor...",
+      "groupId": "buttons"
+    },
+    {
+      "name": "loginLinkText",
+      "displayName": "Giriş Yap Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Zaten hesabınız var mı? Giriş yapın",
+      "groupId": "buttons"
+    },
+    {
+      "name": "marketingConsentText",
+      "displayName": "Pazarlama Onay Metni",
+      "type": "RICH_TEXT",
+      "required": false,
+      "groupId": "marketing-consent"
+    },
+    {
+      "name": "marketingConsentLink",
+      "displayName": "İletişim İzni Linki",
+      "type": "LINK",
+      "required": false,
+      "groupId": "marketing-consent"
+    },
+    {
+      "name": "agreementConsentText",
+      "displayName": "Üyelik Sözleşmesi Metni",
+      "type": "RICH_TEXT",
+      "required": false,
+      "groupId": "agreement-consent"
+    },
+    {
+      "name": "agreementConsentLink",
+      "displayName": "Üyelik Sözleşmesi Linki",
+      "type": "LINK",
+      "required": false,
+      "groupId": "agreement-consent"
+    },
+    {
+      "name": "showGoogleLogin",
+      "displayName": "Google ile Giriş",
+      "type": "BOOLEAN",
+      "required": false,
+      "groupId": "google"
+    },
+    {
+      "name": "googleButtonText",
+      "displayName": "Google Buton Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Google ile kayıt ol",
+      "groupId": "google"
+    },
+    {
+      "name": "showFacebookLogin",
+      "displayName": "Facebook ile Giriş",
+      "type": "BOOLEAN",
+      "required": false,
+      "groupId": "facebook"
+    },
+    {
+      "name": "facebookButtonText",
+      "displayName": "Facebook Buton Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Facebook ile kayıt ol",
+      "groupId": "facebook"
+    },
+    {
+      "name": "dividerText",
+      "displayName": "Ayırıcı Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "veya",
+      "groupId": "socialLogin"
+    }
+  ],
+  "propGroups": [
+    {
+      "id": "content",
+      "name": "İçerik",
+      "description": "Sayfa başlığı ve açıklama"
+    },
+    {
+      "id": "formFields",
+      "name": "Form Alanları",
+      "description": "Kayıt formu etiket ve placeholder metinleri",
+      "children": [
+        {
+          "id": "firstName",
+          "name": "İsim"
+        },
+        {
+          "id": "lastName",
+          "name": "Soyisim"
+        },
+        {
+          "id": "email",
+          "name": "E-posta"
+        },
+        {
+          "id": "password",
+          "name": "Şifre"
+        }
+      ]
+    },
+    {
+      "id": "buttons",
+      "name": "Butonlar",
+      "description": "Buton ve link metinleri"
+    },
+    {
+      "id": "consents",
+      "name": "Onay Metinleri",
+      "description": "İletişim izni ve üyelik sözleşmesi",
+      "children": [
+        {
+          "id": "marketing-consent",
+          "name": "İletişim İzni"
+        },
+        {
+          "id": "agreement-consent",
+          "name": "Üyelik Sözleşmesi"
+        }
+      ]
+    },
+    {
+      "id": "socialLogin",
+      "name": "Sosyal Medya ile Giriş",
+      "description": "Google ve Facebook ile giriş ayarları",
+      "children": [
+        {
+          "id": "google",
+          "name": "Google"
+        },
+        {
+          "id": "facebook",
+          "name": "Facebook"
+        }
+      ]
+    }
+  ]
+}

package/data/section-templates/register-section/index.tsx

@@ -0,0 +1,30 @@
+import {
+  customerStore,
+  getRegisterForm,
+  initRegisterForm,
+} from "@ikas/bp-storefront";
+import { useRedirectIfLoggedIn } from "../../hooks/useRedirectIfLoggedIn";
+
+import { Props } from "./types";
+import RegisterForm from "./components/RegisterForm";
+import PageLoader from "../../sub-components/PageLoader";
+
+export function Register(props: Props) {
+  const registerForm = getRegisterForm(customerStore);
+
+  const isChecking = useRedirectIfLoggedIn(() => {
+    initRegisterForm(registerForm);
+  });
+
+  if (isChecking) return <PageLoader />;
+
+  return (
+    <section className="register">
+      <div className="register__wrapper kombos-container">
+        <RegisterForm registerForm={registerForm} {...props} />
+      </div>
+    </section>
+  );
+}
+
+export default Register;