import { get, startCase, uniqueId } from "lodash"; import { ILayoutSettings, PageSectionCategory, } from "@sc/plugins/misc/v2/blocks/weblayouts/types"; import { ComponentTypes } from "@sc/plugins/webcomponents/v2/types"; import { combineData, lorem } from "../../utils"; import { default as defaultData } from "./data.json"; import { style } from "./style"; import { getImagePlaceholder, ImagePlaceholderTypes, getVideoPlaceholder, VideoPlaceholderTypes, } from "../../Placeholders"; import theme from "../../theme"; import { FormLayouts } from "../types"; import { FormFieldTypes } from "@sc/modules/v2/CRUD/FormBuilder/types"; import { FieldNamePresets } from "@sc/modules/v2/CRUD/FormBuilder/EditFormField/types"; import { selectOptions } from "@sc/modules/v2/CRUD/FormBuilder/EditFormField/fieldNames"; import { OrderSummaryTypes, OrderSummaryItemTypes, OrderSummaryDisplayOptions, } from "@sc/plugins/webcomponents/v2/OrderSummary/types"; import { faCcVisa, faCcMastercard, faCcAmex, faCcDiscover, } from "@fortawesome/free-brands-svg-icons"; import { IconSource, IconTypes } from "@sc/plugins/webcomponents/v2/Icon/types"; const content = combineData(defaultData); const settings: ILayoutSettings = { label: FormLayouts.TEN, layout: FormLayouts.TEN, previewImage: "https://sandcastleassets.s3.amazonaws.com/blocks/forms/Form10.png", default: { type: ComponentTypes.SECTION, label: PageSectionCategory.FORM, bodyOnly: true, canHaveChildren: false, properties: { ...style.SECTION, ...style.SECTION_INNER, }, children: [ { type: ComponentTypes.COLUMNS, canHaveChildren: false, properties: { width: "100%", }, children: [ { type: ComponentTypes.COLUMN, canHaveChildren: true, preventDelete: true, md: parseInt((7 * 100) / 12), properties: { height: "100%", padding: 20, minHeight: 20 }, children: [ { type: ComponentTypes.HEADLINE, canHaveChildren: false, properties: { ...style.HEADLINE, ...get(content, "main_headline.style", {}), }, html: "You're Almost Finished...", }, { type: ComponentTypes.HEADLINE, canHaveChildren: false, properties: { ...style.SUBHEADLINE, marginTop: 30, }, html: "Your information is secure and will not be shared with a 3rd party", }, { type: ComponentTypes.FORM, data: [ { type: FormFieldTypes.TEXT, name: "firstName", placeholder: "First Name", preset: FieldNamePresets.FIRSTNAME, }, { type: FormFieldTypes.TEXT, name: "lastName", placeholder: "Last Name", preset: FieldNamePresets.LASTNAME, }, { type: FormFieldTypes.TEXT, name: "email", placeholder: "Email", preset: FieldNamePresets.EMAIL, }, ], properties: { containerStyle: style.FORM_FIELD.style, inputStyle: style.FORM_FIELD.inputStyle, labelStyle: style.FORM_FIELD.labelStyle, }, }, { type: ComponentTypes.HEADLINE, canHaveChildren: false, properties: { ...style.SUBHEADLINE, marginTop: 30, }, html: "Billing Address", }, { type: ComponentTypes.FORM, data: [ { type: FormFieldTypes.TEXT, name: FieldNamePresets.NAME, placeholder: "Name", preset: FieldNamePresets.ADDRESS, }, { type: FormFieldTypes.TEXT, name: FieldNamePresets.CITY, placeholder: "City", preset: FieldNamePresets.CITY, }, { type: FormFieldTypes.DROPDOWN, name: FieldNamePresets.STATE, placeholder: "State", preset: FieldNamePresets.STATE, data: selectOptions.state, }, { type: FormFieldTypes.DROPDOWN, name: FieldNamePresets.COUNTRY, placeholder: "Country", preset: FieldNamePresets.COUNTRY, data: selectOptions.country, }, { type: FormFieldTypes.TEXT, name: FieldNamePresets.PHONE, placeholder: "Phone", preset: FieldNamePresets.PHONE, }, ], properties: { marginTop: 10, containerStyle: style.FORM_FIELD.style, inputStyle: style.FORM_FIELD.inputStyle, labelStyle: style.FORM_FIELD.labelStyle, }, }, { type: ComponentTypes.ORDERSUMMARY, data: [ { id: uniqueId(), title: "Premium Account", itemType: OrderSummaryItemTypes.PRODUCT, value: "FREE", }, { id: uniqueId(), title: "Shipping", itemType: OrderSummaryItemTypes.PRODUCT, value: 7.95, }, ], showHeader: true, showTotal: true, properties: { marginTop: 40 }, designType: OrderSummaryTypes.STANDARD, displayOptions: { [OrderSummaryDisplayOptions.HEADER]: true, [OrderSummaryDisplayOptions.PRODUCTS]: true, [OrderSummaryDisplayOptions.TOTAL]: true, [OrderSummaryDisplayOptions.SUBTOTAL]: false, }, }, { type: ComponentTypes.CONTAINER, canHaveChildren: true, properties: { border: `1px solid #DDD`, backgroundColor: "#EEE", padding: 30, borderRadius: 3, marginTop: 40, }, children: [ { type: ComponentTypes.HEADLINE, canHaveChildren: false, properties: { ...style.SUBHEADLINE, ...get(content, "main_headline.style", {}), }, html: "Security is our top priority", }, { type: ComponentTypes.TEXT, canHaveChildren: false, properties: { ...style.TEXT, ...get(content, "sub_headline.style", {}), }, html: lorem.generateParagraphs(1), }, ], }, { type: ComponentTypes.COLUMNS, canHaveChildren: false, properties: { width: "100%", }, children: [ { type: ComponentTypes.COLUMN, canHaveChildren: true, preventDelete: true, md: parseInt((6 * 100) / 12), properties: { height: "100%", padding: 0, minHeight: 20 }, children: [ { type: ComponentTypes.HEADLINE, canHaveChildren: false, properties: { ...style.HEADLINE, ...get(content, "main_headline.style", {}), marginTop: 30, }, html: "Payment Information", }, ], }, { type: ComponentTypes.COLUMN, canHaveChildren: true, preventDelete: true, md: parseInt((6 * 100) / 12), properties: { height: "100%", padding: 0, minHeight: 20, mobile: { desktop: { display: "block", }, smartphone: { display: "none", }, }, }, children: [ { type: ComponentTypes.LIST, properties: { marginTop: 30 }, data: [ { icon: faCcVisa, iconSource: IconSource.FONTAWESOME, iconStyle: { fontSize: "20pt", color: theme.backgroundColor, }, style: { display: "inline-block", padding: "0 3px", }, }, { icon: faCcMastercard, iconSource: IconSource.FONTAWESOME, iconStyle: { fontSize: "20pt", color: theme.backgroundColor, }, style: { display: "inline-block", padding: "0 3px", }, }, { icon: faCcDiscover, iconSource: IconSource.FONTAWESOME, iconStyle: { fontSize: "20pt", color: theme.backgroundColor, }, style: { display: "inline-block", padding: "0 3px", }, }, { icon: faCcAmex, iconSource: IconSource.FONTAWESOME, iconStyle: { fontSize: "20pt", color: theme.backgroundColor, }, style: { display: "inline-block", padding: "0 3px", }, }, ], }, ], }, ], }, { type: ComponentTypes.FORM, data: [ { type: FormFieldTypes.TEXT, name: FieldNamePresets.CARDNUMBER, placeholder: "•••• •••• •••• ••••", preset: FieldNamePresets.CARDNUMBER, }, { type: FormFieldTypes.DROPDOWN, name: FieldNamePresets.EXPIRATIONMONTH, placeholder: "Expiration Month", preset: FieldNamePresets.EXPIRATIONMONTH, columns: 4, }, { type: FormFieldTypes.DROPDOWN, name: FieldNamePresets.EXPIRATIONYEAR, placeholder: "Expiration Year", preset: FieldNamePresets.EXPIRATIONYEAR, columns: 4, }, { type: FormFieldTypes.TEXT, name: FieldNamePresets.CVV, placeholder: "CVV", preset: FieldNamePresets.CVV, columns: 4, }, ], properties: { containerStyle: style.FORM_FIELD.style, inputStyle: style.FORM_FIELD.inputStyle, labelStyle: style.FORM_FIELD.labelStyle, }, }, { type: ComponentTypes.FORMFIELD, canHaveChildren: false, attributes: { placeholder: "Terms", name: "Terms", items: [ { id: 0, label: "I agree to the terms and conditions", value: false, }, ], }, fieldType: FormFieldTypes.CHECKBOXES, styles: { containerStyle: { ...style.FORM_FIELD.style, }, labelStyle: style.FORM_FIELD.labelStyle, }, }, { type: ComponentTypes.BUTTON, canHaveChildren: false, properties: style.BUTTON.style, caption1: "Get Instant Access", caption1style: style.BUTTON.caption1, }, ], }, { type: ComponentTypes.COLUMN, canHaveChildren: true, preventDelete: true, md: parseInt((5 * 100) / 12), properties: { height: "100%", padding: 20, minHeight: 20 }, children: [ { type: ComponentTypes.CONTAINER, canHaveChildren: true, properties: { borderRadius: 5, backgroundColor: theme.backgroundColor, padding: 30, }, children: [ { type: ComponentTypes.HEADLINE, canHaveChildren: false, properties: { ...style.SUBHEADLINE, color: theme.foregroundColor, }, html: "Your Purchase Includes These BONUSES", }, { type: ComponentTypes.LIST, properties: { marginTop: 30 }, data: [ { caption: "Bonus #1: " + startCase(lorem.generateWords(3)), style: style.LISTITEM.style, iconStyle: style.LISTITEM.iconStyle, contentStyle: style.LISTITEM.contentStyle, icon: IconTypes.CheckCircleOutline, }, { caption: "Bonus #2: " + startCase(lorem.generateWords(3)), style: style.LISTITEM.style, iconStyle: style.LISTITEM.iconStyle, contentStyle: style.LISTITEM.contentStyle, icon: IconTypes.CheckCircleOutline, }, { caption: "Bonus #3: " + startCase(lorem.generateWords(3)), style: style.LISTITEM.style, iconStyle: style.LISTITEM.iconStyle, contentStyle: style.LISTITEM.contentStyle, icon: IconTypes.CheckCircleOutline, }, { caption: "Bonus #4: " + startCase(lorem.generateWords(3)), style: style.LISTITEM.style, iconStyle: style.LISTITEM.iconStyle, contentStyle: style.LISTITEM.contentStyle, icon: IconTypes.CheckCircleOutline, }, ], }, { type: ComponentTypes.HEADLINE, canHaveChildren: false, properties: { ...style.SUBHEADLINE, marginTop: 30, color: theme.foregroundColor, }, html: "Use these bonuses to help you:", }, { type: ComponentTypes.LIST, properties: { marginTop: 30 }, data: [ { caption: `${startCase( lorem.generateWords(3) )}: ` + startCase(lorem.generateSentences(1)), style: style.LISTITEM.style, iconStyle: style.LISTITEM.iconStyle, contentStyle: style.LISTITEM.contentStyle, icon: IconTypes.CheckCircleOutline, }, { caption: `${startCase( lorem.generateWords(3) )}: ` + startCase(lorem.generateSentences(1)), style: style.LISTITEM.style, iconStyle: style.LISTITEM.iconStyle, contentStyle: style.LISTITEM.contentStyle, icon: IconTypes.CheckCircleOutline, }, { caption: `${startCase( lorem.generateWords(3) )}: ` + startCase(lorem.generateSentences(1)), style: style.LISTITEM.style, iconStyle: style.LISTITEM.iconStyle, contentStyle: style.LISTITEM.contentStyle, icon: IconTypes.CheckCircleOutline, }, { caption: `${startCase( lorem.generateWords(3) )}: ` + startCase(lorem.generateSentences(1)), style: style.LISTITEM.style, iconStyle: style.LISTITEM.iconStyle, contentStyle: style.LISTITEM.contentStyle, icon: IconTypes.CheckCircleOutline, }, ], }, { type: ComponentTypes.HEADLINE, canHaveChildren: false, properties: { ...style.HEADLINE, marginTop: 30, color: theme.foregroundColor, }, html: "Need Help?", }, { type: ComponentTypes.TEXT, canHaveChildren: false, properties: { ...style.TEXT, color: theme.foregroundColor }, html: `Call us at 1-888-555-1212
Mon - Fri 9:00 - 5:00 EST`, }, { type: ComponentTypes.HEADLINE, canHaveChildren: false, properties: { ...style.HEADLINE, marginTop: 40, color: theme.foregroundColor, }, html: "Customer Support:", }, { type: ComponentTypes.TEXT, canHaveChildren: false, properties: { ...style.TEXT, color: theme.foregroundColor }, html: `contact@email.com`, }, ], }, ], }, ], }, ], }, }; export default settings;