@designcrowd/library.brand-page 5.17.2 → 5.17.4

package/src/brand-page/models/payment.model.ts

@@ -2,6 +2,29 @@ import type { Content } from './content.model';
 import type { ProductModel } from './shop.model';
 import type { TextStyleDeclaration } from './styles.model';
 
+export const STRIPE_ADDRESS_LIMITS = {
+  name: { min: 1, max: 350 },
+  line1: { min: 1, max: 200 },
+  line2: { min: 0, max: 200 },
+  city: { min: 0, max: 100 },
+  state: { min: 0, max: 100 },
+  postalCode: { min: 0, max: 20 },
+  country: { min: 2, max: 2 },
+} as const;
+
+export type StripeAddressField = keyof typeof STRIPE_ADDRESS_LIMITS;
+
+export interface StripeShippingDetails {
+  name: string;
+  line1: string;
+  line2?: string;
+  city?: string;
+  state?: string;
+  postalCode?: string;
+  country: string;
+  phone?: string;
+}
+
 export interface StripePaymentIntent {
   id: string;
   object: 'payment_intent';
@@ -129,6 +152,7 @@ export interface ShopContentConfig extends PaymentConfig {
   paymentOptionDisplayType: PaymentOptionDisplayType;
   paymentOptionImageType: PaymentOptionImageType;
   isCustomerRequestDetailsEnabled: boolean;
+  isShippingEnabled: boolean;
 }
 
 export interface ShopContent extends Content {

package/src/brand-page/utils/view-model.util.ts

@@ -908,6 +908,7 @@ const mapToShopViewModel = (
         ...content.fillColor,
       },
       isFullWidth: true,
+      isShippingEnabled: content.shopPaymentConfig?.isShippingEnabled ?? false,
     },
     styles,
   );

package/src/brand-page/view-models.ts

@@ -162,6 +162,7 @@ export interface ShopViewModel
     Omit<ShopContent, 'type'> {
   buttonStyles: ButtonStyles;
   isFullWidth: boolean;
+  isShippingEnabled: boolean;
 }
 
 export interface ContactFormViewModel

package/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.vue

@@ -258,7 +258,7 @@ export default {
 }
 
 .c-save-bar {
-  @apply tw-absolute tw-top-0 tw-left-0 tw-w-full tw-p-4 tw-box-border tw-z-20 tw-transition-all tw-duration-300 tw-ease-out tw-transform tw--translate-y-1/2 tw-opacity-0;
+  @apply tw-absolute tw-top-0 tw-left-0 tw-w-full tw-p-4 tw-box-border tw-z-[100] tw-transition-all tw-duration-300 tw-ease-out tw-transform tw--translate-y-1/2 tw-opacity-0;
 }
 
 .c-save-bar--visible {

package/src/brand-page-maker/composables/useEventTracker.ts

@@ -72,6 +72,7 @@ export const EVENTS = {
   WEBSITE_MAKER_DIGITAL_BUSINESS_CARDS_HIDE_POPUP:
     'website_maker_digital_business_cards_hide_popup',
   WEBSITE_MAKER_GETTY_VIDEO: 'website_maker_getty_video',
+  WEBSITE_MAKER_SHIPPING_TOGGLE: 'website_maker_shipping_toggle',
 };
 
 export const SELECT_LOCATIONS = {
@@ -408,6 +409,11 @@ const useEventTracker = () => {
     },
     ...gettyVideoEvents,
     ...publishedWebsiteEvents,
+    sendShippingToggleEvent: (isEnabled: boolean) => {
+      _publishEvent(EVENTS.WEBSITE_MAKER_SHIPPING_TOGGLE, {
+        is_enabled: isEnabled,
+      });
+    },
   };
 };
 

package/src/brand-page-maker/constants/config-settings-constant.ts

@@ -2960,6 +2960,7 @@ export const SHOP_SECTION_SETTINGS_CONFIG = (): ContentSettingsConfig<
   ShopContent,
   {
     paymentConfig: any;
+    isShippingEnabled: boolean;
   }
 > => ({
   category: 'monetize',
@@ -3045,6 +3046,13 @@ export const SHOP_SECTION_SETTINGS_CONFIG = (): ContentSettingsConfig<
       groupId: REQUEST_PAYMENT_GROUPS.settings,
       overrideValueFieldName: 'shopPaymentConfig',
     },
+    isShippingEnabled: {
+      type: 'payment-toggle',
+      groupId: REQUEST_PAYMENT_GROUPS.settings,
+      overrideValueFieldName: 'shopPaymentConfig',
+      label: contentSettingsTr(`shippingLabel`),
+      placeholder: contentSettingsTr(`shippingPlaceholder`),
+    },
     fillColor: {
       type: 'color',
       groupId: REQUEST_PAYMENT_GROUPS.style,

package/src/brand-page-maker/models/content-settings.ts

@@ -388,6 +388,7 @@ export const createInitialShopContent = (
     shopPaymentConfig: {
       paymentOptions: [],
       isCustomerRequestDetailsEnabled: false,
+      isShippingEnabled: false,
       paymentOptionDisplayType: PAYMENT_OPTION_DISPLAY_TYPES.text,
       paymentOptionImageType: PAYMENT_OPTION_IMAGE_TYPES.auto,
     },

package/src/brand-page-maker/validators/section-button.validator.ts

@@ -14,6 +14,10 @@ const MISSING_BUTTON_TEL_MESSAGE = () => validatorTr('invalidTelMessage');
 
 const MISSING_PAGE_SLUG_MESSAGE = () => validatorTr('selectAPage');
 
+const containsAtSymbol = (value: unknown): boolean => {
+  return typeof value === 'string' && value.includes('@');
+};
+
 export const textValidator: ContentValidator<BannerSectionContent> = (
   section,
 ): ValidateResult => {
@@ -39,7 +43,7 @@ export const urlValidator: ContentValidator<
 > = (section): ValidateResult => {
   if (
     section.buttonLinkType === BUTTON_LINK_TYPE.url &&
-    !isURL(section.url) &&
+    (!isURL(section.url) || containsAtSymbol(section.url)) &&
     section.buttonText !== false &&
     section.buttonText?.length > 0
   ) {