96 lines
2.7 KiB
JavaScript
96 lines
2.7 KiB
JavaScript
{/* Special Offer Modal Header */}
|
|
<div className="ant-row modal__header align__items--center position--relative p--16">
|
|
{/* close icon */}
|
|
<svg
|
|
className="close-icon"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
onClick={() => setIsModalOpen(false)}
|
|
style={{ cursor: "pointer" }}
|
|
>
|
|
<path
|
|
d="M19 12a7 7 0 1 1-14 0 7 7 0 0 1 14 0z"
|
|
fill="#121212"
|
|
stroke="#121212"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
<path
|
|
d="M14.812 9.187l-5.625 5.626m5.625 0L9.187 9.187"
|
|
stroke="#fff"
|
|
strokeWidth="1.5"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</svg>
|
|
|
|
<div className="ant-col Special__offer__modal__header__left">
|
|
<div
|
|
className="image-skeleton image-skeleton__square"
|
|
style={{ width: 110, height: 110, borderRadius: 16 }}
|
|
>
|
|
<img
|
|
className="image-skeleton__image thumb isLoaded noBlur"
|
|
src="https://cdn.komi.io/cdn-cgi/image/width=10,height=10,blur=5,dpr=2/photos/ZFUl6YoabKm2gdA01W9-p.png"
|
|
alt="thumb"
|
|
/>
|
|
<img
|
|
className="image-skeleton__image original isLoaded"
|
|
src="https://cdn.komi.io/cdn-cgi/image/width=110,height=110,dpr=2/photos/ZFUl6YoabKm2gdA01W9-p.png"
|
|
alt="thumb"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="ant-col music-card__right flex--1 p__l--16">
|
|
<div className="ant-typography text text--semibold14" style={{ WebkitLineClamp: 2 }}>
|
|
offer
|
|
</div>
|
|
<div className="ant-typography text text--regular14 d--block opacity--05 cursor-pointer">
|
|
https://google.com
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Special Offer Form */}
|
|
<Formik
|
|
initialValues={initialValues}
|
|
onSubmit={handleSubmit}
|
|
validationSchema={validateSpecialOfferSchema}
|
|
>
|
|
<Form className="offer-form-item">
|
|
<Text className="text text--regular14 opacity--06">
|
|
Copy the code below and visit the store to claim your discount.
|
|
</Text>
|
|
|
|
<Field
|
|
component={AntInput}
|
|
name="specialOffer.couponCode"
|
|
type={FieldType.input}
|
|
label="Coupon Code"
|
|
placeholder="Enter coupon code"
|
|
/>
|
|
|
|
<div
|
|
className="Special__offer__modal__copy--btn d--flex p--12 cursor-pointer"
|
|
onClick={() => navigator.clipboard.writeText(initialValues.specialOffer.couponCode)}
|
|
>
|
|
<div className="text text--semibold16">{initialValues.specialOffer.couponCode}</div>
|
|
<div className="copy-text">Copy Code</div>
|
|
</div>
|
|
|
|
{/* Buttons identical to first page.tsx */}
|
|
<div className="link-editor__actions m__t--16">
|
|
<Button className="ant-btn-xl ant-btn-uppercase" onClick={() => setIsModalOpen(false)}>
|
|
Cancel
|
|
</Button>
|
|
<Button className="ant-btn-xl ant-btn-uppercase" type="primary" htmlType="submit">
|
|
Done
|
|
</Button>
|
|
</div>
|
|
</Form>
|
|
</Formik> |