#3 added fallbackLanguage

apps/api-core-node/dev-proxy.js

@@ -27,6 +27,7 @@ async function updateConfigFiles(tunnelUrl) {
 	}
 }
 
+// TODO: Or sovle the problem with https://filippi.dev/quicks/timeout-when-developing-extensions/ ?
 (async () => {
 	console.log('Starting Cloudflare tunnel...');
 	const { url, connections, stop } = tunnel({ '--url': 'http://localhost:8787' });

apps/api-core-node/package.json

@@ -33,7 +33,7 @@
 	},
 	"devDependencies": {
 		"@blgc/config": "^0.0.23",
-		"@types/node": "^22.5.2",
+		"@types/node": "^22.5.4",
 		"cloudflared": "^0.5.3",
 		"dotenv": "^16.4.5",
 		"tsx": "^4.19.0"

apps/sfy-eu-blocks-app/admin-block-extension/README.md

@@ -2,4 +2,20 @@
 
 - [Allowed Components](https://shopify.dev/docs/api/admin-extensions/2024-07#overview)
 - [Admin GraphQL](https://shopify.dev/docs/api/admin-graphql/)
-- [GraphiQL](https://shopify.dev/docs/api/usage/api-exploration/admin-graphiql-explorer) - Start by pressing `g`
+- [GraphiQL](https://shopify.dev/docs/api/usage/api-exploration/admin-graphiql-explorer) - Start by pressing `g`
+
+## Debug
+
+### Delete metafield definition
+```
+mutation DeleteMetafieldDefinition($id: ID!) {
+  metafieldDefinitionDelete(id: $id, deleteAllAssociatedMetafields: true) {
+    deletedDefinitionId,
+    userErrors {
+      code
+      field
+      message
+    }
+  }
+}
+```

apps/sfy-eu-blocks-app/admin-block-extension/locales/de.json

@@ -28,8 +28,7 @@
 				"content2": ", sind Eigentum der Europäischen Union, lizenziert unter der ",
 				"link2Text": "Creative Commons Namensnennung 4.0 International (CC BY 4.0) Lizenz",
 				"content3": ", und werden wie besehen bereitgestellt."
-			},
-
+			}
 		},
 		"warning": {
 			"noDatasheetForLocale": {

apps/sfy-eu-blocks-app/admin-block-extension/locales/en.default.json

@@ -28,8 +28,7 @@
 				"content2": ", are owned by the European Union, are licensed under the ",
 				"link2Text": "Creative Commons Attribution 4.0 International (CC BY 4.0) license",
 				"content3": ", and are provided as is."
-			},
-
+			}
 		},
 		"warning": {
 			"noDatasheetForLocale": {

apps/sfy-eu-blocks-app/admin-block-extension/package.json

@@ -13,7 +13,7 @@
 		"@repo/api-core-client": "workspace:*",
 		"@shopify/ui-extensions": "2024.7.0",
 		"@shopify/ui-extensions-react": "2024.7.0",
-		"eprel-client": "^0.0.15",
+		"eprel-client": "^0.0.16",
 		"feature-fetch": "^0.0.21",
 		"feature-form": "^0.0.27",
 		"feature-react": "^0.0.23",

apps/sfy-eu-blocks-app/admin-block-extension/src/components/EnergyLabelPreview.tsx

@@ -15,14 +15,14 @@ import { TEnergyLabel } from '../lib';
 export const EnergyLabelPreview: React.FC<TProps> = (props) => {
 	const { energyLabel, primaryLocale } = props;
 	const sheetUrl = React.useMemo(
-		() => (energyLabel.sheetUrlMap as Record<string, string>)[primaryLocale],
-		[energyLabel.sheetUrlMap, primaryLocale]
+		() => (energyLabel.sheet.urlMap as Record<string, string>)[primaryLocale],
+		[energyLabel.sheet.urlMap, primaryLocale]
 	);
 
 	return (
 		<BlockStack gap>
 			<InlineStack gap>
-				<Pressable href={energyLabel.labelUrlMap.PDF} target="_blank">
+				<Pressable href={energyLabel.label.urlMap.PDF} target="_blank">
 					<Image
 						alt={`Energy Label Efficiency Class ${energyLabel.energyClass}`}
 						source={`${coreApiConfig.baseUrl}/v1/energy-label/efficiency-class/arrow.svg?efficiencyClass=${energyLabel.energyClass}&size=26`}

apps/sfy-eu-blocks-app/admin-block-extension/src/components/FormSelect.tsx

@@ -0,0 +1,43 @@
+import {
+	OptionDescription,
+	OptionGroupDescription,
+	Select
+} from '@shopify/ui-extensions-react/admin';
+import { TFormField } from 'feature-form';
+import { useGlobalState } from 'feature-react/state';
+
+export const FormSelect: React.FC<TProps> = (props) => {
+	const { field, label, options, disabled, placeholder } = props;
+	const fieldStatus = useGlobalState(field.status);
+	const fieldValue = useGlobalState(field);
+
+	return (
+		<Select
+			label={label}
+			name={field.key}
+			onBlur={() => {
+				field.blur();
+			}}
+			value={fieldValue}
+			options={options}
+			onChange={(value) => {
+				field.set(value, {
+					additionalData: {
+						background: false // Because its controlled form field
+					}
+				});
+			}}
+			error={fieldStatus.type === 'INVALID' ? fieldStatus.errors[0]?.message : undefined}
+			disabled={disabled}
+			placeholder={placeholder}
+		/>
+	);
+};
+
+interface TProps {
+	label: string;
+	field: TFormField<string>;
+	options: (OptionDescription | OptionGroupDescription)[];
+	disabled?: boolean;
+	placeholder?: string;
+}

apps/sfy-eu-blocks-app/admin-block-extension/src/components/UpdateEnergyLabelMetaFieldsSection.tsx

@@ -23,6 +23,7 @@ import {
 	TEnergyLabel
 } from '../lib';
 import { EnergyLabelPreview } from './EnergyLabelPreview';
+import { FormSelect } from './FormSelect';
 import { FormTextField } from './FormTextField';
 
 export const UpdateEnergyLabelMetaFieldsBlock: React.FC<TProps> = (props) => {
@@ -35,12 +36,15 @@ export const UpdateEnergyLabelMetaFieldsBlock: React.FC<TProps> = (props) => {
 	const productIdNumber = React.useMemo(() => productId.replace(/^(.*[\\\/])/, ''), [productId]);
 
 	React.useEffect(() => {
-		$updateEnergyLabelMetafieldForm.fields.energyClass.listen((data) => {
+		$updateEnergyLabelMetafieldForm.fields.energyClass.listen(() => {
 			setFormChanged(hasFormChanged($updateEnergyLabelMetafieldForm));
 		});
 		$updateEnergyLabelMetafieldForm.fields.pdfLabelUrl.listen(() => {
 			setFormChanged(hasFormChanged($updateEnergyLabelMetafieldForm));
 		});
+		$updateEnergyLabelMetafieldForm.fields.fallbackSheetLanguage.listen(() => {
+			setFormChanged(hasFormChanged($updateEnergyLabelMetafieldForm));
+		});
 	}, [$updateEnergyLabelMetafieldForm]);
 
 	const resetMutation = useMutation<any, any, { productId: string }>({
@@ -82,18 +86,27 @@ export const UpdateEnergyLabelMetaFieldsBlock: React.FC<TProps> = (props) => {
 							field={field('modelIdentifier')}
 							disabled={true}
 						/>
-
 						<FormTextField
 							label={t('label.energyClass')}
 							field={field('energyClass') as TFormField<string>}
 							disabled={isSubmitting}
 						/>
+						<FormSelect
+							label="Fallback Sheet"
+							field={field('fallbackSheetLanguage') as TFormField<string>}
+							options={Object.keys(energyLabel.sheet.urlMap).map((language) => ({
+								value: language,
+								label: language
+							}))}
+						/>
+					</InlineStack>
+					<InlineStack gap>
+						<FormTextField
+							label={t('label.pdfLabelUrl')}
+							field={field('pdfLabelUrl')}
+							disabled={isSubmitting}
+						/>
 					</InlineStack>
-					<FormTextField
-						label={t('label.pdfLabelUrl')}
-						field={field('pdfLabelUrl')}
-						disabled={isSubmitting}
-					/>
 
 					{/* </Form> */}
 				</BlockStack>

apps/sfy-eu-blocks-app/admin-block-extension/src/components/index.ts

@@ -1,5 +1,6 @@
 export * from './BannerBlock';
 export * from './EnergyLabelPreview';
+export * from './FormSelect';
 export * from './FormTextField';
 export * from './LoadEnergyLabelSection';
 export * from './UpdateEnergyLabelMetaFieldsSection';

apps/sfy-eu-blocks-app/admin-block-extension/src/environment/config/core-api.config.ts

@@ -1,3 +1,3 @@
 export const coreApiConfig = {
-	baseUrl: 'https://exclusion-candles-holds-licence.trycloudflare.com' // TODO: Find way to sync url from api-core-node
+	baseUrl: 'https://miles-collectibles-organised-deborah.trycloudflare.com' // TODO: Find way to sync url from api-core-node
 };

apps/sfy-eu-blocks-app/admin-block-extension/src/lib/forms/update-energy-label-metafield.form.ts

@@ -1,3 +1,4 @@
+import { ENERGY_CLASSES, SHEET_LANGUAGES, TEnergyClass, TSheetLanguage } from 'eprel-client';
 import {
 	bitwiseFlag,
 	createForm,
@@ -34,9 +35,7 @@ export const $updateEnergyLabelMetafieldForm = createForm<TFormFields>({
 			defaultValue: ''
 		},
 		energyClass: {
-			validator: vValidator(
-				v.picklist(['A', 'B', 'C', 'D', 'E', 'F'], () => t('validation.energyClass.invalid'))
-			)
+			validator: vValidator(v.picklist(ENERGY_CLASSES, () => t('validation.energyClass.invalid')))
 		},
 		pdfLabelUrl: {
 			validator: vValidator(
@@ -49,6 +48,9 @@ export const $updateEnergyLabelMetafieldForm = createForm<TFormFields>({
 					)
 				)
 			)
+		},
+		fallbackSheetLanguage: {
+			validator: vValidator(v.picklist(SHEET_LANGUAGES))
 		}
 	},
 	validateMode: bitwiseFlag(FormFieldValidateMode.OnSubmit),
@@ -72,9 +74,16 @@ export const $updateEnergyLabelMetafieldForm = createForm<TFormFields>({
 		const newEnergyLabel: TEnergyLabel = {
 			...energyLabel,
 			energyClass: formData.energyClass,
-			labelUrlMap: {
-				...energyLabel.labelUrlMap,
-				PDF: formData.pdfLabelUrl
+			label: {
+				...energyLabel.label,
+				urlMap: {
+					...energyLabel.label.urlMap,
+					PDF: formData.pdfLabelUrl
+				}
+			},
+			sheet: {
+				...energyLabel.sheet,
+				fallbackLanguage: formData.fallbackSheetLanguage
 			}
 		};
 
@@ -115,8 +124,9 @@ export const $updateEnergyLabelMetafieldForm = createForm<TFormFields>({
 interface TFormFields {
 	registrationNumber: string;
 	modelIdentifier: string;
-	energyClass: 'A' | 'B' | 'C' | 'D' | 'E' | 'F';
+	energyClass: TEnergyClass;
 	pdfLabelUrl: string;
+	fallbackSheetLanguage: TSheetLanguage;
 }
 
 export interface TUpdateEnergyLabelMetafieldSubmitAdditionalData {
@@ -131,6 +141,11 @@ export function applyEnergyLabelToUpdateMetafieldForm(energyLabel: TEnergyLabel)
 	$updateEnergyLabelMetafieldForm.fields.modelIdentifier._intialValue = energyLabel.modelIdentifier;
 	$updateEnergyLabelMetafieldForm.fields.energyClass.set(energyLabel.energyClass as any);
 	$updateEnergyLabelMetafieldForm.fields.energyClass._intialValue = energyLabel.energyClass as any;
-	$updateEnergyLabelMetafieldForm.fields.pdfLabelUrl.set(energyLabel.labelUrlMap.PDF);
-	$updateEnergyLabelMetafieldForm.fields.pdfLabelUrl._intialValue = energyLabel.labelUrlMap.PDF;
+	$updateEnergyLabelMetafieldForm.fields.pdfLabelUrl.set(energyLabel.label.urlMap.PDF);
+	$updateEnergyLabelMetafieldForm.fields.pdfLabelUrl._intialValue = energyLabel.label.urlMap.PDF;
+	$updateEnergyLabelMetafieldForm.fields.fallbackSheetLanguage.set(
+		energyLabel.sheet.fallbackLanguage
+	);
+	$updateEnergyLabelMetafieldForm.fields.fallbackSheetLanguage._intialValue =
+		energyLabel.sheet.fallbackLanguage;
 }

apps/sfy-eu-blocks-app/admin-block-extension/src/lib/services/energy-label.ts

@@ -2,6 +2,7 @@ import {
 	getLabelUrl,
 	getLanguageSet,
 	getSheetUrl,
+	TEnergyClass,
 	TLabelFormat,
 	TSheetLanguage
 } from 'eprel-client';
@@ -68,7 +69,7 @@ export async function fetchEnergyLabel(
 	if (productDetailsResult.isErr()) {
 		if (
 			isStatusCode(productDetailsResult.error, 404) ||
-			// Seems like EPREL API returns 403 if Energy Labeld does not exist
+			// Seems like EPREL API returns 403 if Energy Label does not exist
 			isStatusCode(productDetailsResult.error, 403)
 		) {
 			return Ok(null);
@@ -89,8 +90,7 @@ export async function fetchEnergyLabel(
 
 	// Construct sheet url map
 	const languageSet = getLanguageSet(placementCountries);
-	// @ts-expect-error -- Filled below
-	const sheetUrlMap: Record<TSheetLanguage, string> = {};
+	const sheetUrlMap: Record<TSheetLanguage, string> = {} as Record<TSheetLanguage, string>;
 	for (const language of languageSet) {
 		const url = getSheetUrl(productGroup, registrationNumber, language);
 		if (language != null && url != null) {
@@ -100,21 +100,32 @@ export async function fetchEnergyLabel(
 
 	return Ok({
 		registrationNumber,
-		energyClass,
+		energyClass: energyClass as TEnergyClass,
 		modelIdentifier,
-		labelUrlMap: {
-			PDF: getLabelUrl(productGroup, registrationNumber, 'PDF'),
-			PNG: getLabelUrl(productGroup, registrationNumber, 'PNG'),
-			SVG: getLabelUrl(productGroup, registrationNumber, 'SVG')
+		label: {
+			urlMap: {
+				PDF: getLabelUrl(productGroup, registrationNumber, 'PDF'),
+				PNG: getLabelUrl(productGroup, registrationNumber, 'PNG'),
+				SVG: getLabelUrl(productGroup, registrationNumber, 'SVG')
+			}
 		},
-		sheetUrlMap
+		sheet: {
+			urlMap: sheetUrlMap,
+			fallbackLanguage:
+				sheetUrlMap['EN'] != null ? 'EN' : ((Object.keys(sheetUrlMap)[0] as TSheetLanguage) ?? 'EN')
+		}
 	});
 }
 
 export interface TEnergyLabel {
 	registrationNumber: string;
 	modelIdentifier: string;
-	energyClass: string; // 'A' | 'B' | 'C' | 'D' | 'E' | 'F'
-	labelUrlMap: Record<TLabelFormat, string>;
-	sheetUrlMap: Record<TSheetLanguage, string>;
+	energyClass: TEnergyClass;
+	label: {
+		urlMap: Record<TLabelFormat, string>;
+	};
+	sheet: {
+		urlMap: Partial<Record<TSheetLanguage, string>>;
+		fallbackLanguage: TSheetLanguage;
+	};
 }

apps/sfy-eu-blocks-app/app/package.json

@@ -51,7 +51,7 @@
 	"devDependencies": {
 		"@blgc/config": "^0.0.23",
 		"@shopify/api-codegen-preset": "^1.1.1",
-		"@types/node": "^22.5.2",
+		"@types/node": "^22.5.4",
 		"@types/react": "^18.3.4",
 		"@types/react-dom": "^18.3.0"
 	},

apps/sfy-eu-blocks-app/app/shopify.app.toml

@@ -8,7 +8,7 @@ extension_directories = [
 ]
 name = "eu-blocks"
 handle = "eu-blocks"
-application_url = "https://agreed-merchant-mason-wallet.trycloudflare.com"
+application_url = "https://surprising-shuttle-therapeutic-lead.trycloudflare.com"
 embedded = true
 
 [build]
@@ -22,9 +22,9 @@ scopes = "read_files,read_locales,read_products,write_files,write_products"
 
 [auth]
 redirect_urls = [
-  "https://agreed-merchant-mason-wallet.trycloudflare.com/auth/callback",
-  "https://agreed-merchant-mason-wallet.trycloudflare.com/auth/shopify/callback",
-  "https://agreed-merchant-mason-wallet.trycloudflare.com/api/auth/callback"
+  "https://surprising-shuttle-therapeutic-lead.trycloudflare.com/auth/callback",
+  "https://surprising-shuttle-therapeutic-lead.trycloudflare.com/auth/shopify/callback",
+  "https://surprising-shuttle-therapeutic-lead.trycloudflare.com/api/auth/callback"
 ]
 
 [webhooks]

apps/sfy-eu-blocks-app/checkout-ui-extension/package.json

@@ -12,6 +12,7 @@
 	"dependencies": {
 		"@shopify/ui-extensions": "2024.7.0",
 		"@shopify/ui-extensions-react": "2024.7.0",
+		"eprel-client": "^0.0.16",
 		"feature-fetch": "^0.0.21",
 		"feature-react": "^0.0.23",
 		"feature-state": "^0.0.23",
@@ -20,7 +21,6 @@
 	"devDependencies": {
 		"@blgc/config": "^0.0.23",
 		"@types/react": "^18.3.5",
-		"eprel-client": "^0.0.15",
 		"react-reconciler": "^0.29.2"
 	}
 }

apps/sfy-eu-blocks-app/checkout-ui-extension/src/CheckoutCartLineItem/environment/config/core-api.config.ts

@@ -1,3 +1,3 @@
 export const coreApiConfig = {
-	baseUrl: 'https://exclusion-candles-holds-licence.trycloudflare.com' // TODO: Find way to sync url from api-core-node
+	baseUrl: 'https://miles-collectibles-organised-deborah.trycloudflare.com' // TODO: Find way to sync url from api-core-node
 };