JezK

Edit File: sc-customer-details.cjs.entry.js.map

{"file":"sc-customer-details.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,oBAAoB,GAAG,EAAE,CAAC;AAChC,gCAAe,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;gVC4DV,UAAE,sYAUF,UAAE,yUAM2E,UAAE,oNACJ,UAAE,8TAI7E,UAAE;;;;;iKAS8B,UAAE;;iPAQM,UAAE;;;;;;;sKA4BlC,UAAE;;;;;;;wUA0BR,UAAE,ybAGd,UAAE,qaAQJ,UAAE;;;;;;;;","names":[],"sources":["src/components/ui/customer-details/sc-customer-details.css?tag=sc-customer-details&encapsulation=shadow","src/components/ui/customer-details/sc-customer-details.tsx"],"sourcesContent":["","import { Component, Element, h, Prop, State } from '@stencil/core';\nimport { __ } from '@wordpress/i18n';\nimport { Address, Customer } from '../../../types';\nimport { countryChoices } from '../../../functions/address';\nimport { zones } from '../../../functions/tax';\n\n/**\n * @part base - The elements base wrapper.\n * @part heading - The heading.\n * @part heading-text - The heading text wrapper.\n * @part heading-title - The heading title.\n * @part heading-description - The heading description.\n * @part error__base - The elements base wrapper.\n * @part error__icon - The alert icon.\n * @part error__text - The alert text.\n * @part error__title - The alert title.\n * @part error__ message - The alert message.\n * @part test-tag__base - The base test tag.\n * @part text-tag__content - The base test tag content.\n * @part button__base - The button base.\n * @part button__label - The button label.\n * @part button__prefix - The button prefix.\n */\n@Component({\n tag: 'sc-customer-details',\n styleUrl: 'sc-customer-details.css',\n shadow: true,\n})\nexport class ScCustomerDetails {\n @Element() el: HTMLScCustomerDetailsElement;\n @Prop() heading: string;\n @Prop() editLink: string;\n @Prop() customer: Customer;\n @Prop() loading: boolean;\n @Prop() error: string;\n /** Holds our country choices. */\n @State() countryChoices: Array<{ value: string; label: string }>;\n\n componentWillLoad() {\n this.initCountryChoices();\n }\n\n async initCountryChoices() {\n this.countryChoices = await countryChoices();\n }\n\n renderContent() {\n if (this.loading) {\n return this.renderLoading();\n }\n\n if (!this.customer) {\n return this.renderEmpty();\n }\n\n return (\n <sc-card no-padding>\n <sc-stacked-list>\n {!!this?.customer?.name && (\n <sc-stacked-list-row style={{ '--columns': '3' }} mobileSize={480}>\n <div>\n <strong>{__('Billing Name', 'surecart')}</strong>\n </div>\n <div>{this.customer?.name}</div>\n <div></div>\n {/** Needed for formatting */}\n </sc-stacked-list-row>\n )}\n {!!this?.customer?.email && (\n <sc-stacked-list-row style={{ '--columns': '3' }} mobileSize={480}>\n <div>\n <strong>{__('Billing Email', 'surecart')}</strong>\n </div>\n <div>{this.customer?.email}</div>\n <div></div>\n </sc-stacked-list-row>\n )}\n {!!Object.keys(this?.customer?.shipping_address_display || {}).length && this.renderAddress(__('Shipping Address', 'surecart'), this.customer.shipping_address_display)}\n {!!Object.keys(this.customer?.billing_address_display || {}).length && this.renderAddress(__('Billing Address', 'surecart'), this.customer.billing_address_display)}\n {!!this?.customer?.phone && (\n <sc-stacked-list-row style={{ '--columns': '3' }} mobileSize={480}>\n <div>\n <strong>{__('Phone', 'surecart')}</strong>\n </div>\n <div>{this.customer?.phone}</div>\n <div></div>\n </sc-stacked-list-row>\n )}\n {(() => {\n const { number_type, number } = this.customer?.tax_identifier || {};\n if (!number || !number_type) return;\n const label = zones?.[number_type]?.label || __('Tax Id', 'surecart');\n const isInvalid = this.customer?.tax_identifier?.[`valid_${number_type}`] === false;\n return (\n <sc-stacked-list-row style={{ '--columns': '3' }} mobileSize={480}>\n <div>\n <strong>{label}</strong>\n </div>\n <div>\n {number} {isInvalid && <sc-tag type=\"warning\">{__('Invalid', 'surecart')}</sc-tag>}\n </div>\n <div></div>\n </sc-stacked-list-row>\n );\n })()}\n </sc-stacked-list>\n </sc-card>\n );\n }\n\n renderAddress(label: string = 'Address', address: Address) {\n return (\n <sc-stacked-list-row style={{ '--columns': '3' }} mobileSize={480}>\n <div>\n <strong>{label}</strong>\n </div>\n <div style={{ whiteSpace: 'pre-line' }}>{address}</div>\n <div></div>\n </sc-stacked-list-row>\n );\n }\n\n renderEmpty() {\n return (\n <div>\n <sc-divider style={{ '--spacing': '0' }}></sc-divider>\n <slot name=\"empty\">\n <sc-empty icon=\"user\">{__(\"You don't have any billing information.\", 'surecart')}</sc-empty>\n </slot>\n </div>\n );\n }\n\n renderLoading() {\n return (\n <sc-card no-padding>\n <sc-stacked-list>\n <sc-stacked-list-row style={{ '--columns': '2' }} mobile-size={0}>\n <div style={{ padding: '0.5em' }}>\n <sc-skeleton style={{ width: '30%', marginBottom: '0.75em' }}></sc-skeleton>\n <sc-skeleton style={{ width: '20%', marginBottom: '0.75em' }}></sc-skeleton>\n <sc-skeleton style={{ width: '40%' }}></sc-skeleton>\n </div>\n </sc-stacked-list-row>\n </sc-stacked-list>\n </sc-card>\n );\n }\n\n render() {\n return (\n <sc-dashboard-module exportparts=\"base, heading, heading-text, heading-title, heading-description\" class=\"customer-details\" error={this.error}>\n <span slot=\"heading\">\n {this.heading || __('Billing Details', 'surecart')}{' '}\n {!!this?.customer?.id && !this?.customer?.live_mode && (\n <sc-tag exportparts=\"base:test-tag__base, content:test-tag__content\" type=\"warning\" size=\"small\">\n {__('Test', 'surecart')}\n </sc-tag>\n )}\n </span>\n\n {!!this.editLink && !!this.customer?.id && (\n <sc-button exportparts=\"base:button__base, label:button__label, prefix:button__prefix\" type=\"link\" href={this.editLink} slot=\"end\">\n <sc-icon name=\"edit-3\" slot=\"prefix\"></sc-icon>\n {__('Update', 'surecart')}\n </sc-button>\n )}\n\n {this.renderContent()}\n </sc-dashboard-module>\n );\n }\n}\n"],"version":3}