Add files via upload

src/componants/checkout-page/billingdetails-input/BillingInput.jsx

@@ -0,0 +1,38 @@
+import s from "./BillingInput.module.scss";
+
+const BillingInput = ({ inputData }) => {
+  const {
+    label,
+    placeholder,
+    name,
+    required,
+    type,
+    value,
+    onChange,
+    autoComplete,
+  } = inputData;
+
+  const inputAttributes = {
+    id: name,
+    name,
+    type: type || "text",
+    placeholder: placeholder || "",
+    required: required || false,
+    "aria-required": required,
+    value,
+    onChange,
+    autoComplete: autoComplete ? "on" : "off",
+  };
+
+  const redStarClass = required ? s.redStar : "";
+
+  return (
+    <div className={s.input}>
+      <label htmlFor={name} className={redStarClass}>
+        {label}
+      </label>
+      <input {...inputAttributes} />
+    </div>
+  );
+};
+export default BillingInput;

src/componants/checkout-page/billingdetails-input/BillingInput.module.scss

@@ -0,0 +1,38 @@
+.input {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.input>label {
+  color: #595959;
+}
+
+.input .redStar::after {
+  content: "*";
+  color: var(--red);
+}
+
+.input>input {
+  outline: none;
+  border: none;
+  border-radius: 4px;
+  padding: 14px 12px;
+  background-color: var(--very-light-gray2);
+  border: solid 2px var(--very-light-gray2);
+  transition: border-color .2s;
+
+  &:hover,
+  &:focus {
+    border-color: var(--medium-light-gray);
+  }
+
+  &[class=invalid] {
+    background-color: #ffdada;
+    border-color: var(--red);
+
+    &::placeholder {
+      color: var(--primary);
+    }
+  }
+}

src/componants/checkout-page/billingdetails-input/BillingInputs.jsx

@@ -0,0 +1,40 @@
+import { useTranslation } from "react-i18next";
+import { billingInputsData } from "src/Data/staticData";
+import BillingInput from "./BillingInput";
+import s from "./BillingInputs.module.scss";
+
+const BillingInputs = ({ inputsData }) => {
+  const { billingValues, handleChange } = inputsData;
+  const { t } = useTranslation();
+
+  function onChange(event, name) {
+    const isPhoneInput = name === "phoneNumber";
+    const isNumber = !isNaN(+event.nativeEvent.data);
+    const isPaste = event.nativeEvent.inputType === "insertFromPaste";
+
+    if (isPhoneInput && !isNumber) return;
+    if (isPhoneInput && isPaste) return;
+
+    handleChange(event);
+  }
+
+  return (
+    <div className={s.inputs}>
+      {billingInputsData.map(
+        ({ translationKey, name, type, required, id, regex }) => {
+          const inputData = {
+            value: billingValues[translationKey],
+            name,
+            label: t(`inputsLabels.${translationKey}`),
+            required,
+            type,
+            onChange: (event) => onChange(event, name),
+          };
+
+          return <BillingInput key={id} inputData={inputData} />;
+        }
+      )}
+    </div>
+  );
+};
+export default BillingInputs;

src/componants/checkout-page/billingdetails-input/BillingInputs.module.scss

@@ -0,0 +1,7 @@
+@import "src/Styles/mixins";
+
+.inputs {
+  display: flex;
+  flex-direction: column;
+  gap: 26px;
+}