favesalon-embed 1.0.17 → 1.0.18

package/dist/custom-elements/index.d.ts

@@ -68,6 +68,36 @@ export const GoogleMap: {
   new (): GoogleMap;
 };
 
+interface IconChecked extends Components.IconChecked, HTMLElement {}
+export const IconChecked: {
+  prototype: IconChecked;
+  new (): IconChecked;
+};
+
+interface IconDate extends Components.IconDate, HTMLElement {}
+export const IconDate: {
+  prototype: IconDate;
+  new (): IconDate;
+};
+
+interface IconLoading extends Components.IconLoading, HTMLElement {}
+export const IconLoading: {
+  prototype: IconLoading;
+  new (): IconLoading;
+};
+
+interface IconLocationMarker extends Components.IconLocationMarker, HTMLElement {}
+export const IconLocationMarker: {
+  prototype: IconLocationMarker;
+  new (): IconLocationMarker;
+};
+
+interface IconPhone extends Components.IconPhone, HTMLElement {}
+export const IconPhone: {
+  prototype: IconPhone;
+  new (): IconPhone;
+};
+
 interface LoginForm extends Components.LoginForm, HTMLElement {}
 export const LoginForm: {
   prototype: LoginForm;

package/dist/favesalon-embed/buy-giftcard-form.entry.js

@@ -1,4 +1,5 @@
 import { r as registerInstance, h } from './index-888e99e3.js';
+import { I as Inputmask } from './inputmask-afacb9e0.js';
 import { _ as _root, i as isSymbol_1, a as isObject_1, H as HttpService, d as dayjs_min, b as dateFormat, g as get_1, s as shortDateFormat, c as getSalonImage, e as getSalonAddress } from './services-82948efc.js';
 import { c as createCommonjsModule, g as getDefaultExportFromCjs } from './_commonjsHelpers-9bc404fc.js';
 import { C as Colors } from './colors-ea36347a.js';
@@ -325,7 +326,7 @@ var teConnectJs = createCommonjsModule(function (module, exports) {
 
 const teConnectJs$1 = /*@__PURE__*/getDefaultExportFromCjs(teConnectJs);
 
-const buyGiftcardFormCss = "buy-giftcard-form{display:block;width:100%}.buy-giftcard-form *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}";
+const buyGiftcardFormCss = "buy-giftcard-form{display:block;width:100%}.buy-giftcard-form *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.fs-input--date::-webkit-calendar-picker-indicator{cursor:pointer;background-color:#f00;position:absolute;right:0;top:0;height:48px;width:48px}@media (max-width: 768px){.fs--form--actions{position:fixed;left:0;right:0;bottom:0;padding:16px;-moz-box-shadow:0px 0px 24px rgba(0, 0, 0, 0.25);-webkit-box-shadow:0px 0px 24px rgba(0, 0, 0, 0.25);box-shadow:0px 0px 24px rgba(0, 0, 0, 0.25)}}";
 
 var DeliveryType;
 (function (DeliveryType) {
@@ -490,7 +491,7 @@ const BuyGiftcardForm = class {
   }
   renderPaymentOnlineDisabled() {
     return (h("div", { style: { paddingTop: '24px', textAlign: 'center' } }, h("div", { style: { fontSize: '24px', fontWeight: '700', lineHeight: '1.4' } }, "Online Gift Card is not available"), h("div", { style: { marginTop: '12px' } }, "Please call us for assistance or visit salon. Thanks!"), h("div", { style: { marginTop: '12px' } }, h("a", { rel: "noopener noreferrer", href: `tel:${this.salonInfo.businessPhone}` }, h("button", { type: "button", style: {
-        background: Colors.Secondary,
+        backgroundColor: Colors.Secondary,
         border: `1px solid ${Colors.Secondary}`,
         borderRadius: '8px',
         color: Colors.White,
@@ -515,14 +516,17 @@ const BuyGiftcardForm = class {
         marginTop: '12px',
       } }, totalAmount > 0 && (h("div", null, h("div", { style: { display: 'flex' } }, recommendAmounts.map((recommendValue, idx) => {
       const isSelected = this.selectedAmount === recommendValue;
-      return (h("button", { type: "button", key: `gc--recommend-amount--${recommendValue}`, value: recommendValue, onClick: () => this.selectedAmount = recommendValue, style: {
+      return (h("button", { type: "button", key: `gc--recommend-amount--${recommendValue}`, value: recommendValue, onClick: () => {
+          this.selectedAmount = recommendValue;
+          this.customAmount = recommendValue;
+        }, style: {
           border: `1px solid ${Colors.Gray03}`,
           backgroundColor: Colors.White,
           color: Colors.TextColor,
           borderRadius: '0px',
           cursor: 'pointer',
           height: '48px',
-          minWidth: '64px',
+          minWidth: '48px',
           display: 'flex',
           justifyContent: 'center',
           alignItems: 'center',
@@ -531,32 +535,36 @@ const BuyGiftcardForm = class {
           padding: '8px 12px',
           ...idx === 0 ? { borderRadius: '8px 0 0 8px', } : {},
           ...idx === (totalAmount - 1) ? { borderRadius: '0 8px 8px 0' } : {},
-          ...isSelected ? { backgroundColor: Colors.Gray01, fontWeight: '600' } : {},
+          ...isSelected ? { backgroundColor: Colors.Secondary, color: Colors.White, fontWeight: '600' } : {},
         } }, "$", recommendValue));
     })))), acceptCustomAmount && (h("div", { style: { position: 'relative', marginLeft: '16px', maxWith: '160px' } }, h("span", { style: {
+        fontWeight: '600',
         position: 'absolute',
         left: '14px',
         top: '50%',
         fontSize: '18px',
         transform: 'translate(0, -50%)',
-      } }, "$"), h("input", { type: "number", value: this.customAmount, onInput: (evt) => this.customAmount = evt.target.value, style: {
+      } }, "$"), h("input", { type: "number", placeholder: "Enter a number", min: 1, value: this.customAmount, onInput: (evt) => {
+        this.selectedAmount = null;
+        this.customAmount = evt.target.value;
+      }, style: {
         border: `1px solid ${Colors.Gray03}`,
         backgroundColor: Colors.White,
         color: Colors.TextColor,
         borderRadius: '8px',
-        padding: '8px 16px 8px 32px',
+        padding: '8px 16px 8px 28px',
         height: '48px',
         width: '100%',
         fontSize: '18px',
         fontWeight: '600',
       } })))), h("div", { style: {
-        borderTop: `1px solid ${Colors.Gray02}`,
+        borderTop: `1px solid ${Colors.Gray03}`,
         marginTop: '24px',
         paddingTop: '16px',
       } }, h("div", { style: { fontSize: '18px' } }, "Recipient name"), h("div", { style: { display: 'flex', alignItems: 'center', marginTop: '12px' } }, h("div", { style: { width: '48%' } }, h("input", { placeholder: "First name", type: "text", value: this.recipientFirstName, onInput: (evt) => {
         this.recipientFirstName = evt.target.value.trim();
       }, style: {
-        border: `1px solid ${Colors.Gray02}`,
+        border: `1px solid ${Colors.Gray03}`,
         backgroundColor: Colors.White,
         color: Colors.TextColor,
         borderRadius: '8px',
@@ -568,7 +576,7 @@ const BuyGiftcardForm = class {
       } })), h("div", { style: { width: '48%', marginLeft: '4%' } }, h("input", { placeholder: "Last name", type: "text", value: this.recipientLastName, onInput: (evt) => {
         this.recipientLastName = evt.target.value.trim();
       }, style: {
-        border: `1px solid ${Colors.Gray02}`,
+        border: `1px solid ${Colors.Gray03}`,
         backgroundColor: Colors.White,
         color: Colors.TextColor,
         borderRadius: '8px',
@@ -586,6 +594,14 @@ const BuyGiftcardForm = class {
         this.recipientEmailConfirm = null;
         this.deliveryType = DeliveryType.Email;
         this.isDeliveryDoneVisible = false;
+        if (this.deliveryInput) {
+          this.deliveryInput.placeholder = 'Enter email';
+          Inputmask.remove(this.deliveryInput);
+        }
+        if (this.deliveryReenterInput) {
+          this.deliveryReenterInput.placeholder = 'Re-enter email';
+          Inputmask.remove(this.deliveryReenterInput);
+        }
       } }, h("span", { style: {
         border: `1px solid ${Colors.Gray03}`,
         backgroundClip: 'content-box',
@@ -607,6 +623,14 @@ const BuyGiftcardForm = class {
         this.recipientEmailConfirm = null;
         this.deliveryType = DeliveryType.SMS;
         this.isDeliveryDoneVisible = false;
+        if (this.deliveryInput) {
+          this.deliveryInput.placeholder = 'Enter phone';
+          Inputmask({ mask: '(999) 999-9999' }).mask(this.deliveryInput);
+        }
+        if (this.deliveryReenterInput) {
+          this.deliveryReenterInput.placeholder = 'Re-enter phone';
+          Inputmask({ mask: '(999) 999-9999' }).mask(this.deliveryReenterInput);
+        }
       } }, h("span", { style: {
         border: `1px solid ${Colors.Gray03}`,
         backgroundClip: 'content-box',
@@ -622,7 +646,7 @@ const BuyGiftcardForm = class {
         display: 'flex',
         alignItems: 'center',
         marginTop: '24px',
-      } }, h("div", { style: { width: '48%' } }, h("input", { placeholder: isDeliveryEmail ? 'Enter email' : 'Enter phone', type: "text", value: this.recipientEmail, onInput: (evt) => this.onChangeEmail(evt.target.value.trim()), style: {
+      } }, h("div", { style: { width: '48%' } }, h("input", { type: "text", ref: el => this.deliveryInput = el, placeholder: isDeliveryEmail ? 'Enter email' : 'Enter phone', onInput: (evt) => this.onChangeEmail(evt.target.value.trim()), style: {
         border: `1px solid ${Colors.Gray03}`,
         backgroundColor: Colors.White,
         color: Colors.TextColor,
@@ -632,7 +656,7 @@ const BuyGiftcardForm = class {
         width: '100%',
         fontSize: '18px',
         fontWeight: '600',
-      } })), h("div", { style: { width: '48%', marginLeft: '4%', position: 'relative' } }, h("input", { placeholder: isDeliveryEmail ? 'Re-enter email' : 'Re-enter phone', type: "text", value: this.recipientEmailConfirm, onInput: (evt) => this.onChangeConfirmEmail(evt.target.value.trim()), style: {
+      } })), h("div", { style: { width: '48%', marginLeft: '4%', position: 'relative' } }, h("input", { type: "text", ref: el => this.deliveryReenterInput = el, placeholder: isDeliveryEmail ? 'Re-enter email' : 'Re-enter phone', onInput: (evt) => this.onChangeConfirmEmail(evt.target.value.trim()), style: {
         border: `1px solid ${Colors.Gray03}`,
         backgroundColor: Colors.White,
         color: Colors.TextColor,
@@ -643,7 +667,7 @@ const BuyGiftcardForm = class {
         fontSize: '18px',
         fontWeight: '600',
       } }), this.isDeliveryDoneVisible && (h("button", { type: "button", style: {
-        background: Colors.Secondary,
+        backgroundColor: Colors.Secondary,
         border: `1px solid ${Colors.Secondary}`,
         borderRadius: '8px',
         cursor: 'pointer',
@@ -658,7 +682,7 @@ const BuyGiftcardForm = class {
         top: '100%',
         right: '0',
         zIndex: '10',
-      }, onClick: () => this.onClickDeliveryDone() }, "Next")))), this.isInvalidEmails && (h("div", { style: {
+      }, onClick: () => this.onClickDeliveryDone() }, "Done")))), this.isInvalidEmails && (h("div", { style: {
         color: Colors.Red03,
         fontSize: '90%',
         marginTop: '16px',
@@ -672,7 +696,7 @@ const BuyGiftcardForm = class {
         marginTop: '16px',
         padding: '16px',
       } }, "Gift card info will send to your email once it cannot delivery to recipient")), h("div", { id: "page--gift-card-style" }), giftCardStyles.length > 0 && (h("div", { style: {
-        borderTop: `1px solid ${Colors.Gray02}`,
+        borderTop: `1px solid ${Colors.Gray03}`,
         marginTop: '24px',
         paddingTop: '16px',
       } }, h("div", { style: { fontSize: '18px' } }, "Select Gift Card style"), h("div", { style: { marginTop: '12px' } }, giftCardStyles.map((giftCardStyle, idx) => {
@@ -696,26 +720,23 @@ const BuyGiftcardForm = class {
           alignItems: 'center',
           overflow: 'hidden',
         }, onClick: () => this.selectedStyleId = giftCardStyle.id }, isSelected && (h("div", null, h("div", { style: {
-          backgroundColor: 'rgba(0, 0, 0, 0.25)',
+          backgroundColor: 'rgba(0, 0, 0, 0.35)',
           borderRadius: '8px',
           position: 'absolute',
           inset: '0',
           zIndex: '3',
-        } }), h("i", { class: "ri-checkbox-circle-fill", style: {
+        } }), h("span", { style: {
           position: 'absolute',
           left: '50%',
           top: '50%',
           transform: 'translate(-50%, -50%)',
-          fontSize: '32px',
           zIndex: '5',
-        } }))), h("img", { src: giftCardStyle.imageUrl, alt: `Style ${idx + 1}`, style: { position: 'relative', maxHeight: '100%', maxWidth: '100%', zIndex: '2' } }))));
+        } }, h("icon-checked", null)))), h("img", { src: giftCardStyle.imageUrl, alt: `Style ${idx + 1}`, style: { position: 'relative', maxHeight: '100%', maxWidth: '100%', zIndex: '2' } }))));
     })))), h("div", { style: {
-        borderTop: `1px solid ${Colors.Gray02}`,
+        borderTop: `1px solid ${Colors.Gray03}`,
         marginTop: '24px',
         paddingTop: '16px',
-      } }, h("div", { style: { fontSize: '18px' } }, "Delivery date"), h("div", { style: { marginTop: '12px', maxWidth: '50%' } }, h("input", { type: "date", placeholder: "Today", onInput: (evt) => {
-        this.deliveryDate = evt.target.value.trim();
-      }, style: {
+      } }, h("div", { style: { fontSize: '18px' } }, "Delivery date"), h("div", { style: { marginTop: '12px', maxWidth: '50%', position: 'relative' } }, h("div", { style: {
         backgroundColor: Colors.White,
         border: `1px solid ${Colors.Gray03}`,
         color: Colors.TextColor,
@@ -724,6 +745,27 @@ const BuyGiftcardForm = class {
         height: '48px',
         width: '100%',
         fontSize: '18px',
+        display: 'flex',
+        alignItems: 'center',
+      } }, this.deliveryDate || 'Today'), h("span", { style: {
+        color: Colors.Black,
+        position: 'absolute',
+        right: '0',
+        top: '0',
+        zIndex: '2',
+        height: '48px',
+        width: '48px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingTop: '6px',
+      } }, h("icon-date", null)), h("input", { class: "fs-input--date", type: "date", placeholder: "Today", min: dayjs_min().format(dateFormat), onInput: (evt) => {
+        this.deliveryDate = evt.target.value.trim();
+      }, style: {
+        position: 'absolute',
+        inset: '0',
+        opacity: '0',
+        zIndex: '3',
       } })), h("div", { style: { marginTop: '16px' } }, h("textarea", { rows: 4, placeholder: "Include a message...", onInput: (evt) => {
         this.recipientMessage = evt.target.value.trim();
       }, style: {
@@ -739,7 +781,7 @@ const BuyGiftcardForm = class {
         marginTop: '24px',
         textAlign: 'right',
       } }, h("button", { type: "button", style: {
-        background: Colors.Secondary,
+        backgroundColor: Colors.Secondary,
         border: `1px solid ${Colors.Secondary}`,
         borderRadius: '8px',
         cursor: 'pointer',
@@ -759,16 +801,14 @@ const BuyGiftcardForm = class {
   }
   renderPaymentSucceed() {
     return (h("div", { style: { paddingTop: '24px', textAlign: 'center' } }, h("div", { style: {
-        backgroundColor: Colors.Success01,
-        color: Colors.White,
-        borderRadius: '50%',
+        color: Colors.Success03,
         alignItems: 'center',
         justifyContent: 'center',
         margin: 'auto',
         display: 'flex',
-        height: '84px',
-        width: '84px',
-      } }, h("i", { class: "ri-check-fill", style: { fontSize: '32px', color: Colors.Success03 } })), h("div", { style: { fontSize: '24px', fontWeight: '700', lineHeight: '1.4', marginTop: '24px' } }, "Thank you!"), h("div", { style: { marginTop: '12px' } }, "Your gift card has been purchased successfully")));
+        height: '90px',
+        width: '90px',
+      } }, h("icon-checked", { size: 84 })), h("div", { style: { fontSize: '24px', fontWeight: '700', lineHeight: '1.4', marginTop: '24px' } }, "Thank you!"), h("div", { style: { marginTop: '12px' } }, "Your gift card has been purchased successfully")));
   }
   async createCardPayment() {
     try {
@@ -821,7 +861,7 @@ const BuyGiftcardForm = class {
             ? ((giftCardStyles || []).find(style => style.id === this.selectedStyleId) || {}).imageUrl : '';
           const recipientUserEmail = (this.recipientEmail || '').indexOf('@') > -1 ? this.recipientEmail : '';
           const recipientUserPhone = (this.recipientEmail || '').indexOf('@') === -1 ? this.recipientEmail : '';
-          await HttpService().onBuyGiftCard(this.salonInfo.id, {
+          const response = await HttpService().onBuyGiftCard(this.salonInfo.id, {
             source: '',
             amount: this.customAmount || this.selectedAmount || '',
             gift_card_style: selectedGiftCardStyle || '',
@@ -844,14 +884,20 @@ const BuyGiftcardForm = class {
               magensa_transaction_id: transactionID,
             },
           });
-          this.step = FormStep.PaymentSucceed;
+          const { status, message } = (response.data || {});
+          if (status === true) {
+            this.step = FormStep.PaymentSucceed;
+          }
+          else {
+            this.errorMessage = message || `Something went wrong when sending your gift card`;
+          }
         }
         else {
           this.errorMessage = `Something went wrong with your credit card`;
         }
       }
       catch (error) {
-        this.errorMessage = error.message || (error.error && error.error.message) || get_1(error, 'response.data.message') || `Something went wrong when purchasing your gift card`;
+        this.errorMessage = error.message || (error.error && error.error.message) || get_1(error, 'response.data.message') || `Something went wrong when sending your gift card`;
       }
     }
     this.isSubmitting = false;
@@ -869,9 +915,9 @@ const BuyGiftcardForm = class {
         fontSize: '18px',
         fontWeight: '700',
         marginLeft: '6px',
-      } }, this.deliveryDate ? dayjs_min(this.deliveryDate).format(shortDateFormat) : 'Today')), h("div", { style: { fontSize: '18px', marginTop: '24px' } }, "Payment"), h("div", { style: { marginTop: '8px', marginLeft: '-6px' } }, h("credit-card-types", null)), h("div", { id: "buy-giftcard--payment", style: { height: '300px', maxWidth: '400px', marginTop: '24px' } }), h("button", { type: "button", disabled: (2 > 1 || this.isSubmitting), style: {
+      } }, this.deliveryDate ? dayjs_min(this.deliveryDate).format(shortDateFormat) : 'Today')), h("div", { style: { fontSize: '18px', marginTop: '24px' } }, "Payment"), h("div", { style: { marginTop: '8px', marginLeft: '-6px' } }, h("credit-card-types", null)), h("div", { id: "buy-giftcard--payment", style: { height: '300px', maxWidth: '400px', marginTop: '24px' } }), h("div", { class: "fs--form--actions" }, h("button", { type: "button", disabled: this.isSubmitting, style: {
         border: `1px solid ${Colors.Secondary}`,
-        background: Colors.Secondary,
+        backgroundColor: Colors.Secondary,
         color: Colors.White,
         borderRadius: '8px',
         cursor: 'pointer',
@@ -881,13 +927,15 @@ const BuyGiftcardForm = class {
         paddingRight: '24px',
         height: '44px',
         width: '100%',
-      }, onClick: () => this.onSubmitPaymentForm() }, "Submit ", (2 > 1 || this.isSubmitting) && (h("span", { class: "fs-spin", style: { marginLeft: '4px' } }, h("i", { class: "ri-loader-4-line" })))), this.errorMessage && (h("div", { style: {
-        backgroundColor: Colors.Red01,
-        border: `1px solid ${Colors.Red02}`,
-        marginBottom: '24px',
-        marginTop: '24px',
-        padding: '16px',
-      } }, this.errorMessage))));
+        ...this.isSubmitting ? {
+          color: Colors.TextColor,
+          borderColor: Colors.Gray03,
+          backgroundColor: Colors.Gray03,
+        } : {},
+      }, onClick: () => this.onSubmitPaymentForm() }, "Submit ", this.isSubmitting && (h("span", { style: { marginLeft: '4px' } }, h("icon-loading", null)))), this.errorMessage && (h("div", { style: {
+        color: Colors.Red03,
+        marginTop: '16px',
+      } }, this.errorMessage)))));
   }
   renderSalonInfo() {
     const salonImageUrl = getSalonImage(this.salonInfo);
@@ -902,11 +950,10 @@ const BuyGiftcardForm = class {
       } }, this.salonInfo.businessName), h("div", { style: {
         display: 'flex',
         marginTop: '4px',
-      } }, h("i", { class: "ri-map-pin-line", style: {
+      } }, h("span", { style: {
         color: Colors.Gray05,
         marginRight: '4px',
-        fontSize: '20px',
-      } }), h("div", { style: {
+      } }, h("icon-location-marker", { size: 18 })), h("div", { style: {
         flexGrow: '1',
         flexShrink: '1',
         overflow: 'hidden',
@@ -915,11 +962,10 @@ const BuyGiftcardForm = class {
         display: 'flex',
         alignItems: 'center',
         marginTop: '4px',
-      } }, h("i", { class: "ri-phone-line", style: {
+      } }, h("span", { style: {
         color: Colors.Gray05,
         marginRight: '4px',
-        fontSize: '20px',
-      } }), h("div", { style: {
+      } }, h("icon-phone", { size: 18 })), h("div", { style: {
         flexGrow: '1',
         flexShrink: '1',
         overflow: 'hidden',