We have a project mobile pass builder (.pkpass) This project is ordering user to build pass step-by-step and in the end on Finalize click user will be able to download his pass.
We have PUT request to put image (logo or stripe) and POST request to set info like text labels etc. so we will be able to build a pass considering images. When I try to fill this pass from pc version of the site - everything work perfect, I can download .pkpass and when I open it with archive I can see these images as well as I can see that requests passed (2 PUT requests for logo and stripe separately) BUT when I try to go through this flow on my mobile and finally reach the end then only 1 POST request executes and unlike any of PUT requests.
What's even worse - I cannot check what's the problem from mobile
Here is the function which I'm executing:
update.ts:
import { getSession } from 'next-auth/react';import { updateImageOpts, updateMemberOpts } from '@/const';import { EBarcodeType, EImageType } from '@/enums';import { hexToRgb } from '@/utils';export const updateMember = async (ecard: TEcard) => { const session = await getSession(); if (!session) return; const codeOptions = { [EBarcodeType.BARCODE]: ecard.barcodeOpts, [EBarcodeType.QR_CODE]: ecard.qrCodeOpts, [EBarcodeType.BUSINESS]: ecard.qrBusinessOpts, }[ecard.codeType as string]; const backgroundColor = hexToRgb(ecard.colors.background ?? '#F7F7F7'); const foregroundColor = hexToRgb(ecard.colors.text ?? '#4b4949'); const labelColor = hexToRgb(ecard.colors.label ?? '#4b4949'); const rgbBackgroundColor = `${backgroundColor?.r}, ${backgroundColor?.g}, ${backgroundColor?.b}`; const rgbForegroundColor = `${foregroundColor?.r}, ${foregroundColor?.g}, ${foregroundColor?.b}`; const rgbLabelColor = `${labelColor?.r}, ${labelColor?.g}, ${labelColor?.b}`; const body: TUpdateMember = { headerLabel: ecard.labels.header.label ?? 'Header Label', headerText: ecard.labels.header.value ?? 'Header Text', primaryLabel: ecard.labels.primary.label ?? 'Primary Label', primaryText: ecard.labels.primary.value ?? 'Primary Text', secondaryLabel: ecard.labels.secondary.label ?? 'Secondary Label', secondaryText: ecard.labels.secondary.value ?? 'Secondary Text', backgroundColor: rgbBackgroundColor, foregroundColor: rgbForegroundColor, labelColor: rgbLabelColor, behance: ecard.qrBusinessOpts?.json?.Behance ?? 'behance', company: ecard.qrBusinessOpts?.json?.Organization ?? 'company', email: ecard.qrBusinessOpts?.json?.['Home Email'] ?? 'email', emailWork: ecard.qrBusinessOpts?.json?.['Work Email'] ?? 'emailWork', firstName: ecard.qrBusinessOpts?.json?.['First Name'] ?? 'firstName', lastName: ecard.qrBusinessOpts?.json?.['Last Name'] ?? 'lastName', linkedin: ecard.qrBusinessOpts?.json?.LinkedIn ?? 'linkedin', middleName: ecard.qrBusinessOpts?.json?.['Middle Name'] ?? 'middleName', prefix: ecard.qrBusinessOpts?.json?.['Honorific Prefixes'] ?? 'prefix', telCell: ecard.qrBusinessOpts?.json?.['Cell Phone'] ?? 'telCell', telWork: ecard.qrBusinessOpts?.json?.['Home Phone'] ?? 'telWork', title: ecard.qrBusinessOpts?.json?.Title ?? 'title', website: ecard.qrBusinessOpts?.json?.Website ?? 'website', role: ecard.qrBusinessOpts?.json?.Role ?? 'role', codeVcard: ecard.qrBusinessOpts?.value ?? null, codeLabel: codeOptions?.label ?? 'Code Label', codeType: ecard.codeType === EBarcodeType.BARCODE ? 'PKBarcodeFormatCode128' : 'PKBarcodeFormatQR', codeText: codeOptions?.value ?? 'Code Text', back: { backLabel1: ecard.back?.[0]?.label ?? 'Back label 1', backText1: ecard.back?.[0]?.value ?? 'Back Text 1', backLabel2: ecard.back?.[1]?.label ?? 'Back label 2', backText2: ecard.back?.[1]?.value ?? 'Back Text 2', backLabel3: ecard.back?.[2]?.label ?? 'Back label 3', backText3: ecard.back?.[2]?.value ?? 'Back Text 3', backLabel4: ecard.back?.[3]?.label ?? 'Back label 4', backText4: ecard.back?.[3]?.value ?? 'Back Text 4', backLabel5: ecard.back?.[4]?.label ?? 'Back label 5', backText5: ecard.back?.[4]?.value ?? 'Back Text 5', }, }; await fetch(updateMemberOpts.url, { method: updateMemberOpts.method, headers: {'Content-Type': 'application/json', Authorization: `Bearer ${session.user.access_token}`, }, body: JSON.stringify(body), }); if (ecard.logo) { const templateId = 'templateIdHere'; const opts = updateImageOpts(templateId, EImageType.LOGO.toUpperCase()); const formData = new FormData(); const blob = new Blob([Buffer.from(ecard.logo, 'base64')], { type: 'image/png' }); formData.append('file', blob, 'logo.png'); await fetch(opts.url, { method: opts.method, headers: { Authorization: `Bearer ${session.user.access_token}`, }, body: formData, }); } if (ecard.strip) { const templateId = 'templateIdHere'; const opts = updateImageOpts(templateId, EImageType.STRIP.toUpperCase()); const formData = new FormData(); const blob = new Blob([Buffer.from(ecard.strip, 'base64')], { type: 'image/png' }); formData.append('file', blob, 'logo.png'); await fetch(opts.url, { method: opts.method, headers: { Authorization: `Bearer ${session.user.access_token}`, }, body: formData, }); }};How I call this function:
const handleFinalize = async () => { if (!ecard) return; updateMember(ecard); dispatch(updateProgress(7));};