shopify instructions

1 files changed, 18 insertions, 14 deletions

diff --git a/src/routes/(app)/[username]/settings/[...tab]/_shopify.svelte b/src/routes/(app)/[username]/settings/[...tab]/_shopify.svelte
index d63f2f89..7b9cc40b 100644
--- a/src/routes/(app)/[username]/settings/[...tab]/_shopify.svelte
+++ b/src/routes/(app)/[username]/settings/[...tab]/_shopify.svelte
@@ -5,41 +5,45 @@
 
 	export let user;
   $: paymentsUrl = user.shopifyStore && "https://admin.shopify.com/store/" + user.shopifyStore + "/settings/payments";
-  $: checkoutUrl = user.shopifyStore && "https://admin.shopify.com/store/" + user.shopifyStore + "/settings/checkout#:r86:Labelt";
+  $: checkoutUrl = user.shopifyStore && "https://admin.shopify.com/store/" + user.shopifyStore + "/settings/checkout";
+  $: appsUrl = user.shopifyStore && "https://admin.shopify.com/store/" + user.shopifyStore + "/settings/apps/development";
 </script>
 
 <div>
-	<label for="username" class="font-bold mb-1 block">Store ID</label>
+	<label for="shopifyStore" class="font-bold mb-1 block">Store ID</label>
 	<div class="flex mb-2">
 		<div class="text-gray-600 p-4 my-auto bg-gray-100 border rounded-l-2xl border-r-0 pr-1">admin.shopify.com/store/</div>
 		<input
 			type="text"
-			name="username"
+			name="shopifyStore"
 			bind:value={user.shopifyStore}
-			class="border-l-0 rounded-l-none w-auto min-w-0 pr-1 grow"
+			class="border-l-0 rounded-l-none w-auto min-w-0 pl-1 grow"
 		/>
 	</div>
 	<p class="text-secondary my-2">
-  Visit your store <a class:active={!!paymentsUrl} href={paymentsUrl || undefined}>Settings</a> and add <code class="text-black">Bitcoin</code> under <code class="text-black">Payments -> Manual payment methods</code>
+   Add Bitcoin under <a class:active={!!paymentsUrl} href={paymentsUrl || undefined}>Payments > Manual payment methods</a> with a description like "Pay with Bitcoin".
 	</p>
 </div>
 
 <div>
-	<label for="display" class="font-bold mb-1 block">API Public Key</label>
-	<input type="text" name="display" bind:value={user.shopifyPubkey} />
-</div>
+	<label for="shopifyToken" class="font-bold mb-1 block">Admin API token</label>
+	<input type="text" name="shopifyToken" bind:value={user.shopifyToken} />
 
-<div>
-	<label for="display" class="font-bold mb-1 block">API Secret Key</label>
-	<input type="text" name="display" bind:value={user.shopifySecret} />
+<p class="text-secondary my-2">
+Create an app named Coinos under <a class:active={!!appsUrl} href={appsUrl || undefined}>Apps > App Development</a>
+</p>
+
+<p class="text-secondary my-2">
+Edit the Admin API scopes to enable <code class="text-black">write_orders</code> then
+install the app into your store and copy the Admin API access token here.
 </div>
 
 <div>
-	<label for="display" class="font-bold mb-1 block">Additional Scripts</label>
-  <textarea rows={5} type="text" name="display" readonly><script src="{`${$page.url.protocol}//${$page.url.host}/${user.username}/shopify.js`}"> </script></textarea>
+	<label for="display" class="font-bold mb-1 block">Additional scripts</label>
+  <textarea rows={5} type="text" name="shopifyScripts" readonly><script src="{`${$page.url.protocol}//${$page.url.host}/${user.username}/shopify.js`}"> </script></textarea>
 
 	<p class="text-secondary my-2">
-  Copy this into your Shopify store <a class:active={!!paymentsUrl}  href={checkoutUrl}>Settings</a> under <code class="text-black">Checkout -> Additional scripts</code>
+  Copy this into <a class:active={!!paymentsUrl}  href={checkoutUrl}>Checkout -> Additional scripts</a>
 	</p>
 </div>