@ikas/component-cli 0.93.0 → 0.94.0

package/templates/create-full/src/components/RecoverPassword/components/RecoverPasswordForm/index.tsx

@@ -0,0 +1,133 @@
+import {
+  getRecoverPasswordForm,
+  setRecoverPasswordFormPassword,
+  setRecoverPasswordFormPasswordAgain,
+  submitRecoverPasswordForm,
+  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";
+
+interface RecoverPasswordFormProps extends Omit<Props, "backgroundColor"> {
+  recoverForm: ReturnType<typeof getRecoverPasswordForm>;
+}
+
+const RecoverPasswordForm = observer(function RecoverPasswordForm({
+  recoverForm,
+  title = "Parola Değiştirme",
+  subtitle = "Lütfen yeni parolanızı belirleyiniz.",
+  passwordLabel = "Yeni Şifre",
+  passwordPlaceholder = "Parola",
+  passwordAgainLabel = "Yeni Şifre Tekrar",
+  passwordAgainPlaceholder = "Parola",
+  submitButtonText = "Değiştir",
+  submittingButtonText = "Değiştiriliyor...",
+  successMessage = "Parolanız başarıyla değiştirildi.",
+  loginLinkText = "Giriş Yap",
+}: RecoverPasswordFormProps) {
+  const handleSubmit = async (e: Event) => {
+    e.preventDefault();
+    const success = await submitRecoverPasswordForm(recoverForm);
+    if (success) {
+      Router.navigateToPage("LOGIN");
+    }
+  };
+
+  return (
+    <div className="recover-password__container">
+      <div className="recover-password__header">
+        <h1 className="recover-password__title text-xl-medium md:display-xs-medium">{title}</h1>
+        <p className="recover-password__subtitle text-sm-regular">{subtitle}</p>
+      </div>
+
+      {recoverForm.isSuccess && (
+        <div className="recover-password__success-banner text-sm-regular">
+          {successMessage}
+        </div>
+      )}
+
+      {recoverForm.isFailure && recoverForm.responseMessage && (
+        <div className="recover-password__error-banner text-sm-regular">
+          {recoverForm.responseMessage}
+        </div>
+      )}
+
+      {!recoverForm.isSuccess && (
+        <form className="recover-password__form" onSubmit={handleSubmit}>
+          <FormItem
+            label={passwordLabel}
+            htmlFor="recover-password"
+            status={recoverForm.password?.hasError ? "error" : "default"}
+            helper={
+              recoverForm.password?.hasError
+                ? recoverForm.password.message
+                : undefined
+            }
+          >
+            <Input
+              id="recover-password"
+              password
+              placeholder={passwordPlaceholder}
+              value={recoverForm.password?.value ?? ""}
+              onInput={(e: Event) =>
+                setRecoverPasswordFormPassword(
+                  recoverForm,
+                  (e.target as HTMLInputElement).value,
+                )
+              }
+            />
+          </FormItem>
+
+          <FormItem
+            label={passwordAgainLabel}
+            htmlFor="recover-password-again"
+            status={recoverForm.passwordAgain?.hasError ? "error" : "default"}
+            helper={
+              recoverForm.passwordAgain?.hasError
+                ? recoverForm.passwordAgain.message
+                : undefined
+            }
+          >
+            <Input
+              id="recover-password-again"
+              password
+              placeholder={passwordAgainPlaceholder}
+              value={recoverForm.passwordAgain?.value ?? ""}
+              onInput={(e: Event) =>
+                setRecoverPasswordFormPasswordAgain(
+                  recoverForm,
+                  (e.target as HTMLInputElement).value,
+                )
+              }
+            />
+          </FormItem>
+
+          <Button
+            variant="primary"
+            size="s"
+            className="recover-password__submit-btn"
+            disabled={recoverForm.isSubmitting}
+          >
+            {recoverForm.isSubmitting ? submittingButtonText : submitButtonText}
+          </Button>
+        </form>
+      )}
+
+      <div className="recover-password__footer">
+        <button
+          type="button"
+          className="recover-password__login-link text-sm-medium"
+          onClick={() => Router.navigateToPage("LOGIN")}
+        >
+          {loginLinkText}
+        </button>
+      </div>
+    </div>
+  );
+});
+
+export default RecoverPasswordForm;

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

@@ -0,0 +1,30 @@
+import {
+  customerStore,
+  getRecoverPasswordForm,
+  initRecoverPasswordForm,
+} from "@ikas/bp-storefront";
+import { useRedirectIfLoggedIn } from "../../hooks/useRedirectIfLoggedIn";
+
+import { Props } from "./types";
+import RecoverPasswordForm from "./components/RecoverPasswordForm";
+import PageLoader from "../../sub-components/PageLoader";
+
+export function RecoverPassword(props: Props) {
+  const recoverForm = getRecoverPasswordForm(customerStore);
+
+  const isChecking = useRedirectIfLoggedIn(() => {
+    initRecoverPasswordForm(recoverForm);
+  });
+
+  if (isChecking) return <PageLoader />;
+
+  return (
+    <section className="recover-password">
+      <div className="recover-password__wrapper kombos-container">
+        <RecoverPasswordForm recoverForm={recoverForm} {...props} />
+      </div>
+    </section>
+  );
+}
+
+export default RecoverPassword;

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

@@ -0,0 +1,93 @@
+.recover-password {
+  width: 100%;
+}
+
+.recover-password__wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.recover-password__container {
+  width: 100%;
+  max-width: 29rem;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.recover-password__header {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  text-align: center;
+}
+
+.recover-password__title {
+  color: var(--kombos-gray-900);
+  margin: 0;
+}
+
+.recover-password__subtitle {
+  color: var(--kombos-gray-700);
+  margin: 0;
+}
+
+.recover-password__success-banner {
+  padding: 0.75rem 1rem;
+  background: rgba(18, 183, 106, 0.08);
+  border: 1px solid var(--kombos-success);
+  border-radius: 6px;
+  color: var(--kombos-success);
+}
+
+.recover-password__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);
+}
+
+.recover-password__form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.recover-password__submit-btn {
+  width: 100%;
+}
+
+.recover-password__footer {
+  text-align: center;
+}
+
+.recover-password__login-link {
+  background: none;
+  border: none;
+  padding: 0;
+  color: var(--kombos-gray-700);
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.recover-password__login-link:hover {
+  color: var(--kombos-gray-900);
+}
+
+@media (min-width: 768px) {
+  .recover-password__wrapper {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .recover-password__wrapper {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+  }
+}

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

@@ -0,0 +1,13 @@
+// This file is auto-generated — do not edit manually.
+export interface Props {
+  title?: string;
+  subtitle?: string;
+  passwordLabel?: string;
+  passwordPlaceholder?: string;
+  passwordAgainLabel?: string;
+  passwordAgainPlaceholder?: string;
+  submitButtonText?: string;
+  submittingButtonText?: string;
+  successMessage?: string;
+  loginLinkText?: string;
+}

package/templates/create-full/src/components/Register/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/templates/create-full/src/components/Register/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;